react/VUE微信分享过程中遇到的问题(SPA/history模式)

首先我们来模拟一个用户进入你的应用(网页)后的一些行为,包括:

  1. 点击链接或按钮跳转到其他页面
  2. 刷新页面
    其中:
    • currentPage表示你正在看的页面
    • langdingPage表示落地页,也就是浏览器认为的页面
Andriod系统对url的识别机制

Ios系统对url的识别机制

如上,Andriod系统更符合我们对url的认知,而Ios系统中的每个页面的url都是刚进入项目的第一页的url,除非是刷新页面;即:在SPA模式下:

  • Ios中,页面A为整个项目的真实url
  • Andriod中,每次路由跳转都会产生新的url

微信js-sdk配置加密所校验的url是落地页url(即:landingPage),所以以下情况若调用微信API需要在当前页面配置:

  • Ios进入项目的第一页
  • Ios页面刷新后
  • Andriod路由跳转或页面刷新后

① 在SPA/history模式下,不同系统对url的识别机制存在差异:

Ios > 所有页面的url等于落地页url,进入项目的落地页为配置页,只需要在落地页配置一次即可
Android > 每次页面跳转都会产生新的url,需要调用微信api的页面需再单独配置

② 自定义分享配置注意事项:

分享链接link: 必须和公众号中设置的js安全域名一致,并且不需要使用encodeURIComponent转码,否则安卓端异常,特别注册在二次分享微信会自动增加from参数 (https://xxxx.com/index?frome=singlemessage)
若配置方法是在导航中执行,注意weixin API的加载校验为异步,配置信息要在weixin校验完成后执行
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复