1、Taro环境搭建

参考https://nervjs.github.io/taro/docs/GETTING-STARTED.html

其中使用的工具应该保持一致，推荐使用npm，如果一致出奇怪的错误，可以尝试将

本地的/usr/local/lib/node_modules/和项目目录下的node_modules里面文件全部删除再执行

2、Dva环境搭建

Dva是redux的进阶版本，主要负责将页面和model分离，保证model的一致性

1）、安装redux：

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

2）、安装dva

cnpm install --save dva-core dva-loading

3、在项目中配置Dva

1）、在src/utils/ 新建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

    }

}

2）、在src/model下新建model控制文件

如：index.tsx,将具体业务的model引入

import videoList from '../pages/video/model';

export default [videoList];

3）、在app.tsx中

引入

import dva from './utils/dva';

获取配置

const dvaApp = dva.createApp({

  initialState: {},

  models: models,

});

const store = dvaApp.getStore();

注册全局

render() {

    return (

      <Provider store={store}>

        <Index />

      </Provider>

    )

  }

至此dva配置完成。

4、项目中使用dva

1）、新建页面的model 并实现相关的同步、异步方法，如：

import Taro from '@tarojs/taro';

import * as login from './service';

export default {

  namespace: 'login',

  state: {

    mobile: '',

    code: '',

    invitation_code: '',

    invitation_code_from: '',

    access_token: '',

    nickname: '',

    new_user: '',

    is_has_buy_card: '', // 用户是否买过卡

    smsText: '发送验证码',

    sending: 0,

    smsTime: 30,

    erroMessage: '',

    type: 4, // 1微信 2QQ 3新浪 4.微信公众号 5.支付宝生活号 6.京东 7.返利

  },

  effects: {

    *login(_, { call, put, select }) {

      const { code, mobile } = yield select(state => state.login);

      const res = yield call(login.login, { code, mobile });

      if (res.status == 'ok') {

        const userInfo = {

          access_token: res.data.access_token,

          invitation_code: res.data.invitation_code,

          mobile: res.data.mobile,

          nickname: res.data.nickname,

          new_user: res.data.new_user,

          is_has_buy_card: res.data.is_has_buy_card,

          erroMessage: '',

        };

        Taro.setStorageSync('user_info', userInfo);

        Taro.setStorageSync('access_token', res.data.access_token);

        yield put({

          type: 'common/save',

          payload: {

            access_token: res.data.access_token,

            invitation_code: res.data.invitation_code,

            mobile: res.data.mobile,

            nickname: res.data.nickname,

            new_user: res.data.new_user,

            is_has_buy_card: res.data.is_has_buy_card,

            erroMessage: '',

            code: '',

          },

        });

        yield put({

          type: 'save',

          payload: {

            access_token: res.data.access_token,

            invitation_code: res.data.invitation_code,

            mobile: res.data.mobile,

            nickname: res.data.nickname,

            new_user: res.data.new_user,

            is_has_buy_card: res.data.is_has_buy_card,

            erroMessage: '',

            code: '',

          },

        });

        Taro.showToast({

          title: '登录成功，欢迎回来～～～',

          icon: 'none',

        });

        setTimeout(() => {

          Taro.navigateBack();

        }, 1000);

      }

    },

    *sendSms(_, { call, put, select }) {

      const { mobile } = yield select(state => state.login);

      const res = yield call(login.getSms, { mobile });

      if (res.status == 'ok') {

        yield put({ type: 'save', payload: { sending: 1, erroMessage: '' } });

      } else {

        yield put({

          type: 'save',

          payload: { sending: 2, erroMessage: res.error && res.error.message },

        });

      }

    },

    *sendSmsVoice(_, { call, put, select }) {

      const { mobile } = yield select(state => state.login);

      const res = yield call(login.getSmsVoice, { mobile });

      if (res.status == 'ok') {

        yield put({ type: 'save', payload: { sending: 1, erroMessage: '' } });

      } else {

        yield put({

          type: 'save',

          payload: { sending: 2, erroMessage: res.error && res.error.message },

        });

      }

    },

  },

  reducers: {

    save(state, { payload: data }) {

      return { ...state, ...data };

    },

  },

};

其中effects中的方法是异步的，reducers的方法同步的

yield select、yield call、 yield put是关键字，分别代表

（1）、 表示从某个namesapce中拿出指定字段，如从namesapce为login中拿出 code和 mobile

（2）、 yield call 表示异步调用某个接口

（3）、 yield put 表示发出同步的action,reducers的方法会自动响应

2）、将model通过src/model下的index文件export

3）、在界面文件中绑定model和view

单个绑定

@connect(({ login }) => ({

  ...login,

}))

多个绑定

@connect(({ user, common }) => ({

  ...user,

  ...common,

}))

4）、在page中调用相关的方法

this.props.dispatch({

      type: 'login/login',

      payload: {

        code: this.props.code,

        mobile: this.props.mobile,

      },

    });

5、编译运行

目前微信小程序还只支持在微信开发平台上预览，如果使用vscode进行开发的话，执行完

npm run dev:tt

然后会在当前项目目录下生成一个dist文件夹，然后将整个项目导入到微信开发平台的工具就可以预览了，在vscode中编辑保存后，如果代码没有出错，小程序那边也会自动更新

目前出现过的错误

Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 13.x

解决方案：

npm rebuild node-sass

5、其他

1）、vscode 关于向程序的插件

https://juejin.im/post/5dce6c5de51d453af62c30ef