Summary of the pitfalls encountered when developing WeChat applets using taro

Taro, a framework that is suitable for multi-end products produced by JD Convex Laboratory, Taro is a multi-end development solution that follows React syntax specifications. There are many types of upper ends on the market nowadays. Various ends such as Web, React-Native, WeChat mini-programs are popular. When business requirements are required to be performed on different ends at the same time, the cost of writing multiple sets of code for different ends is obviously very high. At this time, the ability to adapt to multiple ends by writing only one set of code is extremely necessary.

1. Taro development and construction

It is very convenient because its environment is easy to build, and it can be built with a few lines of code according to the official document.

2. When previewing,Different ways are very different! ! ! , use what you write to preview, otherwise it will be a world of difference. (The stupidest pit I've stepped on)

2. About the tags

1. All tags I currently use on taro must be declared in advance, such as View, Button, Image, etc. The following statement is

import { View, Input, Button ,Image,Text} from "@tarojs/components";

2. When using each label, the first letter is capitalized, and it is not standardized if it is not capitalized.

3. Pay special attention to the WeChat applet only recognizes view and text, which is equivalent to div, p tags, etc. in h5.

3. Writing about functions

1. Follow the react syntax and directly apply the example

changeheading(e) {
  ({
     heading: 
       });
     }

4. About taro itself comes with its own tag

：

It is used to write sliding selection, select date, etc. It is very convenient. The example is the component that selects time.

state = {  timeSel: '12:01', }

onTimeChange = e => {
  ({
     timeSel:
      
     })
  }

<Picker mode='time' onChange={}> 
        <View className='arry'> 
             {} > 
        </View>
</Picker>

It is used to obtain user avatars, nicknames and other information in WeChat applets, and can be obtained directly.

<OpenData className='avatar' type='userAvatarUrl'></OpenData>  //Get avatar<OpenData className='name' type='userNickName' lang='zh_CN'></OpenData>  // Get a nickname

3. See the official documents of taro for other tags.

V. References about components

1. First, how to write a component

export default class Component name extends Component {
render(){
  return()
}

Modify the component name when writing, and you can directly reference it when citing, for example

import component name from '../../component location';

6. About page jump

1. First, add the page path to manage (that is, the page path to jump) 'pages/login/login' in the page,

2. Then write a jump method on the page you want to jump to and it will be OK

toPage() {
   ({
       url: '/pages/login/login', 
      }) 
   }

7. Regarding the WeChat authorization pop-up window issue

(OBJECT) This interface has been adjusted. When using this interface, there will be no authorization pop-up window. Please use   to guide the user to actively perform authorization operations, that is, the interface is not in the pop-up authorization window. You can only use button to guide the user to complete the authorization operation by yourself.
Then now we are to determine whether the user is authorized.
If you authorize to directly obtain relevant information, jump to the corresponding page
If you don't have permission, use button to guide users to actively authorize it.

8. The method to call WeChat on taro

In WeChat, it can be used directly in taro, you only need to change the previous wx to Taro.

That is to become.

Summarize

The above is a summary of the pitfalls encountered when using taro to develop WeChat applets introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!