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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM