本次展示主要介绍如何实现一套代码跨多端，使用传统的前端方式开发小程序，解决各平台个性化，状态管理，以及自动化打包多平台流程。
关于Taro
Taro是有京东凹凸实验室打造的多端统一开发框架，目前支持react、vue等主流框架，写一套代码就可以多端运行
支持ES6、ES7 8等新规范
支持npm、yarn安装管理
支持Redux、MobX进行状态管理
支持Less、Scss预编译
支持大部分前端库、组件
遵循前端开发规范，前端人员皆可参与，极大的解放生产力
安装脚手架
npm install -g @tarojs/cli // 全局安装
查看版本信息：npm info @tarojs/cli // 本次演示版本@3.3.9
初始化：taro init [name]
开发环境
"dev:weapp": "npm run build:weapp -- --watch", // 微信
"dev:swan": "npm run build:swan -- --watch", // 百度系
"dev:alipay": "npm run build:alipay -- --watch", // 阿里系
"dev:tt": "npm run build:tt -- --watch", // 头条系
"dev:h5": "npm run build:h5 -- --watch", // H5
"dev:rn": "npm run build:rn -- --watch", // react-native
"dev:qq": "npm run build:qq -- --watch", // QQ
"dev:jd": "npm run build:jd -- --watch", // 京东系
"dev:quickapp": "npm run build:quickapp -- --watch" // 快应用
本地运行
本次环境主要以微信小程序演示
npm run dev:weapp // 启动本地环境
然后打开微信开发者工具，目录为project.config.json配置的miniprogramRoot的值，默认为根目录的dist/，
使用HTML标签
多年以来，Web端沉淀了大量优秀的组件库、优秀的前端工程师，使用HTML方式开发有以下优势：
可以让众多前端工程师0成本上手开发
大多组件库也可以支持，例如antD
原生H5代码也可以直接迁移
使用方法：
yarn add @tarojs/plugin-html
config = {
// ...
plugins: ['@tarojs/plugin-html']
}
百度系小程序
taro框架没有默认的百度小程序配置，需要手动添加，步骤如下：
百度小程序配置： project.swan.json
{
"libVersion": "2.10.9",
"setting": {
"urlCheck": false
}
}
飞书小程序
yarn add @tarojs/plugin-platform-lark
plugins: [
[
'@tarojs/plugin-platform-lark',
{
pc:false
}
]
]
"build:lark": "taro build --type lark",
"dev:lark": "npm run build:lark -- --watch",
飞书小程序配置：project.lark.json
{
"miniprogramRoot": "./",
"projectname": "taro-lark",
"description": "taro-lark",
"appid": "touristappid",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}
钉钉小程序
yarn add @tarojs/plugin-platform-alipay-dd
plugins: [
[
'@tarojs/plugin-platform-alipay-dd'
]
]
"build:dd": "taro build --type dd",
"dev:dd": "npm run build:dd -- --watch",
环境判断
可以根据该参数显示相应的平台内容，示例：
import {useEnv}from "taro-hooks";
const env = useEnv();
const envObj = {
'WEAPP':'这是微信小程序',
'SWAN':'这是百度小程序',
'ALIPAY':'这是支付宝小程序',
'WEB':'这是H5页面',
}
{
envObj[env]
}
redux状态管理
taro项目里可以自由使用react相关的技术栈，比如使用redux解决复杂的数据管理问题。
使用方法如下：
安装依赖：npm I redux react-redux
根目录下新建reducers/index.js
import {combineReducers} from 'redux';
function count(state = 0, action) {
switch (action.type) {
case 'GET_COUNT':
return action.data;
default:
return state;
}
}
export default combineReducers({
count
});
在入口文件加入配置：
import {Provider}from 'react-redux';
import {createStore}from 'redux';
import reducersfrom './reducers';
const store =createStore(reducers);
render() {
return (
{this.props.children}
)
}
容器组件内使用
import {useSelector, useDispatch}from 'react-redux';
const count =useSelector(state => state.count);
const dispatch =useDispatch();
dispatch({
'type':'GET_COUNT',
'data': count +1
});
自动化
同时支持多个平台，全部挨个手动打包费时费力，因此可以使用shell脚本实现多平台自动化打包。
以微信、H5、百度、头条、阿里为例：
#!/usr/bin/env bash
count=0
my_arr=(weapp h5 swan tt alipay)
fn() {
name=${my_arr[$1]}
if [ -d"$name" ];then
rm -rf"$name"
fi
echo "开始打包${name}"
npm run build:"$name"
mv dist"$name"
tar -zcf"$name".tar.gz"$name"
rm -rf"$name"
echo "${name}打包结束"
val=$((${#my_arr[@]} -1))
if [ $1 -lt $val ];then
val2=$(($1 +1))
fn $val2
fi
}
fn $count