基于taro + dva搭建小程序开发环境

Taro 简介

Taro 是一套遵循 React 语法规范的多端统一开发解决方案。

官方网站：https://taro.aotu.io

现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。

DvaJS 简介

DvaJS 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

搭建小程序开发环境

一、安装 Taro

Taro 项目基于 node，请确保已具备较新的 node 环境（>=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 查看版本号时，发现存在旧版本的 taro

1、在系统中找到 node 全局模块目录 C:\Users\{用户}\AppData\Roaming\npm\node_modules\ 删除掉 tarojs 目录
2、npm cache clean -f 清理缓存
3、使用安装命令重新安装

# 初始化项目

taro init 项目名称

二、安装 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 版本兼容问题导致的解决方法是把错误信息里提及的依赖包前面添加^，再 cnpm install 一下就可以了
这里将 package.json 里面 { "dva-core": "^2.0.2" } 修改为 { "dva-core": "^1.6.0-0" } 然后执行 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() 函数中的配置仅供参考

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 环境中开启 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是一个函数！！！要执行！！！



class App extends Component {

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

  async componentDidMount () {
    // 从路由获取额外参数
        const referrerInfo = this.$router.params.referrerInfo;
        // 从获取获取查询参数
        const query = this.$router.params.query as {
            [key: string]: string;
        };
        !globalData.extraData && (globalData.extraData = {});
        // 将路由参数保存到全局变量
        if (referrerInfo && referrerInfo["extraData"]) {
            globalData.extraData = referrerInfo["extraData"];
        }
        // 查询参数与额外参数合并保存到全局变量
        if (query) {
            globalData.extraData = {
                ...globalData.extraData,
                ...query
            };
        }
}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>

    )
  }
}

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

# 运行 taro 微信小程序时可能遇到的问题

在升级到 2.x 后使用 async/await 语法时可能会出现如下报错

- 使用 async/await 时出现报错 Function(...) is not a function

这是因为 @tarojs/mini-runner 使用的 postcss-loader 依赖了新版本的 regenerator-runtime 包，可能会与 babel-runtime 中依赖的 regenerator-runtime 版本冲突，而新版本的包无法在小程序中使用，所以导致了如上错误，解决办法是在本地自行安装 0.11.1 版本的 regenerator-runtime 包。

npm i --save regenerator-runtime@0.11.1

- 在 JS 中引入的图片突然变成 base64 格式

在升级到 2.x 后可能会遇到在 JS 中引入的图片突然变成 base64 格式了，是因为 2.x 小程序改用 Webpack 编译后图片都会经过 url-loader 进行处理，默认 10kb 大小以下的图片（包含以下格式，png | jpg | jpeg | gif | bmp）都会被转为 base64，如果不想这么做，可以通过配置 mini.imageUrlLoaderOption 来解决

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

转载请保留原文地址 ( https://www.ekpro.cn/article/1581427772000140 )