vue H5 公众号授权分享

公众号网页授权官方文档

调用授权地址的设置

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

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx27d6e2a2b7be9&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 是自己要携带的参数

公众号微信注册分享功能官方文档

回调页获取code 及参数中间跳转页面方法也可直接拿首页当做回调页获取方法一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="code"></div>
    <script>
        let code = getParam("code")
        let userOpenId= getParam("userOpenId")||''

        function getParam(paramName) { 
            paramValue = "", isFound = !1; 
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) { 
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0; 
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++ 
            } 
            return paramValue == "" && (paramValue = null), paramValue 
        }
        window.location.href="http://loery.tubalog.top/ltery/index.html?userOpenId="+getParam("userOpenId")+"&code="+getParam("code")
    </script>
</body>
</html>

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)

vue H5 公众号 授权分享

公众号 网页授权 官方文档

调用授权地址的设置

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

vue H5 公众号授权分享

公众号网页授权官方文档