最近一周在改造 公羊閱讀?? Taro 版本適配 h5 端漾抬，過(guò)程中改改補(bǔ)補(bǔ)，好不酸爽碑诉。
本文記錄??遇到的問(wèn)題彪腔，希望為有相同需求的哥們??節(jié)約點(diǎn)時(shí)間。
Taro 版本：1.3.9进栽。
client_mobile_taro github地址
解決跨域問(wèn)題
h5 發(fā)請(qǐng)求會(huì)報(bào)跨域問(wèn)題德挣，需要使用代理轉(zhuǎn)換請(qǐng)求。
編輯根目錄下的 config/index.js 文件
h5: {
devServer: {
host: 'localhost',
port: 10086,
proxy: {
'/api/v1': {
target: 'http://localhost:8000', // 服務(wù)端地址
changeOrigin: true
}
}
},
}
- 代理前的請(qǐng)求：
http://localhost:10086/api/v1/user - 代理后的請(qǐng)求：
http://localhost:8000/api/v1/user
樣式單位
小程序里規(guī)定 1px = 2rpx快毛，Taro 對(duì)于像素（px）有一套自己的規(guī)則格嗅。
在 Taro 里可以寫(xiě) rpx 作為單位。
- Taro 代碼轉(zhuǎn)小程序代碼：無(wú)縫轉(zhuǎn)換為小程序單位唠帝；
- Taro 代碼轉(zhuǎn) h5 代碼：無(wú)法轉(zhuǎn)換屯掖。
// taro
height: 10rpx;
// weapp
height: 10rpx;
// h5
// 無(wú)法轉(zhuǎn)換單位
在 Taro 里寫(xiě) px 作為單位。
- Taro 代碼轉(zhuǎn)小程序代碼：1px = 1rpx襟衰，這一點(diǎn)和小程序文檔里介紹的規(guī)則不一樣贴铜；
- Taro 代碼轉(zhuǎn) h5 代碼：會(huì)自動(dòng)將 px 轉(zhuǎn)換為 rem 單位。
// taro
height: 10px;
// weapp
height: 10rpx;
// h5
height: 0.625rem;
在 Taro 里寫(xiě) PX (大寫(xiě)字母)作為單位右蒲。
- Taro 代碼轉(zhuǎn)小程序代碼：1PX = 2rpx阀湿；
- Taro 代碼轉(zhuǎn) h5 代碼：1PX = 1px。
// taro
height: 10PX;
// weapp
hegiht: 20rpx;
// h5
height: 10px;
實(shí)際開(kāi)發(fā)中瑰妄。如果你是將小程序端代碼用 Taro 重寫(xiě)一遍陷嘴，直接將小程序里面的樣式文件復(fù)制到 Taro 里，并且將所有的 rpx 替換成 px间坐，即可同時(shí)適應(yīng)小程序端和 h5 端灾挨。
樣式?jīng)_突
h5 頁(yè)面源代碼如下：
可以看到，一個(gè) class="taro_pages" 就是一個(gè)頁(yè)面竹宋，所有頁(yè)面都寫(xiě)在??同一個(gè) html 頁(yè)面內(nèi)劳澄，通過(guò) display: "none" 隱藏暫時(shí)不需要的頁(yè)面。
so蜈七，不同頁(yè)面的樣式名（class）如果一樣秒拔，頁(yè)面之間會(huì)互相影響。
官方提供 CSS Module 的寫(xiě)法來(lái)避免樣式名稱(chēng)重復(fù)的問(wèn)題飒硅，不過(guò)個(gè)人感覺(jué)這樣寫(xiě)起來(lái)很難看砂缩。
實(shí)際開(kāi)發(fā)中，我會(huì)將每個(gè)樣式都加上該頁(yè)面的英文單詞作為前綴三娩。比如頁(yè)面書(shū)架（shelf）頁(yè)面庵芭，樣式名稱(chēng)原本為 class="novel-list"，拼接之后就變成 class="shelf_novel-list"雀监。
窗口高度
- 小程序端有頭部導(dǎo)航條和底部導(dǎo)航條双吆，下左圖；
- h5 端默認(rèn)是沒(méi)有頭部導(dǎo)航條的，下右圖好乐。
二者實(shí)際存儲(chǔ)內(nèi)容的高度不同匾竿，會(huì)導(dǎo)致部分頁(yè)面變形，可以使用下面??的方法獲取窗體高度自行修改 css 樣式高度曹宴。
// utils/common.js
import Taro from '@tarojs/taro'
export function getWindowHeight(showTabBar = true) {
const TAB_BAR_HEIGHT = 50
const NAVIGATOR_HEIGHT = 44
const info = Taro.getSystemInfoSync()
const { windowHeight, statusBarHeight } = info
const tabBarHeight = showTabBar ? TAB_BAR_HEIGHT : 0
if (process.env.TARO_ENV === 'rn') {
return windowHeight - statusBarHeight - NAVIGATOR_HEIGHT - tabBarHeight
}
if (process.env.TARO_ENV === 'h5') {
return `${windowHeight - tabBarHeight}px`
}
return `${windowHeight}px`
}
不同端加載不同組件
使用場(chǎng)景：
- 小程序端點(diǎn)擊按鈕會(huì)顯示用戶(hù)昵稱(chēng)和頭像搂橙；
- H5 里沒(méi)有這個(gè) API歉提，二者應(yīng)當(dāng)生成不同的頁(yè)面笛坦。
方法一：不同端寫(xiě)不同的組件。下方代碼示例苔巨，在 index.js 中引入組件版扩，Taro 會(huì)自動(dòng)根據(jù)不同環(huán)境獲取不同的組件。
|-- shelf
|-- components
|-- header.weapp.js
|-- header.h5.js
|-- index.js
// index.js
import header from './components/header'
方法二：根據(jù) process.env.TARO_ENV 環(huán)境變量侄泽，渲染不同子組件礁芦。
// index.js
// ....
if (process.env.TARO_ENV === 'weapp') {
// 微信小程序端執(zhí)行邏輯
} else if (process.env.TARO_ENV === 'h5') {
// h5 端執(zhí)行邏輯
} else if (process.env.TARO_ENV === 'rn') {
// react-native 端執(zhí)行邏輯
}
上面兩種方法乍看起來(lái)，大多數(shù)人都會(huì)選擇第一種悼尾，會(huì)覺(jué)得第二種方法很復(fù)雜柿扣。
dk 在實(shí)際開(kāi)發(fā)中發(fā)現(xiàn)：
- 第一種反而更麻煩，組件并不僅僅只是渲染頁(yè)面闺魏，還要處理按鈕點(diǎn)擊事件未状，父子組件的狀態(tài)值傳遞等等，并沒(méi)有想象中簡(jiǎn)單析桥；
- 第二種看起來(lái)好像要對(duì)每種環(huán)境都做單獨(dú)判斷司草，實(shí)際開(kāi)發(fā)中 h5 端和 rn 端的邏輯幾乎是一樣的，也就是只要判斷兩種情況：weapp 端和非 weapp 端即可泡仗。
封裝不同的請(qǐng)求方法
使用場(chǎng)景：
- 微信小程序端登錄需要使用 code 去拿 openId埋虹，進(jìn)而獲取 token 和 userId，小程序端的登錄操作是隱式的娩怎；
- h5 端和 rn 端需要提供登錄搔课、注冊(cè)等功能，用戶(hù)需要顯式登錄之后截亦，才能進(jìn)行之后的操作爬泥。
請(qǐng)求庫(kù)封裝必不可少，開(kāi)發(fā)者不希望每次請(qǐng)求都手動(dòng)獲取 token魁巩，亦或是手動(dòng)添加請(qǐng)求頭類(lèi)型急灭，像這種公共操作可以封裝一個(gè)請(qǐng)求庫(kù)。
參考代碼：request.js
POST 請(qǐng)求無(wú)法攜帶參數(shù)
- 小程序端非 GET 請(qǐng)求默認(rèn)會(huì)把參數(shù)當(dāng)做 json 傳遞谷遂；
- h5 端 官方文檔 上寫(xiě)著默認(rèn)也是 json 傳遞葬馋，實(shí)測(cè)并不是。
在瀏覽器 Network 中發(fā)現(xiàn)請(qǐng)求體的 Content-Type 為 text/plain，參數(shù)被當(dāng)做字符串傳遞了畴嘶。
解決方法：手動(dòng)設(shè)置請(qǐng)求頭類(lèi)型蛋逾。
header: {
'content-type': 'application/json'
}
componentDidShow() 不生效
實(shí)際開(kāi)發(fā)中，在筆記本電腦上用瀏覽器模擬移動(dòng)端時(shí) componentDidShow() 都是生效的窗悯，代碼部署到線上区匣，在手機(jī)上訪問(wèn)網(wǎng)站，發(fā)現(xiàn) componentDidShow() 不生效蒋院。我測(cè)試了百度瀏覽器和谷歌瀏覽器亏钩，都不生效。
暫時(shí)還沒(méi)找到替代的方案欺旧，如果你有 componentDidShow() 在 h5 端的替代方案姑丑，希望可以留言告知我(email: <span>me@dkvirus.com</span>)
補(bǔ)充：taro 升級(jí)到 1.3.14 后 componentDidShow() 生效了。
onPullDownRefresh() 不生效
在 pc 端瀏覽器以及真機(jī)上測(cè)試下拉刷新都不生效辞友，并且下拉之后栅哀，頁(yè)面沒(méi)有回去（頭部空白部分）。
