本次展示主要介紹如何實(shí)現(xiàn)一套代碼跨多端，使用傳統(tǒng)的前端方式開發(fā)小程序，解決各平臺(tái)個(gè)性化，狀態(tài)管理，以及自動(dòng)化打包多平臺(tái)流程。
關(guān)于Taro
Taro是有京東凹凸實(shí)驗(yàn)室打造的多端統(tǒng)一開發(fā)框架，目前支持react、vue等主流框架，寫一套代碼就可以多端運(yùn)行
支持ES6、ES7 8等新規(guī)范
支持npm、yarn安裝管理
支持Redux、MobX進(jìn)行狀態(tài)管理
支持Less、Scss預(yù)編譯
支持大部分前端庫(kù)、組件
遵循前端開發(fā)規(guī)范，前端人員皆可參與，極大的解放生產(chǎn)力
安裝腳手架
npm install -g @tarojs/cli ? //?全局安裝
查看版本信息：npm info @tarojs/cli? //?本次演示版本@3.3.9
初始化：taro init?[name]
開發(fā)環(huán)境
"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" // 快應(yīng)用
本地運(yùn)行
本次環(huán)境主要以微信小程序演示
npm run dev:weapp //?啟動(dòng)本地環(huán)境
然后打開微信開發(fā)者工具，目錄為project.config.json配置的miniprogramRoot的值，默認(rèn)為根目錄的dist/，
使用HTML標(biāo)簽
多年以來(lái)，Web端沉淀了大量?jī)?yōu)秀的組件庫(kù)、優(yōu)秀的前端工程師，使用HTML方式開發(fā)有以下優(yōu)勢(shì)：
可以讓眾多前端工程師0成本上手開發(fā)
大多組件庫(kù)也可以支持，例如antD
原生H5代碼也可以直接遷移
使用方法：
yarn add @tarojs/plugin-html
config = {
?// ...
? plugins: ['@tarojs/plugin-html']
}
百度系小程序
taro框架沒有默認(rèn)的百度小程序配置，需要手動(dòng)添加，步驟如下：
百度小程序配置： 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",
環(huán)境判斷
可以根據(jù)該參數(shù)顯示相應(yīng)的平臺(tái)內(nèi)容，示例：
import {useEnv}from "taro-hooks";
const env = useEnv();
const envObj = {
'WEAPP':'這是微信小程序',
? 'SWAN':'這是百度小程序',
? 'ALIPAY':'這是支付寶小程序',
? 'WEB':'這是H5頁(yè)面',
}
{
envObj[env]
}
redux狀態(tài)管理
taro項(xiàng)目里可以自由使用react相關(guān)的技術(shù)棧，比如使用redux解決復(fù)雜的數(shù)據(jù)管理問題。
使用方法如下：
安裝依賴：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}
)
}
容器組件內(nèi)使用
import {useSelector, useDispatch}from 'react-redux';
const count =useSelector(state => state.count);
const dispatch =useDispatch();
dispatch({
'type':'GET_COUNT',
? 'data': count +1
});
自動(dòng)化
同時(shí)支持多個(gè)平臺(tái)，全部挨個(gè)手動(dòng)打包費(fèi)時(shí)費(fèi)力，因此可以使用shell腳本實(shí)現(xiàn)多平臺(tái)自動(dòng)化打包。
以微信、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}打包結(jié)束"
? val=$((${#my_arr[@]} -1))
if [ $1 -lt $val ];then
? ? val2=$(($1 +1))
fn $val2
fi
}
fn $count
