手把手教你實現H5微信分享

導語

使用微信分享，能夠得到更好的傳播效果。那如何利用微信公衆號向好友進行信息分享呢？

這裏以分享 微信紅包 爲例，手把手教你們實現微信受權與分享。

步驟一. 用戶信息獲取

1. 註冊測試公衆號

咱們在 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 能夠申請一個測試帳號，在測試號管理的頁面中可以看到咱們appId等信息，這裏有個接口配置信息修改的選項須要咱們去填寫

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

2. 微信網頁受權

在項目中須要獲取用戶我的信息，好比手機號和微信頭像等，這裏咱們須要微信網頁受權才能夠實現，首先在微信測試號管理中找到體驗接口權限表

點擊修改進入：

將你網頁的域名添加進去，配置完成後咱們對這個路徑進行訪問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是微信公衆平臺 面向網頁開發者提供的基於微信內的網頁開發工具包，經過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的安全域名可配置三個，網頁受權域名爲兩個,開發項目須要提早留意這些點。還有要關注測試號裏的公衆號。這樣一個紅包項目所須要的功能基本完成。

還想說

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