Taro+dva环境搭建
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
