小程序框架taro以及组件库taro-ui体验汇总

为什么选择taro

对比了下时下流行的小程序框架taro、mp-vue、wepy，也参考团队目前使用的是react，最终选择使用taro。因为三者都是市面上流行以及大量投入使用的框架，相信群众的眼睛是雪亮的，所以简单粗暴点对比下npm下载量，以及github关注量，也能看出taro有不错的优势。

截止2019年11月28日

• taro github star数量：22.9k / npm周下载次数：2590 / 2017年发布
• mpvue github star数量：19k / npm周下载次数：1250 / 2017年发布
• wepy gitbub star数量：19k / npm周下载次数：651 / 2016年发布

从数据上taro整个社区活跃度都良好,更新版本也相当勤快,整体呈现出后来者居上的发展态势。

taro几大特性

• 一套代码可编译成 微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等
• react的语法风格
• 提供了多端适配的组件库taro-ui

几个重要的官网链接

taro官网链接：https://taro-docs.jd.com/taro/docs/README.html
taro-ui API地址：https://taro-ui.aotu.io/#/docs/introduction

全局安装taro

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

初始化项目

$ taro init myApp

根据引导初始化项目

安装依赖

进入初始化的项目

# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install

小程序编译（提供了dev模式以及发布模式）

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# 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文件，下载小程序开发工具并选择dist目录进行预览即可。友情提醒，如果觉得编译命令太长不好记忆之类的，也可以自己去package.json scripts下修改相应的打包命令

关于taro-ui部分使用细节注意

公共样式在app.jsx中引入即可，但是引入的公共样式只在app.jsx中配置的pages页面生效，所以自己封装的组件等，需要单独引入相关组件的样式

其他

taro相关文档较齐全，找问题以及api可以自己多扒拉上面提供的两个官网地址