基于taro+dva构建小程序开发环境
小程序开发
浏览：918 次
芋头简介
Taro是一个遵循React语法规范的多终端统一开发解决方案。
官方网站：
如今，有各种形式的高端市场。Web、React Native、微信小程序等终端很受欢迎。当业务需求同时在不同端表达时，为不同端编写多组代码的成本显然非常高。此时，只编写一组代码以适应多个目的的能力是非常必要的。
有了Taro，我们只能编写一组代码，然后通过Taro的编译工具单独编译源代码，该工具可以在不同端运行（微信/百度/支付宝/字节跳动/QQ/JD小程序、快的app、H5、React Native等）。
DvaJS简介
DvaJS首先是基于redux和redux传奇的数据流方案。为了简化开发体验，dva还内置了react router和fetch，因此也可以理解为轻量级app框架。
构建小程序开发环境
1、 安装Taro
Taro项目基于节点。请确保您有更新的节点环境（>=8.0.0）。
首先，您需要使用npm或yarn在全局安装@tarojs/cli
#使用npm安装CLI
npm安装-g@tarojs/cli
#OR使用yarn安装CLI
yarn全局添加@tarojs/cli
#OR安装cnpm，并使用cnpm安装CLI
cnpm安装-g@tarojs/cli
#安装taro时可能遇到的问题
-当查看带有taro的版本号——Windows平台安装后的版本时，发现有旧版本的taro
1.在系统C:Users｛Users｝AppData Roaming npm node_Modules中查找节点全局模块目录删除tarojs目录
2.Npm缓存清理-f清除缓存
3.使用安装命令重新安装
#初始化项目
Taro init项目名称
2、 安装redux
cnpm安装--保存redux@tarojs/redux@tarojs/redux-h5 redux-thunk redux记录器
3、 安装dva
cnpm安装--保存dva核心dva加载
#安装dva时遇到的问题
-peerDependencies WARNING dva loading@需要一个dva核心的对等方@^1.1.0|^1.5.0-0|^1.6.0-0但是dva-core@2.0.2已安装*
原因是包json中某些依赖包的版本和节点js版本兼容性问题的解决方案是在错误消息中提到的依赖包前面添加^，然后安装cnpm
这里，json中的包｛“dva-core”：“^2.0.2”｝被修改为｛“dva-core”：““^1.6.0-0”｝，然后执行cnpm安装
4、 配置dva
从“dva-core”导入｛create｝；
从“redux logger”导入｛createLogger｝；
从“dva加载”导入createLoading；
letapp
出租仓库
出租调度
出租登记的
函数createApp（opt）{
//重做日志
选择onAction=[创建日志（）]
app=创建（选择）
app.use（createLoading（｛｝））
如果（！registered）opt.models。forEach（模型=>app.model（模型））
registered=真
app.start（）
商店=app百货商店
app。getStore=（）=>存储
app使用({
onError（错误）{
console.log（错误）
},
})
dispatch=存储.dispatch
app。dispatch=调度
返回app
}
导出默认值{
创建app，
获取调度（）{
返回app.dispatch
}
}
5、 配置app模型：/src/models/register Ts，所有页面模型都需要在此处注册
从“./order”导入订单
从“./product”导入产品
从“./user”导入用户
导出默认值[
顺序
产品
使用者
]
6、 在/src/app tsx条目文件引入了dva，componentDidMount（）函数中的配置仅供参考
从“@tarojs/Taro”导入Taro，｛Component，Config｝
从“./pages/Index/Index”导入索引
导入“@tarojs/async await”；
从“@tarojs/redux”导入｛Provider｝；
从“./utils/dva”导入dva
从“../../register”导入模型；
从“../config/appsettings”导入｛globalData｝；
导入“./app.less”
//如果需要在h5环境中启用React Devtools
//取消对以下内容的注释：
//如果（process.env.NODE_env！==“生产”&&process.ev.TARO_env==“h5”）{
//require（“服务开发工具”）
// }
const dvaApp=dva.createApp({
initialState:｛｝，
模型：模型，
});
常量存储=dvaApp。获取存储（）；//GetStore是一个函数！！！执行！！！
类app扩展组件{
配置：配置={
页码：[
'页面/索引/索引'
],
窗口：{
背景T
