01 Taro_Mall 開源多端小程序框架設計

項目介紹

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

<Provider store={store}>
        <Index />
 </Provider>

接下來對請求庫作下簡單的封裝，這裏主要封裝了對錯誤消息和統一處理，和提供了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 若是對你們有幫助，請 star 一下