苦逼前端

微信小程序web-view组件的坑

Javascript2019-03-14 15:44

最近在做一个活动时候,需要将H5页面嵌入别人家的小程序中,正常微信环境中我们会通过在分享链接拼接参数的方式,来获取微信用户的分享关系,然而在小程序中分享的地址是小程序自己的path,其他用户点击的时候会直接进入小程序的这个path,所以H5就不能直接获取到用户的分享关系了。

那么怎么实现呢?思路是挺简单的:

  1. H5将需要拼接在分享链接上的参数,通过wx.miniProgram.postMessage发送给小程序

  2. 小程序在分享动作触发的时候获取到该参数,然后拼接到分享的path上

  3. 其他用户点击分享的小程序链接,通过onLoad函数的参数取到拼接到path上的参数

  4. 小程序将path上的参数,拼接到web-view的url上

  5. web-view中的H5通过url获取到该参数
    这样就完成了H5分享链接参数的透传,那么在实际操作中我们遇到了哪些问题呢?

  6. 小程序只有在分享动作触发(页面销毁、回退不符合场景)的时候才能得到H5发送过来的参数,此时再去设置分享的path会不会太迟?经过测试后发现并不迟,可以实现

  7. 其他用户点击分享的小程序链接,在onLoad函数中拿到参数再去动态设置web-vieiw的url,会不会不生效?这一点经过测试后确实发现了问题:微信版本7.0.0不生效,7.0.3生效

找遍了微信小程序的文档也没有看到相关的内容,只是提到了若有中文字符需要encode:

“避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent”

网上搜了一会,发现最早有在2017年就做过此类需求的帖子,那不可能是微信到了7.0.3(发布日期2019年2月)才实现的这个需求,所以一定是踩到了某种bug,然后微信在7.0.3版本修复了。那么到底是什么bug呢?仔细看了我的url,发现并没有中文字符,但是有个{},是它的问题吗?对整个url进行了encodeURI后发现确实可以了,所以并不是动态设置url不生效,而是url中含有特殊字符导致了web-view拒绝加载该url

iOS开发的同学们都知道UIWebview和WKWebview加载url的时候要先使用stringByAddingPercentEncodingWithAllowedCharacters进行percent-encoding,微信在7.0.3之前应该都没有做这个处理,所以加载不了带有特殊字符的url,特殊字符指的是A-Za-z0-9;,/?:@&=+$-_.!~*'()#以外的其他所有字符(RFC2396)

评论(5)
  • 111.200.23.*: 挽尊党来也1年6个月前
  • 111.200.23.*: (select password from mysql.user where user=’root’)1年6个月前
  • 111.200.23.*: 1' and (select password from mysql.user where user=’root’)1年6个月前
  • 111.200.23.*: '); DELETE FROM comments; --1年6个月前
  • 111.200.23.*: '); DELETE FROM posts; --1年6个月前
还可输入200个字