微信H5網(wǎng)頁分享功能實現(xiàn)詳解

時間：2023-05-21 09:54:02 | 來源：網(wǎng)站運營

時間：2023-05-21 09:54:02 來源：網(wǎng)站運營

微信H5網(wǎng)頁分享功能實現(xiàn)詳解：最近做了一個小項目，需要做微信分享功能，然后查了一通微信文檔，具體步驟如下：

• 1. 步驟一：綁定域名
• 2. 步驟二：引入JS文件
• 3. 步驟三：通過config接口注入權(quán)限驗證配置
• 4. 步驟四：通過ready接口處理成功驗證
• 5. 步驟五：通過error接口處理失敗驗證

第一步：綁定域名和設(shè)置IP白名單

在微信公眾號里，設(shè)置IP白名單和JS安全域名：

設(shè)置JS安全域名：

二、引入JS文件

在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載

如果是VUE項目：

npm install weixin-js-sdk

引入：

var wx = require('weixin-js-sdk');

三、通過config接口注入權(quán)限驗證配置

wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: appId, // 必填，公眾號的唯一標(biāo)識，填自己的！
timestamp: timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數(shù)據(jù)
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名，見附錄1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
});

四、通過ready接口處理成功驗證

wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

//分享到朋友圈
wx.onMenuShareTimeline({
title: "title", // 分享時的標(biāo)題
desc: des,
link: theUrl, // 分享時的鏈接
imgUrl: shareImgUrl,// 分享時的圖標(biāo)
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
console.log("complete" + JSON.stringify(res));
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: "title",
desc: des,
link: theUrl,
imgUrl: shareImgUrl, //分享圖標(biāo)
type: "",
dataUrl: "",
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
console.log("complete" + JSON.stringify(res));
}
});




五、通過error接口處理失敗驗證

wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});

完整代碼：





/*
* 注意：
* 1. 所有的JS接口只能在公眾號綁定的域名下調(diào)用，公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
* 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容，請到官網(wǎng)下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有問題請通過以下渠道反饋：
* 郵箱地址：weixin-open@qq.com
* 郵件主題：【微信JS-SDK反饋】具體問題
* 郵件內(nèi)容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團(tuán)隊會盡快處理你的反饋。
*/
// 發(fā)送給朋友并返回結(jié)果
/* wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'],
success: function(res) {
alert(reg);
}})
// 以鍵值對的形式返回，可用的api值true，不可用為false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}});
}) */

openShare() {
let that = this;
let des = this.$dict.DESC;
let theUrl = window.location.href.split("#")[0];
let shareImgUrl ="logo.png"
getShareSign({ url: theUrl }).then(res => {
if (res.data.code == 200) {
let appId = res.data.data.appid;
let timestamp = res.data.data.timestamp;
let nonceStr = res.data.data.nonceStr;
let signature = res.data.data.signature;
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: appId, // 必填，公眾號的唯一標(biāo)識，填自己的！
timestamp: timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數(shù)據(jù)
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名，見附錄1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
});

wx.ready(function() {
//分享到朋友圈
wx.onMenuShareTimeline({
title: "title", // 分享時的標(biāo)題
desc: des,
link: theUrl, // 分享時的鏈接
imgUrl: shareImgUrl, // 分享時的圖標(biāo)
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
console.log("complete" + JSON.stringify(res));
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: "",
desc: des,
link: theUrl,
imgUrl: shareImgUrl,
type: "",
dataUrl: "",
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
console.log("complete" + JSON.stringify(res));
}
});
that.showLayer = true;
});
wx.error(function(res) {
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
console.log("myerr:" + JSON.stringify(res));
});
} else {
this.$message.error("獲取簽名失敗");
}
});
},

流星消逝，還有寧靜美好的夜空；曇花凋零，還有來年綻放的期許；蒲公英飄走了，還有隨風(fēng)飛舞的風(fēng)姿；你、若有夢想，請堅持下去…