微信公眾開發 - H5分享流程和封裝
摘要：
H5 分享流程
第一步，繫結域名
【先登入微信公眾平臺
進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 備註：登入後可在“開發者中心”檢視對應的介面許可權。】
這裡繫結的時候需要注意不要帶前面的http協議...
H5 分享流程
第一步，繫結域名
【先登入ofollow,noindex">微信公眾平臺 進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 備註：登入後可在“開發者中心”檢視對應的介面許可權。】
這裡繫結的時候需要注意不要帶前面的http協議頭。寫法跟上一篇《微信公眾號開發 - 靜默授權獲取使用者資訊 》中的網頁回撥域名設定的寫法是一樣的。
第二步，引入JS檔案
安裝: npm install weixin-js-sdk
使用: var wx = require('weixin-js-sdk');
or
在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：
http://res.wx.qq.com/open/js/jweixin-1.0.0.js
請注意，如果你的頁面啟用了https，務必引入 ：
https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統中成功使用JSSDK
第三步，通過config介面注入許可權驗證配置
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
appId，timestamp，nonceStr，signature 必須後臺簽名返回這個四個欄位的值。
第四步，通過ready介面處理成功驗證
wx.ready(function(){
/** config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，
config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。*/
});
第五步，通過error介面處理失敗驗證
wx.error(function(res){
/** config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟
config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。*/
});
H5 分享封裝
import {$http} from '../tools';
import wx from 'weixin-js-sdk'
export function WxShare(shareObj) {
let url = encodeURIComponent(window.location.href.split('#')[0]);
$http.post(`xxxxxx`, {
pageUrl: url
}).then(function (res) {
wx.config({
debug: false,
appId: res.result.appId, // 和獲取Ticke的必須一樣------必填，公眾號的唯一標識
timestamp: res.result.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.result.noncestr, // 必填，生成簽名的隨機串
signature: res.result.signature,// 必填，簽名，見附錄1
//需要分享的列表項:傳送給朋友，分享到朋友圈，分享到QQ，分享到QQ空間
jsApiList: [
'onMenuShareAppMessage', 'onMenuShareTimeline',
'onMenuShareQQ', 'onMenuShareQZone'
]
});
let share_config = {
"imgUrl": shareObj.imgUrl,
"desc": shareObj.desc,
"title": shareObj.title,
"link": shareObj.link,
"success": function () {
//分享成功後的回撥函式
// alert('分享成功')
},
"cancel": function () {
//使用者取消分享執行的回撥函式
// alert('分享成功')
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config);//分享給好友
wx.onMenuShareTimeline(share_config);//分享到朋友圈
wx.onMenuShareQQ(share_config);//分享給手機QQ
wx.onMenuShareQZone(share_config);//分享給手機QQ
});
});
// 處理驗證失敗的資訊
wx.error(function (res) {
alert(res.toString());
});
WxShare({
title: res.result.shareCircleTitle,
desc: res.result.shareFriendSubtitle,
imgUrl: 'https://static.jxypapp.com/wechat/common/share-logo(1).png',
link: 'http://test-recycle-h5.jxypapp.com?shareFlag=shared&teamId='+res.result.teamList[0]['teamId'] + '&activityId=' + state.activityId
});
注意事項：link中域名必須要和繫結域名相同。