Small program development Taro framework (React and Vue3) development experience

Recently received a development demand, is similar to the chat room function of the small program development. I have done several small program development before, using native writing, 4 files on a page, split SCSS, WXS, and even 6 files, which was very annoying. “I have to say, looking back at native development, there are far fewer pits and the documentation integrity is the best.” The technology stack for learning has always been Vue. Under the opportunity of small program development, WE are looking for multi-terminal development frameworks, such as Uni-App and Taro. “After looking at the Uni-App for a long time, the configuration items always feel very complicated. As soon as I see Taro’s instructions are so clear, I immediately feel confused.” After researching for a while, I found that the Taro native language framework is React. At the beginning, I was very confused. After all, I had been learning Vue all of a sudden. I was afraid there would be a lot of mistakes when I switched to React. “Indeed, there are many pits in the follow-up, especially asynchronous update, hook update, etc.” Thinking about the framework of things are very similar in nature, it is better to start to see.

Taro-React-TypeScript

React has Class and functional components. I recommend using Class components when developing a page. Why? 1, better support mobX, REdux and other global state management, functional for stateless components, of course, through hook into a stateful component, but the global state management and other NPM package support is not good; Better support for life cycle functions; ComponentDidShow, componentDidHide, onShareTimeline and other small program life cycle functions, only the Class component support; 3. Functional components are more suitable for writing public components, with clearer logic;

import Taro, { FC, memo } from "@tarojs/taro";
import { View,Input } from "@tarojs/components";
import { useState } from 'react'
import {AtInput } from 'taro-ui';
import {loginSmsVerifyApi,bindXbApi} from '.. /.. /api/index'
import { get64string } from '.. /.. /util/methods';

import "./index.scss";
typeprops = { arr? :Array<number>;
  handleEmit: any
}
export const PInputbox: FC<props> = ({ arr = [1.2.3.4.5.6],handleEmit }) = > {
    const [focusVal, setfocusVal] = useState<boolean> (true) / / the focus state
    const [pwdValue, setPwdValue] = useState<string> (' ') // inputValue
    const length = arr.length;
    const onChange = function (event:any) {
      let e = event.detail.value;
      setPwdValue(e)
      if(e.length == 6){
        handleEmit(e)
      }
    }
    //inputbox Click
    const inputBoxClick = function(){
      setfocusVal(true)}const focusmethod = function(){}const blurmethod = function(){
      setfocusVal(false)}return (
        <View className="pint">
          <View className="pint-block" onClick={inputBoxClick}>
          {
                arr.map((item,index)=>{
                  return(
                    <View
                    key={index}
                    className="pint-inputbox" >
                      {
                       index < (pwdValue.length) ? pwdValue.toString().substr(index,1) : ''
                      }
                    </View>)})}<Input
            maxlength={6}
            type="number"
            focus={focusVal}
            value={pwdValue}
            onFocus={focusmethod}
            onBlur={blurmethod}
            className="pint-input" name="pintInput" onInput={onChange}></Input>
          </View>
            </View>
    );
};
Copy the code

Taro-Vue3-TypeScript

At present, the progress of Vue3 reconstruction is about 60%, and I have been learning Vue2 before. Just getting started with Vue3, learning a wave of new features: compositionAPI, script-Setup, ref feature, etc. The compositionAPI and script-Setup features are of particular interest.

CompositionAPI uses ref to wrap responsiveness variables with XXX. Value = newValue “XXX = newValue”, syntactically more than React this.setDate({XXX: NewValue}) is slightly better;

<template> < button@tap ="increment"> </ button@tap ="increment"> </view> <view> Added: {{count}}, total {{total}}. </view> </template> <script> import { ref, computed, onMounted, toRefs, watch } from 'vue' export default { name: 'case1', setup(props) {// ref response variable const count = ref(0) const existCount = ref(4) // Computed method, if the value of count changes, Total const total = computed(() => count.value+ existCount.value) function increment() {count.value++} onMounted(() => console.log('component mounted! Increment {existCount, count, total}}} </script>Copy the code

Script-setup The page after using the script-setup syntax

<template> <view> <view>count:{{info}}, MSG :{{info}}</view> < button@tap =" incandeInfo "> </view> </template> <script setup=" props " lang="ts"> import { ref, toRefs } from 'vue' interface Props { msg:String; info: String; } const props = withDefaults(defineProps<Props>(), {MSG :' info '}) const count = ref(0) const info = ref(props. MSG) const incandeInfo = () => {count.value++ info.value = "change hello" + count.value } </script>Copy the code

The code in the Script tag above has the same effect as the following:

<script lang="ts">
import { ref, toRefs } from 'vue'
export default {
  props: {
    msg: String,
    },
  setup(props) {
  const count = ref(0)
  const info = ref(props.msg)
  const incAndChangeInfo = () => {
    count.value++
    info.value = "change hello" + count.value
    }
  return {
    count,
    info,
    incAndChangeInfo,
    }
  }
}
</script>
Copy the code

Vue3.2’s script-setup syntax has obvious advantage: 1. No return statement is required. The default variable defined in script-setup is export. 2. Support better props verification and default value writing; 3, imported components can be directly referenced in template without redeclaring them in components.

Ask you a question

I have to say that vue3 and React support TypeScript very well; Taro_React: this problem is not encountered on native keyboards and third-party keyboards on ios. Dialog box, when I use the input box in the small program, input Chinese, in the candidate word stage, that is, did not confirm, when the other party to the information; There will be blank candidate words; React DiffDom detects that the data is different, rerenders the Dom tree, and the native keyboard’s candidate state is reset. Is there any solution? Dear gods;