Taro 简介
Taro 是一套遵循 React 语法规范的多端统一开发解决方案。
官方网站：https://taro.aotu.io
现如今市面上端的形态多种多样，
Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用
Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。
DvaJS 简介
DvaJS首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。
搭建小程序开发环境
一、安装 Taro
Taro 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0）。
首先，需要使用 npm 或者 yarn 全局安装 @tarojs/cli
# 使用 npm 安装 CLI
npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli
# 安装 taro 时可能遇到的问题
- windows平台安装完成后使用 taro --version 查看版本号时，发现存在旧版本的 taro
1、在系统中找到 node 全局模块目录
C:\Users\{用户}\AppData\Roaming\npm\node_modules\删除掉tarojs目录
2、npm cache clean -f清理缓存
3、使用安装命令重新安装
# 初始化项目
taro init 项目名称
二、安装 redux
cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
三、安装 dva
cnpm install --save dva-core dva-loading
#安装 dva 遇到的问题
- peerDependencies WARNING dva-loading@ requires a peer of dva-core@^1.1.0 | ^1.5.0-0 | ^1.6.0-0 but dva-core@2.0.2 was installed*
原因是
package.json里面的一些依赖包的版本与node.js版本兼容问题导致的解决方法是把错误信息里提及的依赖包前面添加^，再cnpm install一下就可以了
这里将package.json里面{ "dva-core": "^2.0.2" }修改为{ "dva-core": "^1.6.0-0" }然后执行cnpm install
四、配置 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
}
}
五、配置 app 的 models: /src/models/register.ts，所有页面的 models 都需要在这里注册一下
import order from './order'
import product from './product'
import user from './user'
export default [
order,
product,
user
]
六、在 /src/app.tsx 入口文件中引入 dva , componentDidMount() 函数中的配置仅供参考
import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index/index'
import "@tarojs/async-await";
import { Provider } from "@tarojs/redux";
import dva from './utils/dva'
import models from '../../register';
import { globalData } from "../config/appsettings";
import './app.less'
// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
// require('nerv-devtools')
// }
const dvaApp = dva.createApp({
initialState: {},
models: models,
});
const store = dvaApp.getStore(); // getStore是一个函数！！！要执行！！！
class App extends Component {
config: Config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
async componentDidMount () {
// 从路由获取额外参数
const referrerInfo = this.$router.params.referrerInfo;
// 从获取获取查询参数
const query = this.$router.params.query as {
[key: string]: string;
};
!globalData.extraData && (globalData.extraData = {});
// 将路由参数保存到全局变量
if (referrerInfo && referrerInfo["extraData"]) {
globalData.extraData = referrerInfo["extraData"];
}
// 查询参数与额外参数合并保存到全局变量
if (query) {
globalData.extraData = {
...globalData.extraData,
...query
};
}
}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
}
Taro.render(<App />, document.getElementById('app'))
# 运行 taro 微信小程序时可能遇到的问题
在升级到 2.x 后使用 async/await 语法时可能会出现如下报错
- 使用 async/await 时出现报错 Function(...) is not a function
这是因为
@tarojs/mini-runner使用的postcss-loader依赖了新版本的regenerator-runtime包，可能会与babel-runtime中依赖的regenerator-runtime版本冲突，而新版本的包无法在小程序中使用，所以导致了如上错误，解决办法是在本地自行安装 0.11.1 版本的regenerator-runtime包。
npm i --save regenerator-runtime@0.11.1
- 在 JS 中引入的图片突然变成 base64 格式
在升级到 2.x 后可能会遇到在 JS 中引入的图片突然变成
base64格式了，是因为 2.x 小程序改用Webpack编译后图片都会经过url-loader进行处理，默认 10kb 大小以下的图片（包含以下格式，png | jpg | jpeg | gif | bmp）都会被转为 base64，如果不想这么做，可以通过配置mini.imageUrlLoaderOption来解决
const config = {
mini: {
imageUrlLoaderOption: {
limit: 10240 // 大小限制，单位为 b
}
}
}
转载请保留原文地址 ( https://www.ekpro.cn/article/1581427772000140 )
网友评论