Small micro-channel program branches Taro (forward https://nervjs.github.io/taro/docs/taroize.html )
Taro your applet native micro-channel may be applied to convert the code Taro, you can turn taro build command codes of the code converting Taro corresponding platform, or on the converted code Taro secondary development using React manner.
Micro-channel native applet turn Taro operation is very simple, installation must first npm i -g @tarojs/cli install Taro command-line tool, followed by positioning the applet to the root item in the command line, run root directory:
$ taro convert
To complete the conversion. Converted code is stored in the root directory taroConvert folder. You need to navigate to the taroConvert directory to perform npm install after the command you can use the taro build command to compile the code corresponding to the platform.
Secondary development
After a hypothesis has been to convert the file as follows:
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './index.scss'
var app = Taro.getApp()
@withWeapp('Page')
class _C extends Taro.Component {
state = {}
componentWillMount(e) {
var orderId = e.id
this.data.orderId = orderId
}
componentDidShow() {
var that = this
Taro.request({
url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/detail',
data: {
token: Taro.getStorageSync('token'),
id: that.data.orderId
},
success: res => {
Taro.hideLoading()
if (res.data.code != 0) {
Taro.showModal({
title: '错误',
content: res.data.msg,
showCancel: false
})
return
}
that.setData({
orderDetail: res.data.data,
logisticsTraces: res.data.data.logisticsTraces.reverse()
})
}
})
}
config = {
navigationBarTitleText: '物流详情'
}
render() {
const {
orderDetail: orderDetail,
logisticsTraces: logisticsTraces
} = this.state
return (
<View className="container">
<View className="top-sec">
<View className="a-row">
<View className="label">物流单号</View>
<View className="text">{orderDetail.logistics.trackingNumber}</View>
</View>
<View className="a-row">
<View className="label">物流公司</View>
<View className="text">{orderDetail.logistics.shipperName}</View>
</View>
</View>
<View className="sec-wrap">
<View className="details-info">
<View className="line-box" />
{logisticsTraces.map((item, index) => {
return (
<View className="a-row" key={index}>
<View className="dot">
<View
className="active-dot"
hidden={index == 0 ? false : true}
>
<View className="yuan-red" />
</View>
<View
className="default-dot"
hidden={index == 0 ? true : false}
/>
</View>
<View className="info">
<View className="date-box">{item.AcceptTime}</View>
<View className="text">{item.AcceptStation}</View>
</View>
</View>
)
})}
</View>
</View>
</View>
)
}
}
export default _C
It looks like an ordinary Taro components, the most important difference is that @withWeapp() this decorator, you can be understood as the conversion run code @withWeapp() would increase some of the original Taro no methods and properties, such as:
this.setData
The converted this.setData API is equivalent to a small program this.setData of polyfill, he and this.setState the biggest difference is that, this.setData after data data is updated simultaneously, and asynchronous rendering is updated, and setState both are asynchronous.
this.data with this.properties
this.data And this.properties corresponding to the Taro this.state and this.props the Alias, when their data is updated, the corresponding state and props synchronized across.
The life cycle
Lifecycle hook function Taro original file will be converted to Taro's life cycle, complete correspondence is as follows:
| Page.onLoad | componentWillMount |
|---|---|
| onShow | componentDidShow |
| onHide | componentDidHide |
| onReady | componentDidMount |
| onUnload | componentWillUnmount |
| onError | componentDidCatchError |
| App.onLaunch | componentWillMount |
| Component.created | componentWillMount |
| attached | componentDidMount |
| ready | componentDidMount |
| detached | componentWillUnmount |
| moved | Retention |
common problem
IDE applet displays _createData error
This error is usually due to the initial original code data is no corresponding data, by subsequently this.setData causing the additional data. Whether in Taro recommended state(data) still properties(props) have to set a default value. You can provide a default value to solve this problem in the class constructor or modify the original code, which should also be the best practices for writing code.
Conversion wxParse error file does not exist
This is due to the wxParse source using a non-existent template statement caused. You can modify the wxParse source code file wxParse.wxml 134 lines to 207 lines:
<!--循环模版--> <template name="wxParse1"> <!--<template is="wxParse1" data="{{item}}" />--> <!--判断是否是标签节点--> <block wx:if="{{item.node == 'element'}}"> <block wx:if="{{item.tag == 'button'}}"> <button type="default" size="mini"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </button> </block> <!--li类型--> <block wx:elif="{{item.tag == 'li'}}"> <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}"> <view class="{{item.classStr}} wxParse-li-inner"> <view class="{{item.classStr}} wxParse-li-text"> <view class="{{item.classStr}} wxParse-li-circle"></view> </view> <view class="{{item.classStr}} wxParse-li-text"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </view> </view> </view> </block> <!--video类型--> <block wx:elif="{{item.tag == 'video'}}"> <template is="wxParseVideo" data="{{item}}" /> </block> <!--img类型--> <block wx:elif="{{item.tag == 'img'}}"> <template is="wxParseImg" data="{{item}}" /> </block> <!--a类型--> <block wx:elif="{{item.tag == 'a'}}"> <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </view> </block> <block wx:elif="{{item.tag == 'table'}}"> <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </view> </block> <block wx:elif="{{item.tag == 'br'}}"> <template is="WxParseBr"></template> </block> <!- Other block level tag -> " <Block WX: = elif{{item.tagType == 'block'}}"> <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </view> </block> <!--内联标签--> <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse0" data="{{item}}" /> </block> </view> </block> <! - determines whether the text node -> <Block WX: elif = " {{item.node == 'text'}} " > <! - if yes, directly -> <Template IS = " WxEmojiView " Data = " {{Item}} " /> </ Block> </ Template>
The <template name="wxParse1"> inside of all of template <template is="wxParse2" data="{{item}}" /> modified to <template is="wxParse0" data="{{item}}" /> run taro convert to. After this modification will cancel the original wxParse can only process 11 nested HTML problem, in theory, does not burst memory stack can handle an unlimited level of nested HTML.
It does not support relations and Behavior
Currently only supports converting temporary conversion Page, Component , App applets component instance three configurations is created. relations And Behaviorin many other small programs end in no corresponding implementation, we believe that to achieve these two little functional significance.
File conversion is unsuccessful wepy
Currently only supports the conversion of native applications using small micro-channel program development.