Taro + rematch + 雲開發實踐(一)-初始化項目

時間 2019-12-05

標籤 taro rematch 開發實踐初始化項目简体版

原文原文鏈接

引言

最近想嘗試小程序雲開發又不想爲此單獨去學習原生小程序，遂作了一波功課，具體可查看凹凸實驗室的文章小程序多端框架全面測評因本人使用的是React，因此選擇了react寫法的Tarocss

本文將教你如何搭建項目 github.com/zhixiaoqian…html

我的認爲最佳實踐主要知識點以下：

Tarojava
Taro UInode
Rematch(redux最佳實踐)react
小程序雲開發(小程序官方文檔)git
tcb-router(雲開發雲函數輕量級類路由庫，解決單一雲函數單獨node_modules)github

初始化項目

安裝及使用模板請選擇redux模板改形成rematch比較方便npm

初始項目結構

├── dist                   編譯結果目錄
├── config                 配置目錄
|   ├── dev.js             開發時配置
|   ├── index.js           默認配置
|   └── prod.js            打包時配置
├── src                    源碼目錄
|   ├── actions            redux裏的actions
|   ├── asset              圖片等靜態資源
|   ├── components         組件文件目錄
|   ├── constants          存放常量的地方，例如api、一些配置項
|   ├── reducers           redux裏的reducers
|   ├── store              redux裏的store
|   ├── utils              存放工具類函數
|   ├── pages              頁面文件目錄
|   |   ├── index          index頁面目錄
|   |   |   ├── index.js   index頁面邏輯
|   |   |   └── index.css  index頁面樣式
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口文件
├── package.json
└── project.config.json    項目配置文件
複製代碼

修改項目

配置 Taro UI (連接包含項目搭建流程)json

安裝 Taro UI

npm install taro-ui
# OR 使用 yarn 安裝
yarn add taro-ui
複製代碼

引入全部樣式

// app.js
import 'taro-ui/dist/style/index.scss' // 引入組件樣式 - 方式一
複製代碼

按照文檔使用組件便可

將原有redux替換爲rematchredux

刪除src下 actions & constants & reducers 文件
安裝 rematch 及相關插件

npm install @rematch/core @rematch/loading @rematch/immer @rematch/updated
# OR 使用 yarn 安裝
yarn add @rematch/core @rematch/loading @rematch/immer @rematch/updated
複製代碼

修改app.js 以下

import configStore from './store'
// 修改成
import store from './store'

// 刪除這一行
const store = configStore()
複製代碼

修改store/index.js 以下

import thunkMiddleware from 'redux-thunk'
import { init } from '@rematch/core'
import immerPlugin from '@rematch/immer'
import updatedPlugin from '@rematch/updated'
import LoadingPlugin from '@rematch/loading'
import models from '@/models'

const middlewares = [
  thunkMiddleware
]

if (process.env.NODE_ENV === 'development') {
  middlewares.push(require('redux-logger').createLogger())
}

const store = init({
  models,
  middlewares,
  plugins: [
    LoadingPlugin(),
    immerPlugin(),
    updatedPlugin() // 在必定的時間段內防止昂貴（頻繁）的獲取請求
  ]
})

export default store
複製代碼

src下添加models文件夾

// 添加global.js, 相關寫法請看官方文檔
export default {
  state: {},
  reducers: {
    // 方法名需已dispatch開頭
    dispatchSetGlobalInfo(state, payload) {
      return { ...state, ...payload }
    },
  },
  effects: {
  }
}

// 添加index.js
import global from './global'

export default {
  global,
}

複製代碼

配置alias

// config/index.js
const path = require('path')

alias: {
  '@': path.resolve(__dirname, '..', 'src'),
  '@/components': path.resolve(__dirname, '..', 'src/components'),
  '@/pages': path.resolve(__dirname, '..', 'src/pages'),
  '@/models': path.resolve(__dirname, '..', 'src/models'),
  '@/store': path.resolve(__dirname, '..', 'src/store'),
  '@/utils': path.resolve(__dirname, '..', 'src/utils')
},
複製代碼

組件中使用store

@connect(({ global }) => ({
  global
}), ({ global }) => ({
  ...global
}))
複製代碼

配置雲開發雲開發官方文檔

src下添加 cloud 文件夾
修改配置將cloud拷貝到dist

// config/index.js
copy: {
    patterns: [
      { from: 'src/cloud', to: 'dist/cloud/' }, // 將雲函數文件拷貝到dist
    ]
  },
複製代碼

build

yarn dev:weapp 這時候會生成dist文件 在微信開發者工具打開dist文件便可

如今項目結構

├── dist                   編譯結果目錄
|   ├── cloud              雲函數目錄
├── config                 配置目錄
|   ├── dev.js             開發時配置
|   ├── index.js           默認配置
|   └── prod.js            打包時配置
├── src                    源碼目錄
|   ├── cloud              雲函數目錄
|   ├── models             model文件目錄
|   ├── asset              圖片等靜態資源
|   ├── components         組件文件目錄
|   ├── store              redux裏的store
|   ├── utils              存放工具類函數
|   ├── pages              頁面文件目錄
|   |   ├── index          index頁面目錄
|   |   |   ├── index.js   index頁面邏輯
|   |   |   └── index.css  index頁面樣式
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口文件
├── package.json
└── project.config.json    項目配置文件
複製代碼