Taro + Dva 开发小程序（前奏篇）

一、什么是Taro？

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

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

3、Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。

二、创建 Taro 项目

1、taro init my-taro my-taro是项目名称。
2、输入项目介绍：随便写即可，他会提现在package.json的description属性。
3、选择是否使用TypeScript个人觉得根据喜好和项目来定。
4、选择css预处理器，根据个人喜好，我选择的是less。
5、选择模板，我选择的是默认。
6、自动执行，等待创建成功指令。

创建taro项目

创建成功

三、引入Dva

1、安装配置文件

安装dva

npm install --save dva-core dva-loading

dva-core：封装了redux 和 redux-saga的一个插件
dva-loading：管理页面的loading状态

安装@tarojs/redux

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

2、配置项目文件夹

在/src目录下根据自己的实际需求进行一下配置：
assets: 存放静态资源
components:存放共用组件
models: 项目dva插件model函数的引用
utils: 项目里封装的一些插件,或者公用方法之类

四、Dva配置

在./src/utils下创建dva.js，配置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
  }
}

配置文件生成脚本（可以跳过也能使项目起飞）

1、在根目录下创建`scripts`文件夹，添加`./scripts/template.js`

2、在根目录的`package.json`的`scripts`里加上对应的命令

3、执行

五、让dva跑起来

1、先在`src`目录下创建`models`文件夹，集合项目里的`model`关系。

import index from './index';// 生成的models文件
export default [
   index
];

2、修改文件 `app.jsx`（非常非常重要）

import Taro, {Component} from '@tarojs/taro'
import Index from './pages/index'
import './app.less'

/* 因为dva配置 */
import {Provider} from "@tarojs/redux"
import dva from './utils/dva'
import models from './models/index'

// 如果需要在 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()

class App extends Component {

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

  componentDidMount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  componentDidCatchError() {
  }

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

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

关于 dva的使用参考dva官网。

六、启动项目（起飞）

这里启动的是h5，其他启动参考Taro官网。

npm run dev:h5

七、关于路由

在Taro 中，路由功能是默认自带的，不需要开发者进行额外的路由配置。
我们只需要在入口文件的config 配置中指定好pages，然后就可以在代码中通过 Taro 提供的 API 来跳转到目的页面

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name'
})
// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})
我们可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

这样的话，在跳转成功的目标页的生命周期方法里就能通过 this.$router.params 获取到传入的参数，例如上述跳转，在目标页的 componentWillMount 生命周期里获取入参

class C extends Taro.Component {
  componentWillMount () {
    console.log(this.$router.params) // 输出 { id: 2, type: 'test' }
  }
}

八、结语

只是本人启动项目的步骤记录。