Taro多端开发实际

taro多端开发实践。
主要是（微信）小程序和h5的差异。

2021.11.23 星期二 11:03

多端差异

h5 和 小程序差异

\$_PS: 主要是对比了微信小程序

样式

单位

@tarojs/cli 可以设置px转换的基础值。
如果设计稿（已有h5项目）是375px，而cli的配置中是750，可以把现有的px值都 *2（scss等会处理）。

如果不希望转换单位的，可以把px任一单词改为大写。

标签

taro 的标签 Block, Image，Input，Textarea等都会有一个外部标签包着，会造成样式出现问题。

Block

比如在使用子元素的时候 p:first-child。

如果不想修改css或者css不好修改，可以考虑把Block 修改为 React.Fragment

Textarea

在小程序直接是一个标签；h5中外面包了一层。
可以在外层的wrapper下写boder-radius,overflow,bg等。
Textarea标签className={styles[textarea-style-${process.env.TARO_ENV}]}（使用了css module）
也不写style了。样式也少了，只需处理兼容的问题。

taro文档中也没有处理css多端的方式。
不同的css处理方式，会有不同的解决方法。比如css-in-js,文件组件等的方式。

.textarea-wrapper{
  border-radius: 5px;
  background: #fff;
  overflow:hidden;
  textarea{
    width: 100%;
    box-sizing: border-box;
  }
}
.textarea-style-h5{
  width: 100%;
}
.textarea-style-weapp{}

Image

Image 最好显示设置宽高。

<Image src={staffPhoto} style={{width:"50px", height:"50px"}}></Image>

<img> 图片尺寸问题​
在 H5 中，不设置 <img> 的宽高时，浏览器会使用原图的宽高作为标签的宽高。
而在小程序中，不设置 <Image> 的宽高时，会使用默认样式中规定的宽高。
解决办法：用户在使用 <img> 时必须显式设置它的宽高。

map

map 组件暂未支持h5.需要自己写h5的地图组件（可根据小程序使用tencent，baidu,gaode 地图api）

webview

编译到h5是 <taro-web-view-core src="https://x.html" class="hydrated"><iframe class="taro-webview" src="https://x.html"></iframe></taro-web-view-core>。
所以需要，确认父级的定位方式，以及指定height 。

.taro-webview {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

此处要注意fixed定位的特殊性。可以灵活修改：不用top等定位，或者新的视口区域，或者修改定位方式。

标签事件不一致

通用规则​: click -> tap

<Input> 事件 onChange -> onInput; keypress -> onConfirm

<Checkbox>, <Radio> 事件 onChange -> bindtap

API

滚动

背景：h5引入外部组件，设置了window.addEventListener('scroll', callback)没有监听到。
原因：滚动不是window，而且taro-router的页面。
解决：方案一或者方案三。

// 0 背景：以下无效
window.addEventListener('scroll', scroll);
// 1 解决一：需要绑定到页面元素上
document.getElementsByClassName('taro_page')[0].addEventListener('scroll', () => console.log(22))
// 1-2 taro_router也是无效的
// document.getElementsByClassName('taro_router')[0].addEventListener('scroll', scroll)

// 1 解决二：修改css 把`.taro_page`父元素overflow 取消。
// 但是taro组件的全局样式，无法单独覆盖；不确定影响范围。

// 1 解决三：主动触发window的滚动事件
usePageScroll((_e) => {
    // console.log('[recommend].page scroll', _e)
    // window.scrollTo(0, 0) // 不可以
    // document.body.scrollTo(0, 0) // 不可以
    window.dispatchEvent(new CustomEvent('scroll'))
})

框架

getApp

在h5中getApp()返回的是undefined，需要处理。
const sysInfo = Taro.getApp()?.systemInfo || {};

requirePlugin

1. h5中不能直接在顶层调用requirePlugin, 会出错。
   解决：移到用的该api的函数逻辑里面了。

设备

setClipboardData

调用成功后，会弹出 toast 提示”内容已复制”，持续 1.5s
h5没有上面的toast，需要兼容处理。

模块

1. 可以通过require + process.env.TARO_ENV 解决按需引入。
   避免在顶部import的模块，在某一端无法运行报错。

# 跨端开发

I 携程小程序生态之Taro跨端解决方案

# 11-s 携程小程序生态之Taro跨端解决方案

## 一、摘要
随着携程接入小程序平台类型的增加，前端需要负责的端越来越多，研发成本也随之成倍增加。为了解决一套代码多端运行的诉求，携程小程序框架不断调整、升级，逐渐形成了携程Taro跨端解决方案。

## 二、背景
### 2.3 解决方案
该方案还提供了仓库管理、辅助脚手架、编译功能扩展及过程优化等功能。

## 三、Taro跨端解决方案设计
### 3.2 整体架构设计
3.3 Taro模块的插件化设计
3.4 项目结构与开发规范

3.5 仓库管理

3.6 开发及运行架构