这期内容当中小编将会给大家带来有关怎么在Html5中实现微信分享功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
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 (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
配置微信分享自定义内容（发送给朋友，发送到朋友圈）
第二步对于微信初始化了封装配置，但是还缺少了相对应的分享等功能，这边就完善一下，
// 在wxRegister函数后面添加ShareTimeline (option) {wx.updateTimelineShareData({ title: option.title, // 分享标题 link: option.link, // 分享链接 imgUrl: option.imgUrl, // 分享图标 success () { // 设置成功 }, cancel () { // 设置失败 }})},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) }}上述就是小编为大家分享的怎么在Html5中实现微信分享功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网行业资讯频道。
