微信小程序提供的格式四不像,上手成本高。京东凹凸实验室开发出的Taro框架基于React语法,可以多终端使用:微信小程序、支付宝小程序、字节跳动小程序、H5、RN。
不过最主要的还是适应微信小程序。
本次实战使用Taro开发一个穿搭衣服的微信小程序,使用Taro UI库。
第一章从基本的配置环境,
安装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
本次配置不使用TypeScript、使用Less、默认模板。
安装Taro UI:
npm install taro-ui --save
在src下的app.js
中全局引入组件样式,添加:
import 'taro-ui/dist/style/index.scss'
OK!
基本已经配置完毕,可以使用小程序预览模式,边修改边观察页面变化,需下载好微信开发者工具。
打开微信开发者工具,
在项目中输入:
# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro buil