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";2)、在src/model下新建model控制文件
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
}
}
如:index.tsx,将具体业务的model引入
import videoList from '../pages/video/model';3)、在app.tsx中
export default [videoList];
引入
import dva from './utils/dva';获取配置
const dvaApp = dva.createApp({注册全局
initialState: {},
models: models,
});
const store = dvaApp.getStore();
render() {
return (
)
}
至此dva配置完成。
4、项目中使用dva
1)、新建页面的model 并实现相关的同步、异步方法,如:
import Taro from '@tarojs/taro';其中effects中的方法是异步的,reducers的方法同步的
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',
【Taro+dva环境搭建】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 };
},
},
};
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 }) => ({4)、在page中调用相关的方法
...user,
...common,
}))
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
推荐阅读
- 人生感悟记#环境仪器宋庆国成长记#072
- 六步搭建ES6语法环境
- iOS,打Framework静态库
- (1)redis集群原理及搭建与使用(1)
- 桁架搭建有什么价值()
- VM|VM ware 的 harbor 私有仓库搭建 (Ubuntu16.04)
- PHP开发-Mac搭建ThinkPHP5.0
- win10环境|win10环境 python3.6安装pycrypto-2.6.1的问题
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- sentry搭建错误监控系统(二)