全是乾貨！JD資深架構師手把手教你如何實現H5微信分享！

導語

使用微信分享，可以獲得更好的傳播效果。那如何利用微信公眾號向好友進行信息分享呢？

步驟一. 用戶信息獲取

我們在 https://mp.weixin.qq.com/

debug/cgi-bin/sandbox?t=sandbox/login 可以申請一個測試賬號，在測試號管理的頁面中能夠看到我們appId等信息，這裡有個接口配置信息修改的選項需要我們去填寫

這裡就要麻煩後端的同學為我們提供URL和Token（URL是開發者用來接收微信消息和事件的接口URL。Token可由開發者任意填寫，用作生成簽名） 該Token會和接口URL中包含的Token進行比對，從而驗證安全性。

在項目中需要獲取用戶個人信息，比如手機號和微信頭像等，這裡我們需要微信網頁授權才可以實現，首先在微信測試號管理中找到體驗接口權限表

點擊修改進入：

將你網頁的域名添加進去，配置完成後我們對這個路徑進行訪問https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 即可拿到code值，從而拿到openid等個人信息。

3. 配置後路徑的修改

① .appid為我們測試號中的appid

② .redirect_uri為我們頁面路徑，訪問微信提供的路徑會獲取code值重定向到我們頁面路徑（這裡的url需要進行urlEncode`處理）

③ . scope的值有兩種：

• snsapi_base為靜默授權，用戶無感知，但是隻能獲取到openid，拿不到其他信息。
• snsapi_userinfo是彈框詢問授權，確認授權後可以獲取到openid進而拿到暱稱、頭像等信息

可能遇到的問題

• scope參數錯誤或沒有scope權限，檢查scope參數賦值snsapi_base或snsapi_userinfo
• redirect_uri參數錯誤，檢查網頁授權頁面域名配置問題，複製的時候空格也要注意
• response_type參數錯誤，檢查url路徑是否進行了urlEncode處理

微信JS-SDK是微信公眾平臺 面向網頁開發者提供的基於微信內的網頁開發工具包，通過JS-SDK可以使用微信分享、支付、掃一掃等功能，這裡我們使用到了微信分享。

1. js安全域名配置

使用JS-SDK首先找到測試號的JS接口安全域名，配置上頁面使用的域名

2. 引入JS-SDK

在項目中我們引入JS-SDk的資源，可通過 http://res.wx.qq.com/open/js/jweixin-1.4.0.js（支持https） 或者通過模塊化加載引入 import wx from 'weixin-js-sdk'

3. 獲取簽名配置config

在這一步還需要RD的同學給我們支持，提供一個微信簽名的接口，詳情見下圖

拿到簽名後我們對config進行設置，config設置完成後會調用ready方法，我們在ready方法裡可以進行業務邏輯處理。

步驟三. 分享接口

getSignature (){ //獲取微信簽名
 return new Promise((resolve, reject)=>{
 Axios.get(API.getWechatSign,{
 params:{
 appid: appId,
 url: window.location.href.split('#')[0]
 }
 }).then( res => {
 resolve(res.data)
 }).catch((err)=>{
 reject(err)
 })
 })
},
async setWx(){
 let res = await this.getSignature()
 let {timestamp, nonceStr, appId, signature} = res
 wx.config({
 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
 appId: appId, // 必填，公眾號的唯一標識
 timestamp: timestamp, // 必填，生成簽名的時間戳
 nonceStr: nonceStr, // 必填，生成簽名的隨機串
 signature: signature, // 必填，簽名
 jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
 }); 

 wx.ready(() => {
 wx.onMenuShareTimeline({
 title: '測試分享', // 分享標題
 link: window.location.href,// 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
 imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png',// 分享圖標
 success: function() {
 // 用戶點擊了分享後執行的回調函數
 }
 });
 wx.onMenuShareAppMessage({
 title: '測試分享', // 分享標題
 desc: '一個測試的分享!!!', // 分享描述
 link: window.location.href, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
 imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享圖標
 type: "", // 分享類型,music、video或link，不填默認為link
 dataUrl: "", // 如果type是music或video，則要提供數據鏈接，默認為空
 success: function() {
 // 用戶點擊了分享後執行的回調函數
 }
 })
 })
}

這樣我們就實現一個微信分享，效果如下圖: 分享給好友

分享到朋友圈

常見問題

1. invalid url domain 檢查js安全域名是否正確
2. invalid signature 這個問題範圍比較大：

• 檢查簽名接口是否正確，微信提供了校驗工具http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
• config中寫法問題，注意大小寫nonceStr
• 簽名入參的時候url路徑不能含有'#'hash部分
• 分享出去的鏈接域名必須與公眾號js安全域名保持一致
• debug顯示config：ok卻分享出去沒效果，查看分享的方法和js-sdk版本

寫在最後

微信網頁開發時候最主要的就是環境配置問題，細心配置避免坑點。公眾號中js的安全域名可配置三個，網頁授權域名為兩個,開發項目需要提前留意這些點。還有要關注測試號裡的公眾號。這樣一個紅包項目所需要的功能基本完成。

還想說

整個項目開發涉及到很多端支持，以快狗打車為例，有司機端、用戶端、支付等。將微信分享功能抽離成一個獨立的服務，實現統一化、標準化，以便支持各個業務線使用，這也是我們快狗打車的實戰之一。

小編整理了web前端全套的資料集合，需要的小夥伴添加小編微信領取哦~僅限今日！