Html5 微信分享以及自定義內容

最近一個項目有一個微信分享而且須要自定義微信分享內容的需求，由於是第一次接觸到微信分享，因此記錄一下期間遇到的一些問題，以及完成功能的整個流程。

如下爲大概流程 (細節放在各個階段)

• 安裝 weixin-js-sdk
• 初始化微信分享
• 配置微信分享自定義內容（發送給朋友，發送到朋友圈）

一、安裝weixin-js-sdk

npm install weixin-js-sdk --save-dev
複製代碼

具體的使用說明查閱微信官方文檔

二、 初始化微信分享

由於本人正在作的項目多處須要使用到微信分享的功能，因此這裏會對微信分享的代碼進行封裝

下面的url其實就是頁面的url,由於須要發到後端進行簽名認證，可是這個url有個狀況須要注意

當url爲www.xx.com/index.html#/形式 當是這種狀況的時候，假如你在安卓上使用頁面完整的url去後端拿參數的時，在安卓端是能夠完成配置的，可是在蘋果端的時候，會莫名的出現有時候配置會報錯，而且有可能在刷新頁面的時候，就又能夠完成配置。

解決方案：使用encodeURIComponent()函數編碼url，而且是截取了#以前的url，例如：

let url = encodeURIComponent(window.location.href.split('#')[0])
複製代碼

具體的緣由也不是很清楚，查看了資料說是進行了encodeURIComponent()編碼就能夠，可是爲何在安卓端是使用了base64編碼又不會出現這種狀況，而且在蘋果端我這邊是刷新一下頁面就能夠了，而且有時候又能夠經過驗證，不會返回簽名錯誤。

import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
    /** * [wxRegister 微信Api初始化] * @param {Function} callback [ready回調函數] */
  wxRegister (callback, url) {
    let query = {
      url: url 
    }
    api.getWxJsSdk(query).then(res => {
      let data = res.data
      wx.config({
        debug: false, // 開啓調試模式
        appId: data.appId, // 必填，公衆號的惟一標識
        timestamp: data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
        signature: data.signature, // 必填，簽名，見附錄1
        jsApiList: data.jsApiList // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
      })
    })
    wx.ready((res) => {
      // 若是須要定製ready回調方法
      if (callback) {
        callback()
      }
    })
  },
}
複製代碼

三、 配置微信分享自定義內容（發送給朋友，發送到朋友圈）

第二步對於微信初始化了封裝配置，可是還缺乏了相對應的分享等功能，這邊就完善一下，

// 在wxRegister函數後面添加
/** * [ShareTimeline 自定義微信分享到朋友圈] * @param {[type]} option [分享信息] * @param {[type]} success [成功回調] * @param {[type]} error [失敗回調] */
ShareTimeline (option) {
wx.updateTimelineShareData({
  title: option.title, // 分享標題
  link: option.link, // 分享連接
  imgUrl: option.imgUrl, // 分享圖標
  success () {
    // 設置成功
  },
  cancel () {
    // 設置失敗
  }
})
},
/** * [ShareAppMessage 自定義微信分享到朋友] * @param {[type]} option [分享信息] * @param {[type]} success [成功回調] * @param {[type]} error [失敗回調] */
ShareAppMessage (option) {
wx.updateAppMessageShareData({
  title: option.title, // 分享標題
  desc: option.desc, // 分享描述
  link: option.link, // 分享連接
  imgUrl: option.imgUrl, // 分享圖標
  success () {
    // 設置成功
  },
  cancel () {
    // 設置失敗
  }
})
}
複製代碼

四、頁面調用時

// vue 爲例
// 如下的函數有形參請參考上面的方法
import wx from '你封裝的文件'
mounted(){
    let base64 = require('js-base64').Base64
    let url = base64.encode(window.location.href)
    wx.wxRegister(this.wxRegCallback,url)
},
methods:{
    // 自定義的jdk回調
    wxRegCallback () {},
    // 自定義的分享給朋友的函數
    wxShareAppMessage(){
        let option = {
            title:'',// 分享標題
            desc: '', // 分享描述
            link: '', // 分享連接
            imgUrl: '' // 分享圖標
        }
        // 注入通用方法
        wx.ShareAppMessage(option)
    },
    // 自定義的分享給朋友圈的函數
    wxShareTimeline(){
        let option = {
            title:'',// 分享標題
            desc: '', // 分享描述
            link: '', // 分享連接
            imgUrl: '' // 分享圖標
        }
        // 注入通用方法
        wx.ShareTimeline(option)
    }
}
複製代碼

以上就是微信分享的流程，如有不足，歡迎指出
注：

• 微信分享只能在真機上測試
• 使用本地localhost形式的域名沒法經過微信的校驗