Applet framework taro

Taro
1、 Introduce
It's following React Multi terminal development solution of syntax specification
Can write a set of code , Re pass Taro The compiler of , Compile the code separately, which can be on different ends ( Wechat applet 、H5、RN) Running code
2、 characteristic
2.1 React Grammar style
with React Consistent idea of componentization , Life cycle and React bring into correspondence with , Support at the same time JSX grammar
2.2 Quickly develop wechat apps
Support use npm / yarn Third party installation management relies on
Support ES6/7/8 Even newer ES standard
Support CSS Precompiler
Support Redux Conduct status management
Applet API Optimize
2.3 Support multi terminal development and transformation
Can support conversion to Wechat applet as well as H5 End
3、 Environment building

$ cnpm i -g @tarojs/cli

$ taro init myApp01
4、 Compile using the
4.1 Wechat applet

$ npm run dev:weapp

$ npm run build:weapp
4.2 Baidu applet

$ npm run dev:swan

$ npm run build:swan
4.3 Alipay applet

$ npm run dev:alipay

$ npm run build:alipay
4.4 H5

$ npm run dev:h5

$ npm run build:h5
4.5 React Native

$ npm run dev:rn
5、 form
https://nervjs.github.io/taro/docs/composition.html
6、 matters needing attention
6.1 Applet development tool settings
You need to set the shutdown ES6 turn ES5 function , Error may be reported when opening
You need to set the style auto completion when uploading code is turned off , Error may be reported when opening
You need to set to turn off code compression uploading , Error may be reported when opening
7、 Project directory structure

├── dist 【 Compile results directory 】

├── config 【 The configuration directory 】

| ├── dev.js 【 Configuration at development time 】

| ├── index.js 【 The default configuration 】

| └── prod.js 【 Configure when packaging 】

├── src 【 Source directory 】

| ├── pages 【 Page file directory 】

| | ├── index 【index Page directory 】

| | | ├── index.js 【index Page logic 】

| | | └── index.css 【index Page style 】

| ├── app.css 【 Project general style 】

| └── app.js 【 Project entry documents 】

└── package.json
7.1 Entrance file app.js

// -> The entry file is also react The style of writing

// -> Reference dependency required @tarojs/taro, This is a Taro The basic framework of the scheme , Here we inherit Component Component base class

import Taro, { Component } from ‘@tarojs/taro’

import Index from ‘./pages/index’

import ‘./app.less’

class App extends Component {

// -> The configuration here mainly refers to the global configuration of wechat applet , When compiling into an applet , This part of the configuration will be separated into app.json, And compiled into other end , It will also have other functions

config = {

pages: [

‘pages/index/index’

],

window: {

backgroundTextStyle: ‘light’,

navigationBarBackgroundColor: ‘#fff’,

navigationBarTitleText: ‘WeChat’,

navigationBarTextStyle: ‘black’

}

}

// -> The entry file is inherited from Component Component base class , It also has a component lifecycle , But because of the particularity of the entry file , His life cycle is not complete

componentWillMount () {

// effect -> The program is loaded

// explain -> In wechat applet, this life cycle method corresponds to app Of onLaunch

}

componentDidMount () {

// effect -> The program is loaded

// explain -> In wechat applet, this life cycle method corresponds to app Of onLaunch, stay componentWillMount After execution

}

componentDidShow () {

// effect -> The program is displayed

// explain -> In wechat applet, this life cycle method corresponds to onShow, stay H5 It is also implemented in

}

componentDidHide () {

// effect -> Program is hidden

// explain -> In wechat applet, this life cycle method corresponds to onHide, stay H5 It is also implemented in

}

componentDidCatchError () {

// effect -> Error listening function

// explain -> In wechat applet, this life cycle method corresponds to onError

}

componentDidNotFound () {

// effect -> There is no listener function on the page

// explain -> In wechat applet, this life cycle method corresponds to onPageNotFound

}

​

// stay App Class render() Function doesn't work

// Do not modify this function

render () {

return (



)

}

}

Taro.render(, document.getElementById(‘app’))

​

// Be careful

// 1. Wechat applet onLaunch Usually with a parameter options, stay Taro You can pass in all life cycles and common event methods this.$router.params Access to the , It also applies to other ends

// 2. The entry file needs to contain a render Method , Generally return to the first page of the program , But it is worth noting that it is not in the entry file render Method to write logic and reference other pages 、 Components , Because compile time render The content of the method will be directly replaced , Your logic code won't work .