【微信公众号H5】 H5授权分享(vue框架) (解决安卓注册config正常 则ios注册config 签名错误问题)

  • Post author:
  • Post category:vue


公众号 网页授权

官方文档


调用授权地址的设置


页面内直接跳转微信授权链接


window.location.href = “https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbbc27d6e2a2b7be9&redirect_uri=”+ urlcode+”&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect”


  • redirect_uri 授权后返回的页面  可设置参数

  • 带参数 必须使用 encodeURI 加密    (decodeURI) 参数和链接都要加密

  • 例子:let urlcode = encodeURI(“http://lm.huhacity.com/callBack.html?item=”+encodeURI(JSON.stringify(self.InfoData)))

  • self.InfoData 是自己要携带的参数


公众号 微信注册分享功能

官方文档


async 异步方法 调用微信注册分享功能

async wechatShare(){

let self= this

let useUrl = self.useSharData.shardUseId?encodeURI(‘http://acity.com/#/couponShare?item=’+encodeURI(JSON.stringify(self.useSharData))+’&type=true’):”

//


注释  自定义分享链接 必须  encodeURI 加密    useUrl 为分享的链接

const data = await wechatConfig();//

通过接口获取微信的信息 如://appId 微信appId  timestamp 时间戳


//注册微信配置信息

wx.config({ debug: false, appId: data.data.appId, timestamp: data.data.timestamp, nonceStr: data.data.nonceStr, signature: data.data.signature, jsApiList: [ “onMenuShareTimeline”, “onMenuShareAppMessage” ] });


//

ready 方法为 分享功能注册成功 回调函数   及可自定义分享的信息

wx.ready(() => {

//

朋友圈

wx.onMenuShareTimeline({

title: ‘邀请领取’,

link: useUrl,

imgUrl:`http://${window.location.host}/static/images/huha_logo.png`,

success: (data) => { if(data.errMsg === ‘onMenuShareTimeline:ok’) { this.toast(‘分享成功’); } }, cancel: () => { this.toast(‘分享失败’); } });


//微信好友

wx.onMenuShareAppMessage({

title: ‘邀请领取’, // 分享标题

desc: ‘邀请领取’, // 分享描述

link: useUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl:`http://${window.location.host}/static/images/a_logo.png`, // 分享图标

type: ‘link’, // 分享类型,music、video或link,不填默认为link

dataUrl: ”, // 如果type是music或video,则要提供数据链接,默认为空

success: (data) => {

if(data.errMsg === ‘onMenuShareAppMessage:ok’) { this.toast(‘分享成功’); } },

cancel: () => { this.toast(‘分享失败’); } }); }) },


注释  手机微信点击分享 无效时肯定是 自定义分享链接错误   ios不支持端口号  分享的链接不能带端口号


页面进入需要加载环境 如不做客户触发注册分享 做进入页面自动注册分享功能  需要做延迟调用


setTimeout(function() {


this.wechatShare()

}, 1500)


解决安卓注册config正常 则ios注册

config 签名错误问题

原因是ios 无论路由跳转多少次,复制出来的链接都是首次进入的页面的链接 所以重点来了

Vue.prototype.href = window.location.href

记录第一次 进入的链接 在注册的时候 判断是否是ios 进行相对于的修改

let url = location.href.split('#')[0]
let isIOS = function () {
    var isIphone = navigator.userAgent.includes('iPhone')
    var isIpad = navigator.userAgent.includes('iPad')
    return isIphone || isIpad
  }
if (isIOS()) {
   url = this.firstUrl
}
const data = await wechatConfig(url)



版权声明:本文为weixin_39007040原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。