Html5 實作微信分享及自訂內容的流程

最近一個專案有一個微信分享並且需要自訂微信分享內容的需求，因為是第一次接觸到微信分享，所以記錄一下期間遇到的一些問題，以及完成功能的整個流程。

以下為大概流程(細節放在各階段)

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

npm install weixin-js-sdk --save-dev

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

因為本人正在做的專案多處需要使用到微信分享的功能，所以這裡會對微信分享的程式碼進行封裝

下面的程式碼中的Api其實就是axios請求

 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，並且需要轉換base64 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() } }) },}

註：以上需要轉換base64的可以使用js-base64

3、 設定微信分享自訂內容（發送給朋友，發送到朋友圈）

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

 // 在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 () { // 設定失敗}})}

4.頁面調用時

 // 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形式的網域無法通過微信的校驗

以上所述是小編給大家介紹的Html5 實現微信分享及自訂內容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！