| | |
---|
iOS | JavaScriptCore | WKWebView |
| V8 | |
| NWJS | Chrome WebView |

{
"pages":[
"pages/logs/logs"
]
}
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Taro1.x
「Write once Run anywhere」






<View className='index'>
<Button className='add_btn' onClick={this.props.add}>+</Button>
<Button className='dec_btn' onClick={this.props.dec}>-</Button>
<Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
<View>{this.props.counter.num}</View>
<A />
<Button onClick={this.goto}>走你</Button>
<Image src={sd} />
</View>
<import src="../../components/A/A.wxml" />
<block>
<view class="index">
<button class="add_btn" bindtap="add">+</button>
<button class="dec_btn" bindtap="dec">-</button>
<button class="dec_btn" bindtap="asyncAdd">async</button>
<view>{{counter.num}}</view>
<template is="A" data="{{...$$A}}"></template>
<button bindtap="goto">走你</button>
<image src="{{sd}}" />
</view>
</block>
// 编译前
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
componentDidMount () { }
render () {
return (
<View className=‘index' onClick={this.onClick}>
<Text>Hello world!</Text>
</View>
)
}
}
// 编译后
import {BaseComponent, createComponent} from '@tarojs/taro-weapp'
class Index extends BaseComponent {
// ...
_createDate(){
//process state and props
}
}
export default createComponent(Index)


1.1
1.2
1.3




<div v-if="condition" :id="`item-${id}`" v-model="value" @click="tapName"> {{ message }} </div>
-------------------------------------------编译--------------------------------------------------------
<view wx:if="{{condition}}" id="item-{{id}}" model:value="{{value}}" bindtap="tapName"> {{ message }} </view>




| |
---|
select | picker |
datalist | picker |
img | image |
source | audio |
video | video |
track | video |
a | navigator |
span | label |
| view |

Taro2.x
CLI

Taro3.x

CSS-in-JS





function render(element, domContainer, cb) {
const oldRoot = ContainerMap.get(domContainer);
if (oldRoot != null) {
return oldRoot.render(element, cb);
}
const root = new Root(TaroReconciler, domContainer);
ContainerMap.set(domContainer, root);
return root.render(element, cb);
}





Update Date

3.1
3.2
3.3
3.4 beta
3.5 canary
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。