最近一個(gè)項(xiàng)目有一個(gè)微信分享并且需要自定義微信分享內(nèi)容的需求，因?yàn)槭堑谝淮谓佑|到微信分享，所以記錄一下期間遇到的一些問(wèn)題，以及完成功能的整個(gè)流程。
以下為大概流程 (細(xì)節(jié)放在各個(gè)階段)
- 安裝 weixin-js-sdk
- 初始化微信分享
- 配置微信分享自定義內(nèi)容（發(fā)送給朋友，發(fā)送到朋友圈）
1、安裝 weixin-js-sdk
npm install weixin-js-sdk --save-dev
具體的使用說(shuō)明查閱微信官方文檔
2、 初始化微信分享
因?yàn)楸救苏谧龅捻?xiàng)目多處需要使用到微信分享的功能，所以這里會(huì)對(duì)微信分享的代碼進(jìn)行封裝
下面的代碼中的Api其實(shí)就是axios請(qǐng)求
import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回調(diào)函數(shù)]
*/
wxRegister (callback, url) {
let query = {
// 這里的url必須是你要分享的頁(yè)面完全對(duì)應(yīng)的url，并且需要轉(zhuǎn)換 base64
url: url
}
api.getWxJsSdk(query).then(res => {
let data = res.data
wx.config({
debug: false, // 開(kāi)啟調(diào)試模式
appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: data.signature, // 必填，簽名，見(jiàn)附錄1
jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
})
})
wx.ready((res) => {
// 如果需要定制ready回調(diào)方法
if (callback) {
callback()
}
})
},
}
注：以上需要轉(zhuǎn)換base64的可以使用 js-base64
3、 配置微信分享自定義內(nèi)容（發(fā)送給朋友，發(fā)送到朋友圈）
第二步對(duì)于微信初始化了封裝配置，但是還缺少了相對(duì)應(yīng)的分享等功能，這邊就完善一下，
// 在wxRegister函數(shù)后面添加
/**
* [ShareTimeline 自定義微信分享到朋友圈]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調(diào)]
* @param {[type]} error [失敗回調(diào)]
*/
ShareTimeline (option) {
wx.updateTimelineShareData({
title: option.title, // 分享標(biāo)題
link: option.link, // 分享鏈接
imgUrl: option.imgUrl, // 分享圖標(biāo)
success () {
// 設(shè)置成功
},
cancel () {
// 設(shè)置失敗
}
})
},
/**
* [ShareAppMessage 自定義微信分享到朋友]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調(diào)]
* @param {[type]} error [失敗回調(diào)]
*/
ShareAppMessage (option) {
wx.updateAppMessageShareData({
title: option.title, // 分享標(biāo)題
desc: option.desc, // 分享描述
link: option.link, // 分享鏈接
imgUrl: option.imgUrl, // 分享圖標(biāo)
success () {
// 設(shè)置成功
},
cancel () {
// 設(shè)置失敗
}
})
}
4、頁(yè)面調(diào)用時(shí)
// vue 為例
// 以下的函數(shù)有形參請(qǐng)參考上面的方法
import wx from '你封裝的文件'
mounted(){
let base64 = require('js-base64').Base64
let url = base64.encode(window.location.href)
wx.wxRegister(this.wxRegCallback,url)
},
methods:{
// 自定義的jdk回調(diào)
wxRegCallback () {},
// 自定義的分享給朋友的函數(shù)
wxShareAppMessage(){
let option = {
title:'',// 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '' // 分享圖標(biāo)
}
// 注入通用方法
wx.ShareAppMessage(option)
},
// 自定義的分享給朋友圈的函數(shù)
wxShareTimeline(){
let option = {
title:'',// 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '' // 分享圖標(biāo)
}
// 注入通用方法
wx.ShareTimeline(option)
}
}
以上就是微信分享的流程，若有不足，歡迎指出
注：
微信分享只能在真機(jī)上測(cè)試
使用本地localhost形式的域名無(wú)法通過(guò)微信的校驗(yàn)
總結(jié)
以上所述是小編給大家介紹的Html5 實(shí)現(xiàn)微信分享及自定義內(nèi)容，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
