Taro 兼容 h5 踩坑指南
最近一周在改造 公羊阅读🐏 Taro 版本适配 h5 端，过程中改改补补，好不酸爽。
本文记录📝遇到的问题，希望为有相同需求的哥们👬节约点时间。
Taro 版本：1.3.9。
client_mobile_taro github地址
解决跨域问题
h5 发请求会报跨域问题，需要使用代理转换请求。
编辑根目录下的 config/index.js 文件
h5: {
devServer: {
host: 'localhost',
port: 10086,
proxy: {
'/api/v1': {
target: 'http://localhost:8000', // 服务端地址
changeOrigin: true
}
}
},
}
- 代理前的请求：
http://localhost:10086/api/v1/user - 代理后的请求：
http://localhost:8000/api/v1/user
样式单位
小程序里规定 1px = 2rpx，Taro 对于像素（px）有一套自己的规则。
在 Taro 里可以写 rpx 作为单位。
- Taro 代码转小程序代码：无缝转换为小程序单位；
- Taro 代码转 h5 代码：无法转换。
// taro
height: 10rpx;
// weapp
height: 10rpx;
// h5
// 无法转换单位
在 Taro 里写 px 作为单位。
- Taro 代码转小程序代码：1px = 1rpx，这一点和小程序文档里介绍的规则不一样；
- Taro 代码转 h5 代码：会自动将 px 转换为 rem 单位。
// taro
height: 10px;
// weapp
height: 10rpx;
// h5
height: 0.625rem;
在 Taro 里写 PX (大写字母)作为单位。
- Taro 代码转小程序代码：1PX = 2rpx；
- Taro 代码转 h5 代码：1PX = 1px。
// taro
height: 10PX;
// weapp
hegiht: 20rpx;
// h5
height: 10px;
实际开发中。如果你是将小程序端代码用 Taro 重写一遍，直接将小程序里面的样式文件复制到 Taro 里，并且将所有的 rpx 替换成 px，即可同时适应小程序端和 h5 端。
样式冲突
h5 页面源代码如下：
Taro h5 端源码
可以看到，一个 class="taro_pages" 就是一个页面，所有页面都写在✍️同一个 html 页面内，通过 display: "none" 隐藏暂时不需要的页面。
so，不同页面的样式名（class）如果一样，页面之间会互相影响。
官方提供 CSS Module 的写法来避免样式名称重复的问题，不过个人感觉这样写起来很难看。
实际开发中，我会将每个样式都加上该页面的英文单词作为前缀。比如页面书架（shelf）页面，样式名称原本为 class="novel-list"，拼接之后就变成 class="shelf_novel-list"。
窗口高度
- 小程序端有头部导航条和底部导航条，下左图；
- h5 端默认是没有头部导航条的，下右图。
h5端默认没有头部导航条
二者实际存储内容的高度不同，会导致部分页面变形，可以使用下面👇的方法获取窗体高度自行修改 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`
}
不同端加载不同组件
使用场景：
- 小程序端点击按钮会显示用户昵称和头像；
- H5 里没有这个 API，二者应当生成不同的页面。
方法一：不同端写不同的组件。下方代码示例，在 index.js 中引入组件，Taro 会自动根据不同环境获取不同的组件。
|-- shelf
|-- components
|-- header.weapp.js
|-- header.h5.js
|-- index.js
// index.js
import header from './components/header'
方法二：根据 process.env.TARO_ENV 环境变量，渲染不同子组件。
// index.js
// ....
if (process.env.TARO_ENV === 'weapp') {
// 微信小程序端执行逻辑
} else if (process.env.TARO_ENV === 'h5') {
// h5 端执行逻辑
} else if (process.env.TARO_ENV === 'rn') {
// react-native 端执行逻辑
}
上面两种方法乍看起来，大多数人都会选择第一种，会觉得第二种方法很复杂。
dk 在实际开发中发现：
- 第一种反而更麻烦，组件并不仅仅只是渲染页面，还要处理按钮点击事件，父子组件的状态值传递等等，并没有想象中简单；
- 第二种看起来好像要对每种环境都做单独判断，实际开发中 h5 端和 rn 端的逻辑几乎是一样的，也就是只要判断两种情况：weapp 端和非 weapp 端即可。
封装不同的请求方法
使用场景：
- 微信小程序端登录需要使用 code 去拿 openId，进而获取 token 和 userId，小程序端的登录操作是隐式的；
- h5 端和 rn 端需要提供登录、注册等功能，用户需要显式登录之后，才能进行之后的操作。
请求库封装必不可少，开发者不希望每次请求都手动获取 token，亦或是手动添加请求头类型，像这种公共操作可以封装一个请求库。
参考代码：request.js
POST 请求无法携带参数
- 小程序端非 GET 请求默认会把参数当做 json 传递；
- h5 端 官方文档 上写着默认也是 json 传递，实测并不是。
在浏览器 Network 中发现请求体的 Content-Type 为 text/plain，参数被当做字符串传递了。
解决方法：手动设置请求头类型。
header: {
'content-type': 'application/json'
}
componentDidShow() 不生效
实际开发中，在笔记本电脑上用浏览器模拟移动端时 componentDidShow() 都是生效的，代码部署到线上，在手机上访问网站，发现 componentDidShow() 不生效。我测试了百度浏览器和谷歌浏览器，都不生效。
暂时还没找到替代的方案，如果你有 componentDidShow() 在 h5 端的替代方案，希望可以留言告知我(email: <span>me@dkvirus.com</span>)
补充：taro 升级到 1.3.14 后 componentDidShow() 生效了。
onPullDownRefresh() 不生效
在 pc 端浏览器以及真机上测试下拉刷新都不生效，并且下拉之后，页面没有回去（头部空白部分）。
onPullDownRefresh() 不生效
