專案介紹 --------- [Taro_Mall](https://github.com/jiechud/taro-mall)是一款多端開源線上商城應用程式，後臺是基於litemall基礎上進行開發，前端採用Taro框架編寫，現已全部完成小程式和h5移動端，後續會對APP，淘寶，頭條，百度小程式進行適配。Taro_Mall已經完成了 litemall 前端的所有功能 掃碼體驗 ------------ > 由於小程式沒有認證，只發布了一個預覽版，只能加15個人，如有需要，請點選小程式申請 小程式 h5移動端 專案架構 ------------ 專案用Taro做跨端開發框架，Taro基本採用React的寫法，專案集成了 redux dva 控制單向資料流，用immer來提供不可變資料，提升整體的效能，減少渲染。 初始化專案 ``` taro init Taro_Mall ``` 進入專案目錄開始開發，可以選擇小程式預覽模式，或者 h5 預覽模式，若使用微信小程式預覽模式，則需要自行下載並開啟微信開發者工具，選擇預覽專案根目錄。 微信小程式編譯和釋出 ``` yarn dev:weapp // 編譯預覽 yarn build:weapp // 構建釋出 ``` h5編譯和釋出 ``` yarn dev:h5 // 編譯預覽 yarn build:h5 // 構建釋出 ``` 其它端可以檢視package.json 提供的命令 到這裡，我們已經把專案初始化完畢，接下來我們引入 dva-core 和 immer，引入dva-core包就可以，不需要引入dva包，dva 包是對 dva-core 和路由，請求庫等做了一層封裝 ``` yarn add dva-core dva-imme --save ``` 在src 目錄下新建 dva.js 檔案，檔案內容如下, 在建立App的時候，我們把dva-immer外掛引入其中。 ``` import {create} from 'dva-core'; import {createLogger} from 'redux-logger'; // import createLoading from 'dva-loading'; import immer from 'dva-immer'; let app; let store = {}; let dispatch; function createApp(opt) { // opt.onAction = [createLogger()]; // 這裡可以引入 redux-logger app = create(opt); // app.use(createLoading({})); app.use(immer()); // 引入 immer 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; if (window) { window.g_app = app; } return app; } export default { createApp, getDispatch() { return app.dispatch; }, dispatch: store.dispatch } ``` 接下來在入口檔案當中引入我們的 dva 檔案 ``` import dva from './dva'; import models from './models'; const dvaApp = dva.createApp({ initialState: {}, models: models, onError(e, dispatch) { console.log('系統出錯了!'); // dispatch(action("sys/error", e)); }, }); const store = dvaApp.getStore(); ``` 我們發現dva建立的時候需要引入models，我們在src目錄建立models 來存放我們的 model 檔案，來管理狀態， 我們看下models 檔案下的入口檔案 ``` import home from './home'; ...... export default [ home,demo, goods, catalog, search // 匯入我們的模組 ] ``` 我們可以寫一個簡單的model，例如: demo.js ``` import delay from '../utils/delay'; export default { namespace: 'demo', state: { list: [], counter: { num: 0, } }, reducers: { add: (state, {payload}) => { state.counter.num ++; }, dec: (state, {payload}) => { state.counter.num --; } }, effects: { *asyncAdd(_, {all, call, put}) { yield call(delay, 2000);//增加延遲測試效果 yield put({type: 'add'}); }, } }; ``` 接下來，我們要在taro redux的中的Provider傳入 store ```

``` 接下來對請求庫做下簡單的封裝，這裡主要封裝了對錯誤訊息和統一處理，和提供了get，post方法，如需其它方法，可自行封裝 ``` import Taro from '@tarojs/taro'; import {showErrorToast} from '../utils/util'; /** * 封封微信的的request */ function request(url, data = {}, method = "GET") { return new Promise(function(resolve, reject) { Taro.request({ url: url, data: data, method: method, header: { 'Content-Type': 'application/json', 'X-Litemall-Token': Taro.getStorageSync('token') }, success: function(res) { if (res.statusCode == 200) { if (res.data.errno == 501) { // 清除登入相關內容 try { Taro.removeStorageSync('userInfo'); Taro.removeStorageSync('token'); } catch (e) { // Do something when catch error } // 切換到登入頁面 Taro.navigateTo({ url: '/pages/auth/login/login' }); } else if(res.data.errno == 0) { resolve(res.data.data); } else { // Taro.showModal({ // title: '錯誤資訊', // content: res.data.errmsg, // showCancel: false // }); showErrorToast(res.data.errmsg); reject(res.data.errmsg); } } else { reject(res.errMsg); } }, fail: function(err) { reject(err) } }) }); } request.get = (url, data) => { return request(url, data, 'GET'); } request.post = (url, data) => { return request(url, data, 'POST'); } export default request; ``` 現在我們基本就可以用我們熟悉的套路去做開發了 結束語 --------- Taro 遵循 React 語法規範的 多端開發 解決方案。當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套程式碼的成本顯然非常高，這時候只編寫一套程式碼就能夠適配到多端的能力就顯得極為需要。 github : [Taro_Mall]( https://github.com/jiechud/taro-mall) 如果對大家有幫助，請 star