使用方法
- 按照官方文档,进行绑定域名和引入JS文件 微信文档
- 使用方法: 每个页面需要微信方法时,都在 mounted 中先调用授权
mounted() {
wxConfig(['hideMenuItems'])
wx.ready(function () {
wx.hideMenuItems({
menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone']
})
})
this.init()
}
- 授权完后,就可以调用 utils 中的其他方法了
代码库
标注: commonAjax(是我自己写发请求的方法), Toast: 提示, store: vuex定义的全局变量,在进入页面的时候,如果是苹果手机,先存储地址
/**
* 参考文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
* time: 2021/7/2
*/
import { commonAjax } from 'Ajax'
import { Toast } from 'vant'
import store from '@/store'
/**
*
* @param {Array} jsApiList 要授权的api
*/
function wxConfig(jsApiList) {
const params = { url: getWechatSignUrl() }
commonAjax.wxJSAPI(params).then((res) => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: jsApiList, // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
})
})
}
function getWechatSignUrl() {
var u = navigator.userAgent
// ios终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isIOS) {
// 这个要在页面进入的时候,进行赋值当前地址, 为了解决 wxJSApi 在ios 中 invalid signature
return store.state.public.wechatSignUrl || window.location.href
} else {
return window.location.href
}
}
/**
* 检测的JS接口列表
* @param {Array} array 需要检测的JS接口列表，所有JS接口列表见微信文档附录2,
* @returns Promise
*/
function wxCheckJSAPI(array) {
return new Promise(function (reslove, reject) {
wx.checkJsApi({
jsApiList: array,
success: function (res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
if (res.errMsg === 'checkJsApi:ok') {
reslove(res.checkResult)
} else {
Toast('微信功能失效,请重试~')
reject(res)
}
},
fail: function (error) {
Toast('当前微信版本过低')
console.error('当前微信版本不支持检查JSAPI功能')
reject(error)
}
})
})
}
/**
* 使用微信内置地图查看位置接口
* @param {number} lat 纬度，浮点数，范围为90 ~ -90
* @param {number} lon 经度，浮点数，范围为180 ~ -180。
* @param {string} name 位置名
* @param {string} address 地址详情说明
* @param {number} scale 地图缩放级别,整型值,范围从1~28。默认为最大
* @param {string} infoUrl 在查看位置界面底部显示的超链接,可点击跳转
*/
function wxOpenLocation(lat, lon, name, address, scale, infoUrl) {
wxCheckJSAPI(['openLocation']).then((res) => {
if (res.openLocation) {
wx.openLocation({
latitude: lat || 0,
longitude: lon || 0,
name: name || '',
address: address || '',
scale: scale || 15,
infoUrl: infoUrl || ''
})
} else {
Toast('当前微信版本过低')
console.error('当前微信版本不支持查看地图')
}
})
}
/**
* 关闭浏览器窗口
*/
function wxCloseWindow() {
wxCheckJSAPI(['closeWindow']).then((res) => {
if (res.closeWindow) {
wx.closeWindow()
} else {
Toast('当前微信版本过低')
console.error('当前微信版本不支持关闭功能')
}
})
}
/**
* 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
* @param {Object} obj { title,desc,link,imgUrl }
* @param {*} cb 成功后回调
*/
function wxShareFriend(obj, cb) {
wxCheckJSAPI(['updateAppMessageShareData']).then((res) => {
if (res.updateAppMessageShareData) {
wx.updateAppMessageShareData({
title: obj.title || '友家福利社', // 分享标题
desc: obj.desc || '缔造福利新生活', // 分享描述
link: obj.link || '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: obj.imgUrl || '', // 分享图标
success: function () {
// 设置成功
cb && cb()
}
})
} else {
Toast('当前微信版本过低')
console.error('当前微信版本不支持自定义分享朋友圈或qq空间')
}
})
}
/**
* 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
* @param {Object} obj { title,link,imgUrl }
* @param {*} cb 成功后回调
*/
function wxShareFriendCircle(obj, cb) {
wxCheckJSAPI(['updateTimelineShareData']).then((res) => {
if (res.updateTimelineShareData) {
wx.updateTimelineShareData({
title: obj.title || '友家福利社', // 分享标题
link: obj.link || '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: obj.imgUrl || '', // 分享图标
success: function () {
// 设置成功
cb && cb()
}
})
} else {
Toast('当前微信版本过低')
console.error('当前微信版本不支持自定义分享朋友或qq好友')
}
})
}
/**
* 聚合配置好友分享,朋友分享
* @param {*} title 标题
* @param {*} desc 描述
* @param {*} link 分享的地址 url
* @param {*} imgUrl 图片url
*/
function shareConfig(title, desc, link, imgUrl) {
// 自定义分享
// 获取微信授权权限
wxConfig(['updateAppMessageShareData', 'updateTimelineShareData'])
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
const obj = {
title: title,
desc: desc,
link: link,
imgUrl: imgUrl
}
wxShareFriendCircle(obj)
wxShareFriend(obj)
})
}
/**
* 监听系统返回键
* 正常跳转后的下一个页面关闭
*/
function monitorSysBackEvent() {
// 获取微信授权权限
wxConfig(['closeWindow'])
wx.ready(function () {
wxCloseWindow()
})
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.error(res)
})
}
export { wxConfig, wxCheckJSAPI, wxOpenLocation, wxShareFriendCircle, wxShareFriend, shareConfig, monitorSysBackEvent }
