标签：function vue jssdk 接口 param 调用 朋友圈 分享 wx
微信分享对于前端还是很简单的， 主要根据文档和后台返回的数据就可以了
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 配置参数的大小写问题
标签：function,vue,jssdk,接口,param,调用,朋友圈,分享,wx 来源： https://blog.csdn.net/weixin_43998944/article/details/114011027
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。