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

快狗叫車前端團隊發表於2019-04-18
H5

導語

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

這裡以分享 微信紅包 為例，手把手教大家實現微信授權與分享。

步驟一. 使用者資訊獲取

1. 註冊測試公眾號

我們在 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 可以申請一個測試賬號，在測試號管理的頁面中能夠看到我們appId等資訊，這裡有個介面配置資訊修改的選項需要我們去填寫

avatar

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

2. 微信網頁授權

在專案中需要獲取使用者個人資訊，比如手機號和微信頭像等，這裡我們需要微信網頁授權才可以實現，首先在微信測試號管理中找到體驗介面許可權表

avatar

點選修改進入：

avatar

將你網頁的域名新增進去，配置完成後我們對這個路徑進行訪問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進而拿到暱稱、頭像等資訊

這樣我們就可以授權得到使用者資訊：

avatar

可能遇到的問題

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

步驟二. 微信JS-SDK使用

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

1. js安全域名配置

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

avatar

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的同學給我們支援，提供一個微信簽名的介面，詳情見下圖

avatar

拿到簽名後我們對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() {
        // 使用者點選了分享後執行的回撥函式
      }
    })
  })
}
複製程式碼

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

avatar

分享到朋友圈

avatar

常見問題

  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的安全域名可配置三個，網頁授權域名為兩個,開發專案需要提前留意這些點。還有要關注測試號裡的公眾號。這樣一個紅包專案所需要的功能基本完成。

還想說

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

相關文章