美文网首页uin-app
uniapp发布为小程序及平台兼容问题

uniapp发布为小程序及平台兼容问题

作者: 瑟闻风倾 | 来源:发表于2021-02-26 15:12 被阅读0次

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%才可以。

支付宝小程序不会插入节点,不存在如上问题。

相关文章

网友评论

    本文标题:uniapp发布为小程序及平台兼容问题

    本文链接:https://www.haomeiwen.com/subject/inwmfltx.html