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
