Taro文档手册完整版

本文档使用 书栈(BookStack.CN) 构建 - -使用微信小程序第三方组件使用微信小程序第三方组件使用微信小程序第三方组件Taro 支持使用使用微信小程序的第三方组件，例如\h \hecharts-for-weixin，使用方式也异常的简单。首先需要将第三方组件库下载到项目的 src 目录下，随后在页面或者组件里通过配置 usingComponents 指定需要引用的第三方组件即可，组件调用的时候需要按照 JSX 的使用规范来进行传参和事件绑定进行传参和事件绑定1. import Taro, { Component } from '@tarojs/taro'2. import { View } from '@tarojs/components'3. 4. function initChart () {5. // 6. }7. 8. export default class Menu extends Component {9. static defaultProps = {10. data: []11. }12. 13. config = {14. // 定义需要引入的第三方组件15. usingComponents: {16. 'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径17. }18. }19. 20. constructor(props) {21. super(props)22. this.state = {23. ec: {24. onInit: initChart25. }26. }27. }28. 29.29. componentWillMount () {30. console.log(this) // this -> 组件 Menu 的实例31. }32. 33. render () {34. return (35. <View>36. <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>37. </View>38. )39. }40. }使用微信小程序第三方组件Taro 代码与微信小程序代码混写Taro 代码与微信小程序代码混写Taro 代码与微信小程序代码混写Taro项目 支持 Taro 的代码与小程序原生的页面、组件代码混合存在，只需要将原生的页面、组件代码放入 src 目录下，随后在 入口文件 app.js 中定义好 pages 配置指向对应的原生的页面即可，在原生页面的配置中，你可以通过 usingComponents 来定义需要引入的组件，这里可以指定 Taro 组件同时也可以指定小程序原生的组件。

最佳实践最佳实践最佳实践关于 JSX 支持程度补充说明由于 JSX 中的写法千变万化，我们不能支持到所有的 JSX 写法，同时由于微信小程序端的限制，也有部分 JSX 的优秀用法暂时不能得到很好地支持，特在此补充说明一下对于 JSX 的支持程度1. import 1. import { set as setGlobalData, get as getGlobalData } from 不能在包含 JSX 元素的 map 循环中使用 if 表达式不能使用 Array#map 之外的方法操作 JSX 数组不能在 JSX 参数中使用匿名函数暂不支持在 render() 之外的方法定义 JSX不允许在 JSX 参数(props)中传入 JSX 元素不能在 JSX 参数中使用对象展开符不支持无状态组件全局变量在 Taro 中推荐使用 Redux 来进行全局变量的管理，但是对于一些小型的应用， Redux 就可能显得比较重了，这时候如果想使用全局变量，推荐如下使用。新增一个自行命名的新增一个自行命名的 JS 文件，例如 global_data.js ，示例代码如下1. const globalData = {}2. 3. export function set (key, val) {4. globalData[key] = val5. }6. 7. export function get (key) {8. return globalData[key]9. }随后就可以在任意位置进行使用啦'./path/name/global_data'2'./path/name/global_data'2. 3. setGlobalData('test', 1)4. 5. getGlobalData('test')最佳实践不能在自定义组件中写 children (taro/custom-component-children)不能在自定义组件中写 children (taro/custom-componentchildren)不能在自定义组件中写 children (taro/customcomponent-children)在 Nerv/React 中，自定义组件嵌套实际上也是通过 props 来实现的，只是 children 是一个特殊的 prop 。而对于 Taro，文档已阐述过不能通过 props 来传递 JSX 元素。更多详情请查看文档\h \hJSX \h简介。规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. <CustomComponent>test</CustomComponent>2. 3. <CustomComponent>{'test'}</CustomComponent>4. 5. <CustomComponent>6. <Other />7. </CustomComponent>8. 9. <Typo>{}</Typo>以下代码不会被警告，也应当在 Taro 任意端中能够运行：11. <CustomComponent />2. 3. <CustomComponent> </CustomComponent>4. 5. <ScrollView>test</ScrollView>6. 7. <View>test</View>8. 9. <View>10. <CustomComponent />11. </View>不能在自定义组件中写 children (taro/custom-component-children)解决方案请查看文档\h \hJSX \h简介。该特性可能会在下一个 Major 版本的 Taro 中得到支持。

不能在包含 JSX 元素的 map 循环中使用 if 表达式(taro/if-statement-in-map-loop)不能在包含 JSX 元素的 map 循环中使用 if 表达式(taro/ifstatement-in-map-loop)不能在包含 JSX 元素的 map 循环中使用 if 表达式(taro/if-statement-in-map-loop)规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. numbers.map((number) => {2. let element = null3. const isOdd = number % 24. if (isOdd) {5. element = <Custom />6. }7. return element8. })以下代码不会被警告，也应当在 Taro 任意端中能够运行：11. numbers.map((number) => {2. let isOdd = false3. if (number % 2) {4. isOdd = true5. }6. return isOdd && <Custom />7. })解决方案尽量在尽量在 map 循环中使用条件表达式或逻辑表达式。1. numbers.map((number) => {2. const isOdd = number % 23. return isOdd ? <Custom /> : null4. })5.5. 6. numbers.map((number) => {7. const isOdd = number % 28. return isOdd && <Custom />9. })当测试用例和线上项目都检测通过时，Taro 将很快（下一个 Minor 版本）支持这一特性。不能在包含JSX元素的map循环中使用if表达式()taro/if-statement-in-map-loop不能使用 Array#map 之外的方法操作 JSX 数组 (taro/manipulate-jsx不能使用 Array#map 之外的方法操作 JSX 数组(taro/manipulate-jsx不能使用 Array#map 之外的方法操作 JSX 数组(taro/manipulate-jsx-as-array)Taro 在小程序端实际上把 JSX 转换成了字符串模板，而一个原生 JSX 表达式实际上是一个React/Nerv 元素(react-element)的构造器，因此在原生 JSX 中你可以随意地一组 React 元素进行操作。但在 Taro 中你只能使用 map 方法，Taro 转换成小程序中 wx:for 。规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. test.push(<View />)2. 3. numbers.forEach(numbers => {4. if (someCase) {5. a = <View />6. }7. })8. 9. test.shift(<View />)10. 11. components.find(component => {12. return component === <View />13. })14. 15. components.some(component => component.constructor.__proto__ === <View />.constructor)以下代码不会被警告，也应当在 Taro 任意端中能够运行：11. numbers.filter(Boolean).map((number) => {2. const element = <View />3. return <View />4. })不能使用 Array#map 之外的方法操作 JSX 数组 (taro/manipulate-jsx解决方案先处理好需要遍历的数组，然后再用处理好的数组调用先处理好需要遍历的数组，然后再用处理好的数组调用 map 方法。1. numbers.filter(isOdd).map((number) => <View />)2. 3. for (let index = 0; index < array.length; index++) {4. // do you thing with array5. }6. 7. const element = array.map(item => {8. return <View />9. })除非微信小程序开放更多能力，目前看不到能支持该特性的任何可能性。

不能在 JSX 参数中使用匿名函数(taro/no-anonymous-function-in-pr不能在 JSX 参数中使用匿名函数(taro/no-anonymous-functionin-pr不能在 JSX 参数中使用匿名函数(taro/noanonymous-function-in-props)详情请看文档\h \h事件处理。使用\h使用\h \h bin\hd\h \h 或 \h数类参定函数。\h绑1. <View onClick={ps.hanldeClick.bind(this)} />以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. <View onClick={() => this.handleClick()} />2. 3. <View onClick={(e) => this.handleClick(e)} />4. 5. <View onClick={() => ({})} />6. 7. <View onClick={function () {}} />8. 9. <View onClick={function (e) {this.handleClick(e)}} />以下代码不会被警告，也应当在 Taro 任意端中能够运行：11. <View onClick={this.hanldeClick} />2. 3. <View onClick={ps.hanldeClick} />4. 5. <View onClick={this.hanldeClick.bind(this)} />6. 7. <View onClick={ps.hanldeClick.bind(this)} />解决方案不能在 JSX 参数中使用匿名函数(taro/no-anonymous-function-in-pr当测试用例和线上项目都检测通过时，Taro 将很快（下一个 Minor 版本）支持这一特性。

暂不支持在 render() 之外的方法定义 JSX暂不支持在 render() 之外的方法定义 JSX暂不支持在 render() 之外的方法定义 JSX由于微信小程序的 template 不能动态传值和传入函数，Taro 暂时也没办法支持在类方法中定义JSX。规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. class App extends Component {2. _render() {3. return <View />4. }5. }6. 7. class App extends Component {8. renderHeader(showHeader) {9. return showHeader && <Header />10. }11. }12. 13. class App extends Component {14. renderHeader = (showHeader) => {15. return showHeader& & <Header />16. }17. }解决方案在在 render 方法中定义。1. class App extends Component {2. 3. render () {4. const { showHeader, showMain } = this.state5. const header = showHeader && <Header />6.6. const main = showMain && <Main />7. return (8. <View>9. {header}10. {main}11. </View>12. )13. }14. }当测试用例和线上项目都检测通过时，Taro 将很快（下一个 Minor 版本）支持这一特性。暂不支持在render()之外的方法定义JSX不允许在 JSX 参数(props)中传入 JSX 元素(taro/no-jsx-in-props)不允许在 JSX 参数(props)中传入 JSX 元素(taro/no-jsx-in-props)不允许在 JSX 参数(props)中传入 JSX 元素(taro/no-jsx-in-props)由于微信小程序内置的组件化的系统不能通过属性（props） 传函数，而 props 传递函数可以说React 体系的根基之一，我们只能自己实现了一套组件化系统。而自制的组件化系统则不能使用内置组件化的 slot 功能。两权相害取其轻，我们暂时只能不支持该功能。规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. <Custom child={<View />} />2. 3. <Custom child={() => <View />} />4. 5. <Custom child={function () { <View /> }} />6. 7. <Custom child={ary.map(a => <View />)} />解决方案通过 props 传值在 JSX 模板中预先判定显示内容。该特性可能会在下一个 Major 版本的 Taro 中得到支持。不能在 JSX 参数中使用对象展开符(Object spread)(taro/no-spread-in-props)不能在 JSX 参数中使用对象展开符(Object spread)(taro/nospread-in-props)不能在 JSX 参数中使用对象展开符(Object spread)(taro/no-spread-in-props)微信小程序组件要求每一个传入组件的参数都必须预先设定好，而对象展开符则是动态传入不固定数量的参数。所以 Taro 没有办法支持该功能。规则详情以下代码会被以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：1. <View {...ps} />2. 3. <View {...props} />4. 5. <Custom {...props} />以下代码不会被警告，也应当在 Taro 任意端中能够运行：11. const { id, ...rest } = obj2. 3.