1. 发布为小程序
2. 各家小程序实现机制不同,可能存在的平台兼容问题
(1) 浏览器内核差异
各家小程序的浏览器内核不同,可能会造成css兼容性问题
,更多细节参考:关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性
各小程序平台的webview内核说明
- 各家小程序,在iOS上大多使用的是wkwebview内核,已知仅百度小程序是uiwebview。wkwebview是iOS的一部分,其版本根据iOS版本的不同而不同。可以在caniuse直接看到iOS版本对应的浏览器兼容问题。
- Android上各家小程序使用的是基于chromium改造的浏览器内核。具体如下:
- 微信:老版微信使用的是x5,ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903;后来微信团队自研了MWEB内核,ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
- 百度小程序:ua特征是Chrome/63.0.3239.83,并且包含baiduboxapp字符串
- 支付宝小程序:根据支付宝版本,chrome有57和69等版本,ua特征字符串有NebulaSDK
- QQ小程序:根据QQ版本,chrome有66和68等版本,ua特征字符串有QQ/MiniApp
- 头条小程序:ua特征是Chrome/62,ua特征字符串有ToutiaoMicroApp
总结
:uni-app中,js方面不存在浏览器兼容问题,因为js都使用的是独立的js引擎,与webview无关;API也是仅小程序支持的API才可以使用;所以uni-app的浏览器兼容性问题,主要是css,注意不要使用太新的css就可以。
(2) 自定义组件渲染差异
微信/QQ/百度/字节跳动这四家小程序,自定义组件在渲染时会比App/H5端多一级节点,在写样式时需要注意:
- 使用
flex
布局时,直接给自定义组件的父元素设置为display:flex
不能影响到自定义组件内部的根节点,需要设置当前自定义组件为display:flex
才可以。 - 在自定义组件内部设置根元素高度为100%,不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。
支付宝小程序不会插入节点,不存在如上问题。
网友评论