小程序内嵌H5使用公众号能力实践

前言

总括: 本文总结了近期博主在小程序内嵌H5使用公众号能力实践中遇到的一些问题和解决方案,其中一些是移动端开发共性的问题,一些是公众号独有的问题,特此分享出来,避免后来人采坑。

有理赢,无理输。

正文

最近做的一个项目是小程序内嵌HTML5应用,期间遇到了很多的问题,小程序的web-view组件刚支持不久,踩坑是不可避免的问题,但总的来说还是可以接受的。有新的问题或是问题更好的解决方案,求评论留言。

1.问题:进入页面后会需要回退两次才能推出H5;

解决思路:

  • 开始的解决思路是通过location.replace进行覆盖上一条历史记录,发现行不通,原因是微信的授权url没法控制;

  • 覆盖历史记录尝试了很多方法,比如记录用户进入的路由,发现很复杂,很容易乱掉,舍弃;

  • 发现覆盖历史记录的方法是行不通的,改换思路,回到问题本质:回退;既然前进无法控制,但只要实现回退一次就好啊

  • 经过测试发现popstate事件在第一个页面(微信授权之后携带code参数的那个url)和第二个页面回退的event参数是一样的,popstate貌似没法判断是从第一个页面回退还是从第二个页面回退的….这就比较尴尬…

  • 突破,以退为进,再创建一个记录,使用pushstate创建一条新的记录,形成这么一条记录:

    微信授权url -> 第一个页面 -> 第一个页面#

  • 通过监听hashchange事件来判断页面是否在第一个页面回退的。在hashchange回调里调用回到小程序的API,实现需求。

    结论:

    前端最怕被局限在浏览器这一个宿主环境中,刚开始的想法实际就是被浏览器局限住了,毕竟我们的外部环境是小程序。解决问题的方案实际可以由内而外的来解决。

2.问题:

在history模式下,安卓手机中无法正常config,会提示invalid signature的错误,iOS下则是正常的,

解决方案:

vue-router切换的时候都是操作的浏览器历史记录,真实URL为第一次刚进入时的URL。在需要授权的页面进行授权使用第一次进入时的URL。

3.问题:页面弹动(下拉显示域名提示),解决h5页面弹动问题,尤其是签名页,页面弹动极度影响体验。

解决方案: 禁止页面弹动,添加nobounce.js文件,在最外层使用overflow: scroll;

4.问题:iOS下使用overflow: scroll有滑动卡顿的现象

解决方案:

1
2
3
// 解决iOS滚动卡顿的bug,创建带有硬件加速的系统级控件
-webkit-overflow-scrolling: touch;

5.问题: getLocalImgData在不同系统环境下得到的数据不同

描述: getLocalImgData: 将chooseImage得到的图片转为base64编码的图片

  • iOS 系统里面得到的数据,jpg格式的图片类型为 image/jgp,不知道是 bug 还是什么原因。
  • 安卓系统得到的数据,是没有 data:image/jpeg;base64, 前缀的,所以导致无法把base64图片展示在页面中;

    解决方案:针对不同系统进行兼容处理。

6.问题:input、textarea在安卓和iOS下的默认padding不一样

解决方案:input、textarea将padding重新设置下

7.问题:WeixinJSBridgegetNetworkType回调参数和官网给出的不一致

1
2
3
window.WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
connectionType = e.subtype; // wifi网络下实际返回的字段是大写字母WIFI,官网给的样例说是返回的是wifi字段
})

解决方案: 统一转为小写再进行判断

8.问题:低版本安卓不支持border-radius: 50%;
解决方案:border-radius: 9999px;

9.问题: border-radius和背景色的时候,背景色会溢出到圆角以外部分,
解决方案:使用background-clip: padding-box;来修复;

10.问题:iPhone下1px太粗问题

解决方案:改为0.5px ;或是transform: scaleY(0.5);

11.问题:在调用公众号的chooseImage之后回到页面,底部可能会出现一个灰条,但不影响布局,怀疑是webview的bug。

12.域名限制:前端开发同学把开发好的静态文件放到服务器或者CDN上,但是请注意web-view配置的src页面路径所在的域名 一定要在小程序的业务安全域名列表中。

13.调试问题:

  • 小程序自身提供了调试模式,开发者可以打开该模式查看前端调试输出,web-view可以在当前H5页面右键进入调试模式,调出开发者工具(但比较蛋疼,因为额外开了个窗口,而且一旦退出web-view,窗口自动关闭)。调试我们自己的接口可以直接调出开发者工具和在浏览器中无异。

  • 但如果调用了公众号接口,就比较麻烦。公众号API在debug模式下,web-view虽然也有提示但没法真正呼起调用过程。目前诸如uploadImage,getLocalImgData等API只能进行真机调试。真机调试由于有域名的限制,所以只能上传服务器…所以公众号的API调试起来比较麻烦。

14.问题: SPA模式时需谨慎选择浏览器模式

描述:浏览器模式可以选择history、replace这2种常见的方式,使用history模式会将历史的url压栈,replace模式会只保留最新的url,开发同学需要根据业务方的具体诉求来灵活配置

15.问题:如何保存对应路由的状态
解决方案:在router-view上加上keep-alive

后记

最后再广播一次,有新的问题或是问题更好的解决方案,求评论留言。邮箱:jztan1996@gmail.com

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

人过留名,雁过留声
听听你的声音

回复 Username 留言: content x

Hosted by Coding Pages