最近一個項目有一個微信分享并且需要自定義微信分享內容的需求，因為是第一次接觸到微信分享，所以記錄一下期間遇到的一些問題，以及完成功能的整個流程。
以下為大概流程 (細節放在各個階段)
1、安裝 weixin-js-sdk
npm install weixin-js-sdk --save-dev
具體的使用說明查閱微信官方文檔
2、 初始化微信分享
因為本人正在做的項目多處需要使用到微信分享的功能，所以這里會對微信分享的代碼進行封裝
下面的代碼中的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 實現微信分享及自定義內容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
