vue h5 jssdk 微信分享好友和朋友圈
微信分享对于前端还是很简单的， 主要根据文档和后台返回的数据就可以了
1、vue项目中安装weixin-js-sdk （npm install weixin-js-sdk）
2、 方便维护src 下建立weixin 文件夹 ， 其下又建立wxsdk.js 进行初始化设置封装
import wx from 'weixin-js-sdk'export default { /** * * @param {*} api 微信公众号api * @param {*} fn 回调 */ // 分享 setShare(param = {}, callback) { let registerUrl = window.location.href // if (isIOS()) { // // 只要根路径 // registerUrl = window.location.origin '/' // console.log(window.location, 'host:') // } // 需要encodeURIComponent 不然会有问题（调用你们的接口获取到初始化配置的相关信息） /**调用你们的接口获取到初始化配置的相关信息----开始---**/ apiList.getGryJsapiSignerToken({ query: { url: encodeURIComponent(registerUrl) }, hasLoading: false }).then(res => { let { code, data } = res console.log('请求微信配置成功>>>>', new Date().getTime(), data) if (Number(code) === 0) { /**调用你们的接口获取到初始化配置的相关信息----结束---**/ wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature, // 必填，签名 jsApiList: [ // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 'updateTimelineShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 'updateAppMessageShareData', 'hideMenuItems', 'wx-open-launch-weapp' ], // 必填，需要使用的JS接口列表 openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] }) wx.ready(function () { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log('配置成功分享:', param.title, param.imageUrl, param.link, param.desc) wx.updateTimelineShareData({ title: param.title, // 分享标题 link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: param.imageUrl, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 typeof callback === 'function' && callback() } }) // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） wx.updateAppMessageShareData({ title: param.title, // 分享标题 desc: param.desc, // 分享描述 link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: param.imageUrl, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 typeof callback === 'function' && callback() } }) }) wx.error(function (res) { console.error(res, '>>>>>>>失败') }) } }) }, // 隐藏特定菜单 hideMenu() { // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3 wx.hideMenuItems({ menuList: [ "menuItem:share:qq", "menuItem:copyUrl", "menuItem:openWithQQBrowser", "menuItem:openWithSafari", "menuItem:share:email" ] }) }}3、 在需要调用分享的页面引入wxsdk 文件直接调用setShare 方法传入对应参数就可以了
注意： 全局调用和在单个页面中使用也是一样的方式 区别就在于执行的方法不一样
由于公司项目需要全局配置分享相关所以使用了中间键的方式
import wxJsSdk from 'weixin/wxsdk'import {isWeiXin} from 'utils/tools'// 区别是否是微信环境下的方法export const isWeiXin = function () { var ua = window.navigator.userAgent.toLowerCase() const b = ua.match(/MicroMessenger/i) if (b && b.length > 0) { return true } else { return false } } // 在中间键中的afterEachHandle 方法中全局设置就行了 // 判断是否 微信端 ，定死分享数据 isWeiXin() && wxJsSdk.setShare({ title: '', // 分享标题 desc: '', // 分享描述 link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imageUrl: '', // 分享图标 （https 或者http 不能写本地图片） })4、 最后注意点：微信jssdk 配置参数的大小写问题
赞 (0)