Taro 簡介

Taro 是一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)解決方案。

官方網(wǎng)站：https://taro.aotu.io

現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時在不同的端都要求有所表現(xiàn)的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動/QQ/京東小程序、快應(yīng)用、H5、React-Native 等）運(yùn)行的代碼。

DvaJS 簡介

DvaJS 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個輕量級的應(yīng)用框架。

搭建小程序開發(fā)環(huán)境

一、安裝 Taro

Taro 項(xiàng)目基于 node，請確保已具備較新的 node 環(huán)境（>=8.0.0）。

首先，需要使用 npm 或者 yarn 全局安裝 @tarojs/cli

# 使用 npm 安裝 CLI
npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
cnpm install -g @tarojs/cli

# 安裝 taro 時可能遇到的問題

- windows平臺安裝完成后使用 taro --version 查看版本號時，發(fā)現(xiàn)存在舊版本的 taro

1、在系統(tǒng)中找到 node 全局模塊目錄 C:\Users\{用戶}\AppData\Roaming\npm\node_modules\ 刪除掉 tarojs 目錄
2、npm cache clean -f 清理緩存
3、使用安裝命令重新安裝

# 初始化項(xiàng)目

taro init 項(xiàng)目名稱

二、安裝 redux

cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

三、安裝 dva

cnpm install --save dva-core dva-loading

#安裝 dva 遇到的問題

- peerDependencies WARNING dva-loading@ requires a peer of dva-core@^1.1.0 | ^1.5.0-0 | ^1.6.0-0 but dva-core@2.0.2 was installed*

原因是 package.json 里面的一些依賴包的版本與 node.js 版本兼容問題導(dǎo)致的解決方法是把錯誤信息里提及的依賴包前面添加^，再 cnpm install 一下就可以了
這里將 package.json 里面 { "dva-core": "^2.0.2" } 修改為 { "dva-core": "^1.6.0-0" } 然后執(zhí)行 cnpm install

四、配置 dva

import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app
let store
let dispatch
let registered

function createApp(opt) {
  // redux日志
  opt.onAction = [createLogger()]
  app = create(opt)
  app.use(createLoading({}))

  if (!registered) opt.models.forEach(model => app.model(model))
  registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  app.use({
    onError(err) {
      console.log(err)
    },
  })

  dispatch = store.dispatch

  app.dispatch = dispatch
  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

五、配置 app 的 models: /src/models/register.ts，所有頁面的 models 都需要在這里注冊一下

import order from './order'
import product from './product'
import user from './user'

export default [
    order,
    product,
    user
]

六、在 /src/app.tsx 入口文件中引入 dva , componentDidMount() 函數(shù)中的配置僅供參考

import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index/index'
import "@tarojs/async-await";
import { Provider } from "@tarojs/redux";
import dva from './utils/dva'
import models from '../../register';
import { globalData } from "../config/appsettings";
import './app.less'

// 如果需要在 h5 環(huán)境中開啟 React Devtools
// 取消以下注釋：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});
const store = dvaApp.getStore();   //  getStore是一個函數(shù)?。?！要執(zhí)行?。?！



class App extends Component {

  config: Config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  async componentDidMount () {
    // 從路由獲取額外參數(shù)
        const referrerInfo = this.$router.params.referrerInfo;
        // 從獲取獲取查詢參數(shù)
        const query = this.$router.params.query as {
            [key: string]: string;
        };
        !globalData.extraData && (globalData.extraData = {});
        // 將路由參數(shù)保存到全局變量
        if (referrerInfo && referrerInfo["extraData"]) {
            globalData.extraData = referrerInfo["extraData"];
        }
        // 查詢參數(shù)與額外參數(shù)合并保存到全局變量
        if (query) {
            globalData.extraData = {
                ...globalData.extraData,
                ...query
            };
        }
}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 類中的 render() 函數(shù)沒有實(shí)際作用
  // 請勿修改此函數(shù)
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>

    )
  }
}

Taro.render(<App />, document.getElementById('app'))

# 運(yùn)行 taro 微信小程序時可能遇到的問題

在升級到 2.x 后使用 async/await 語法時可能會出現(xiàn)如下報錯

- 使用 async/await 時出現(xiàn)報錯 Function(...) is not a function

這是因?yàn)?@tarojs/mini-runner 使用的 postcss-loader 依賴了新版本的 regenerator-runtime 包，可能會與 babel-runtime 中依賴的 regenerator-runtime 版本沖突，而新版本的包無法在小程序中使用，所以導(dǎo)致了如上錯誤，解決辦法是在本地自行安裝 0.11.1 版本的 regenerator-runtime 包。

npm i --save regenerator-runtime@0.11.1

- 在 JS 中引入的圖片突然變成 base64 格式

在升級到 2.x 后可能會遇到在 JS 中引入的圖片突然變成 base64 格式了，是因?yàn)?2.x 小程序改用 Webpack 編譯后圖片都會經(jīng)過 url-loader 進(jìn)行處理，默認(rèn) 10kb 大小以下的圖片（包含以下格式，png | jpg | jpeg | gif | bmp）都會被轉(zhuǎn)為 base64，如果不想這么做，可以通過配置 mini.imageUrlLoaderOption 來解決

const config = {
 mini: {
    imageUrlLoaderOption: {
      limit: 10240 // 大小限制，單位為 b
    }
  }
}

轉(zhuǎn)載請保留原文地址 ( https://www.ekpro.cn/article/1581427772000140 )