因为我做的项目很多地方都需要用到Momo分享的功能，所以这里将Momo分享的代码进行封装
下面代码中的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.配置Momo分享自定义内容（发送给同学、发送给同学圈）
第二步是初始化Momo的打包配置，还缺少相应的分享功能html5 分享微信朋友圈，所以我们就在那里构建一下。
// 在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)
}
}
以上就是小编给大家分享的如何在Html5中实现Momo分享功能。 如果你恰好也有类似的苦恼，不妨参考上面的分析来了解一下。 如果您想了解更多相关知识html5 分享微信朋友圈，欢迎关注易速云行业资讯频道。
发表评论