從0到1構(gòu)建適配不同端（微信小程序炼鞠、H5缘滥、React-Native 等）的taro + dva應(yīng)用
寫在前面
Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。現(xiàn)如今市面上端的形態(tài)多種多樣谒主，Web朝扼、React-Native、微信小程序等各種端大行其道霎肯，當(dāng)業(yè)務(wù)要求同時在不同的端都要求有所表現(xiàn)的時候擎颖，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要观游。
使用 Taro搂捧，我們可以只書寫一套代碼，再通過 Taro 的編譯工具懂缕，將源代碼分別編譯出可以在不同端（微信小程序允跑、H5、React-Native 等）運行的代碼。
技術(shù)棧
React + taro + dva
taro的安裝及使用
安裝 Taro 開發(fā)工具 @tarojs/cli
使用 npm 或者 yarn 全局安裝聋丝，或者直接使用npx
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
使用命令創(chuàng)建模板項目
$ taro init myApp
進入項目目錄開始開發(fā)索烹，可以選擇小程序預(yù)覽模式，或者 h5 預(yù)覽模式弱睦，若使用微信小程序預(yù)覽模式百姓，則需要自行下載并打開微信開發(fā)者工具，選擇預(yù)覽項目根目錄况木。
微信小程序編譯預(yù)覽模式
# npm script
$ npm run dev:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
# npx 用戶也可以使用
$ npx taro build --type weapp --watch
H5 編譯預(yù)覽模式
# npm script
$ npm run dev:h5
# 僅限全局安裝
$ taro build --type h5 --watch
# npx 用戶也可以使用
$ npx taro build --type h5 --watch
RN 編譯預(yù)覽模式
# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶也可以使用
$ npx taro build --type rn --watch
當(dāng)然到這一步有個大概的骨架垒拢，作為生產(chǎn)開發(fā)是不夠的，這時候我們引入dva
$ npm i dva-core dva-loading --save
新建dva.js
import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt) {
// redux日志
// opt.onAction = [createLogger()];
app = create(opt);
app.use(createLoading({}));
if (!global.registered) opt.models.forEach(model => app.model(model));
global.registered = true;
app.start();
store = app._store;
app.getStore = () => store;
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch;
}
}
并在入口文件導(dǎo)入
import dva from './utils/dva'
const dvaApp = dva.createApp({
initialState: {},
models: models,
});
const store = dvaApp.getStore();
dva集成好了火惊，下面我們來封裝下request網(wǎng)絡(luò)請求吧
import Taro from '@tarojs/taro';
import { baseUrl, noConsole } from '../config';
export default (options = { method: 'GET', data: {} }) => {
if (!noConsole) {
console.log(`${new Date().toLocaleString()}【 M=${options.url} 】P=${JSON.stringify(options.data)}`);
}
return Taro.request({
url: baseUrl + options.url,
data: options.data,
headers: {
'Content-Type': 'application/json',
},
method: options.method.toUpperCase(),
}).then((res) => {
const { statusCode, data } = res;
if (statusCode >= 200 && statusCode < 300) {
if (!noConsole) {
console.log(`${new Date().toLocaleString()}【 M=${options.url} 】【接口響應(yīng)：】`,res.data);
}
if (data.status !== 'ok') {
Taro.showToast({
title: `${res.data.error.message}~` || res.data.error.code,
icon: 'none',
mask: true,
});
}
return data;
} else {
throw new Error(`網(wǎng)絡(luò)請求錯誤求类，狀態(tài)碼${statusCode}`);
}
})
}
好了，是應(yīng)該準備pages頁面的開發(fā)了矗晃，本人比較喜歡umi的目錄結(jié)構(gòu)
pages // 頁面文件目錄
└── home
├── index.js // 頁面邏輯
├── index.scss // 頁面樣式
├── model.js // 頁面models
└── service.css // 頁面api
一個page要生成4個文件仑嗅？能否用腳本幫我們自動生成呢宴倍？那來寫一個吧
/**
* pages模版快速生成腳本,執(zhí)行命令 npm run tep `文件名`
*/
const fs = require('fs');
const dirName = process.argv[2];
if (!dirName) {
console.log('文件夾名稱不能為空张症！');
console.log('示例：npm run tep test');
process.exit(0);
}
// 頁面模版
const indexTep = `import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
@connect(({${dirName}}) => ({
...${dirName},
}))
export default class ${titleCase(dirName)} extends Component {
config = {
navigationBarTitleText: '${dirName}',
};
componentDidMount = () => {
};
render() {
return (
<View className="${dirName}-page">
${dirName}
</View>
)
}
}
`;
// scss文件模版
const scssTep = `@import "../../styles/mixin";
.${dirName}-page {
@include wh(100%, 100%);
}
`;
// model文件模版
const modelTep = `import * as ${dirName}Api from './service';
export default {
namespace: '${dirName}',
state: {
},
effects: {
* effectsDemo(_, { call, put }) {
const { status, data } = yield call(${dirName}Api.demo, {});
if (status === 'ok') {
yield put({ type: 'save',
payload: {
topData: data,
} });
}
},
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
`;
// service頁面模版
const serviceTep = `import Request from '../../utils/request';
export const demo = (data) => {
return Request({
url: '路徑',
method: 'POST',
data,
});
};
`;
fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
process.chdir(`./src/pages/${dirName}`); // cd $1
fs.writeFileSync('index.js', indexTep);
fs.writeFileSync('index.scss', scssTep);
fs.writeFileSync('model.js', modelTep);
fs.writeFileSync('service.js', serviceTep);
console.log(`模版${dirName}已創(chuàng)建,請手動增加models`);
function titleCase(str) {
const array = str.toLowerCase().split(' ');
for (let i = 0; i < array.length; i++) {
array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
}
const string = array.join(' ');
return string;
}
process.exit(0);
現(xiàn)在是時候進行愉快的開發(fā)了。鸵贬。俗他。
目錄結(jié)構(gòu)
├── .temp // H5編譯結(jié)果目錄
├── .rn_temp // RN編譯結(jié)果目錄
├── dist // 小程序編譯結(jié)果目錄
├── config // Taro配置目錄
│ ├── dev.js // 開發(fā)時配置
│ ├── index.js // 默認配置
│ └── prod.js // 打包時配置
├── screenshots // 項目截圖，和項目開發(fā)無關(guān)
├── src // 源碼目錄
│ ├── components // 組件
│ ├── config // 項目開發(fā)配置
│ ├── images // 圖片文件
│ ├── models // redux models
│ ├── pages // 頁面文件目錄
│ │ └── home
│ │ ├── index.js // 頁面邏輯
│ │ ├── index.scss // 頁面樣式
│ │ ├── model.js // 頁面models
│ │ └── service.css // 頁面api
│ ├── styles // 樣式文件
│ ├── utils // 常用工具類
│ ├── app.js // 入口文件
│ └── index.html
├── package.json
└── template.js // pages模版快速生成腳本,執(zhí)行命令 npm run tep `文件名`
寫在最后
git分支說明：
init：框架整體結(jié)構(gòu)阔逼，不涉及任何業(yè)務(wù)邏輯
master：項目的穩(wěn)定版本
feature：項目開發(fā)分支
后續(xù)我會加入一些業(yè)務(wù)代碼和小程序兆衅、H5的線上二維碼，方面大家學(xué)習(xí)和交流
