文档章节

Taro 兼容 h5 踩坑指南

dkvirus
 dkvirus
发布于 08/19 19:09
字数 1459
阅读 30
收藏 0

最近一周在改造 公羊阅读🐏 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 页面源代码如下:

可以看到,一个 class="taro_pages" 就是一个页面,所有页面都写在✍️同一个 html 页面内,通过 display: "none" 隐藏暂时不需要的页面。

so,不同页面的样式名(class)如果一样,页面之间会互相影响。

官方提供 CSS Module 的写法来避免样式名称重复的问题,不过个人感觉这样写起来很难看。

实际开发中,我会将每个样式都加上该页面的英文单词作为前缀。比如页面书架(shelf)页面,样式名称原本为 class="novel-list",拼接之后就变成 class="shelf_novel-list"

窗口高度

  • 小程序端有头部导航条和底部导航条,下左图;
  • 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>)

onPullDownRefresh() 不生效

在 pc 端浏览器以及真机上测试下拉刷新都不生效,并且下拉之后,页面没有回去(头部空白部分)。

© 著作权归作者所有

dkvirus
粉丝 51
博文 125
码字总数 122513
作品 0
六安
程序员
私信 提问
Taro踩坑记之React-Native样式篇

样式管理 样式是实现多端编译的核心挑战,因为 RN 端的样式只是实现了 CSS 的一个子集,具体可参考 React-Native 样式指南 首先因为我是RN开发者,其次RN样式兼容度是最低的,所以我从RN环境...

LaxusJ
07/28
0
0
Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

前言 笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序、2 个支付宝小程序。 之所以选用 Taro,解决微信小程...

jsNewbee
02/19
0
0
使用 Taro 开发微信小程序的实践 + 踩坑合集

我和这篇文章 我是一名前端爱好者,现在是大三学生。大二开始接触小程序开发,目前自己唯一还在弄的项目是校内面向学生的一款课程评测小程序 uCourse。 使用过微信小程序原生语言开发过小程序...

松鼠桂鱼
03/11
0
0
Taro踩坑记之React-Native环境教程

当前环境 Taro CLI 1.3.10 environment info: System: OS: macOS 10.14.5 Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn n......

LaxusJ
07/27
0
0
小程序第三方框架对比 ( wepy / mpvue / taro )

众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端...

李初五
01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部