Taro 簡介
Taro 是一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)解決方案。
官方網站：https://taro.aotu.io
現如今市面上端的形態(tài)多種多樣蝴悉，
Web、React-Native、微信小程序等各種端大行其道葫盼，當業(yè)務要求同時在不同的端都要求有所表現的時候蛋勺，針對不同的端去編寫多套代碼的成本顯然非常高瓦灶，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用
Taro抱完，我們可以只書寫一套代碼贼陶，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動/QQ/京東小程序、快應用碉怔、H5烘贴、React-Native 等）運行的代碼。
DvaJS 簡介
DvaJS首先是一個基于redux和redux-saga的數據流方案撮胧，然后為了簡化開發(fā)體驗桨踪，dva還額外內置了react-router和fetch，所以也可以理解為一個輕量級的應用框架芹啥。
搭建小程序開發(fā)環(huán)境
一锻离、安裝 Taro
Taro 項目基于 node，請確保已具備較新的 node 環(huán)境（>=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 查看版本號時傀履，發(fā)現存在舊版本的 taro
1虱朵、在系統(tǒng)中找到 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" }然后執(zhí)行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 環(huán)境中開啟 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是一個函數！Ｂ袅辍遭顶！要執(zhí)行！＠崮琛棒旗！
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 )
