微信分享功能实现,兼容安卓和IOS

微信分享注意事项

  • 生成签名的路径必须是当前页面的路径
  • 分享的url不能含有特殊符号,例如# (所以vue-cli项目路由要用history模式history模式配置)
  • ios分享图标不能超过32K
  • link参数带中文或者特殊字符,带中文的url在安卓中应该也是会出问题的,但是安卓会自动encodeURIComponent(),而ios不会。所以如果url参数中带了中文字符,将参数encodeURIComponent()编码,再提交代码,ios可以正常分享。

iOS下vue项目 微信签名出错
用SPA做微信h5,调用微信jssdk的页面,安卓微信上木有问题,ios微信报当前url未注册。经过调试,是ios微信版本问题导致页面跳转url未变化,导致验签失败。所以我们大致的思想就是:在ios微信环境中,如果跳转页面与当前页面的url不一致,那么就重载刷新整个跳转页面。因为项目使用vue,所以我们使用vue-router的钩子函数beforeRouterEnter()来做此操作,将钩子函数写入js模块,使用时候混入页面vue实例选项即可

// 修复IOS版微信h5 history兼容性问题(b页面需要分享,在路由beforeRouterEnter方法里强制刷新b页面)
if (isIOSEnv() && from.path.indexOf('/a') >=0 && to.path.indexOf('/b') >=0) {
	 // location.assign 会导致路由错乱, 返回上一页会出问题
	 // location.assign(util.baseUrl + '/b')
	 location.replace(util.baseUrl + '/b')
}

js判断浏览器环境

let isIOSEnv = function () {
  return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
}

你可能感兴趣的:(vue)