Taro框架的使用
背景
Taro是继Wepy、Mpvue之后，为解决终端碎片化问题的又一框架
Taro安装
Taro 是一个基于 NodeJS 多端统一开发框架，在安装使用 Taro 之前需要确保已安装好 Node 环境。
Node安装
通过官网：https://nodejs.org/zh-cn/
通过nvm（Node 版本管理工具）: nvm(https://github.com/creationix/nvm)
安装nvm可以参考我之前的文章：https://www.jianshu.com/p/d7e5f8729449
NPM 与 Yarn
NPM(https://www.npmjs.com/get-npm)
Yarn(https://yarnpkg.com)
Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新 Node 包管理工具，相比于 NPM，它具有速度更快、安装版本统一、更加清爽简洁等特点。
查看版本号
$ npm -v
$ yarn -v
taro-cli
全局安装 Taro 开发工具 @tarojs/cli
NPM
$ npm install -g @tarojs/cli
Yarn
$ yarn global add @tarojs/cli
查看Taro 版本
$ taro -v
使用
创建项目
$ taro init myApp
NPM 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目：
$ npx @tarojs/cli init myApp
image.png
完成之后
image.png
node版本我使用的是 v11.10.1
需要输入的几项配置：
image.png
目前 Taro 已经支持微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换，针对不同端的启动以及预览、打包方式并不一致。
微信小程序
选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包：
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
百度小程序
选择百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
百度小程序编译预览及打包：
# npm script
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan
支付宝小程序
选择支付宝小程序模式，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
支付宝小程序编译预览及打包：
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
H5
H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览。
H5 编译预览及打包：
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch
React Native
React Native 端运行需执行如下命令，React Native 端相关的运行说明请参见 React Native 教程。
# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch
更新 Taro
# taro
$ taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest
更新项目中 Taro 相关的依赖，这个需要在你的项目下执行。
$ taro update project
React 核心语法
官网传送门： React(https://reactjs.org/)
JSX 语法
JSX 允许在 JS 中直接使用 XML 标记的方式来声明界面
// 只看 render 函数，绝大多数情况下 render 函数里都会有 XML 标记
render () {
return (
{this.state.title}
{this.state.list.map(item => {
return (
{item}
)
})}
)
}
class 变成 className 【class是JavaScript保留关键字】
上述代码通过 babel 转换为 JS 代码
不能定义变量，使用 if/else 等，你可以用提前定义变量；用三元表达式来达到同样的效果。
列表渲染，一般是用数组的 map 函数
事件绑定上，使用 on + 事件名称
React 组件 （component）
class Demo extends Component {
// ...
render () {
return {this.state.num}
}
}
组件类的第一个字母必须大写,否则会报错。
组件类只能包含一个顶层标签，否则也会报错。
每个 React 组件都会有一个 render 函数，用于返回该组件的 JSX 片段
也可以在 render 函数里返回另一个组件，即组件之间的相互嵌套
Props
父组件传给子组件的数据,会挂载在子组件的 this.props 上
组件中如果收到了新的 props，就会重新执行一次 render 函数，也就是重新渲染一遍。
// 子组件
class Welcome extends React.Component {
render() {
return
发表评论 (审核通过后显示评论)：