01-Taro 打造 hello-world 应用

一、简介



Taro是由京东凹凸实验室出品，书写一套代码通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等）运行的代码。废话不多说，先从hello-world开始吧。

二、搭建环境



// node>=8.0.0

npm install -g @tarojs/cli

taro -v

taro init taroDemo



不好意思我果断control+z



cd taroDemo

yarn



安装依赖成功后咱先体验一把weapp、alipay、h5的效果

三、小试牛刀



// dev 开发 build 生产

yarn dev:weapp // 微信小程序

yarn dev:alipay // 支付宝小程序

yarn dev:h5



以微信小程序为例



cd taroDemo

yarn dev:weapp

// 打开微信开发工具 导入dist目录





如果想生成支付宝小程序则control+z 再 yarn dev:alipay, 生成的dist目录就是支付宝小程序了





四、项目结构



五、多端同步调试



在config/index.js配置



outputRoot: `dist/${process.env.TARO_ENV}`



在终端打开多个Tab,分别运行



yarn dev:weapp

yarn dev:alipay



编译出来的目录如图，dist 目录下有 weapp 和 alipay 两个目录





关注公众号： 页面仔小杨 【实战干货、原创分享】