vue全局封装微信公众号分享模块
2020-10-20 本文已影响0人
一页莲子
1.新建一个文件夹,这里我以vxshare.js文件为例。
//安装 微信JSDK插件
npm install weixin-js-sdk -D
//安装 jquery 这里以ajax为例 (不需要的小伙伴可以使用axios 原理其实是一样的)
npm install jquery -D
// 封装分享方法
export function shareUrl(daurl) {
var url = ''
$.ajax({
url: process.env.VUE_APP_BASE_API + '后端分享的API地址',
type: 'post',
// 是否需要设置请求头,这里不需要。
// headers: {
// 'Content-Type': 'text/plain'
// },
// 设置的是请求参数
data: { shareUrl: daurl },
// 用于设置响应体的类型 注意 跟 data 参数没关系!!!
dataType: 'json',
// eslint-disable-next-line space-before-function-paren
success: function (res) {
// 一旦设置的 dataType 选项,就不再关心 服务端 响应的 Content-Type 了
// 客户端会主观认为服务端返回的就是 JSON 格式的字符串
// res 为后端响应返回的内容 具体需要根据你项目中后端返回的内容为主!!!
url = res.data.url
wx.config({
debug: false, // 开启调试模式,
appId: res.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareAppMessage', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
wx.ready(function () {
wx.hideMenuItems({
menuList: [
'menuItem:copyUrl',
'menuItem:openWithSafari',
'menuItem:openWithQQBrowser',
'menuItem:originPage'
] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
})
wx.onMenuShareAppMessage({
// updateAppMessageShareData
title: '', // 分享标题
desc: '', // 分享描述
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: ``,
success: function () {
/*.... doing somethings */
},
cancel: function () {
console.log('用户取消分享')
// 用户取消分享后执行的回调函数
}
})
})
}
})
}
2.其他文件引入与使用
//引入
import { shareUrl } from '@/文件存放路径/vxshare.js'
// 使用 这里最好加个异步延迟器 因为可能存在wx.config注入该当前文件分享时校验的问题
setTimeout(()=>{
//encodeURIComponent 将你的URL进行转译一下,因为微信分享出去后会带有多余用不到的参数
shareUrl(encodeURIComponent('你需要分享的URL'))
},1000)
tips:如果不知道微信JSDK使用的话,可点击微信jsdk文档进行访问查看