wx

admin管理员组

文章数量:1323052

wx

使用方法

1. 按照官方文档,进行绑定域名和引入JS文件 微信文档
2. 使用方法: 每个页面需要微信方法时,都在 mounted 中先调用授权

  mounted() {wxConfig(['hideMenuItems'])wx.ready(function () {wx.hideMenuItems({menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone']})})this.init()}

3. 授权完后,就可以调用 utils 中的其他方法了

代码库

标注: commonAjax(是我自己写发请求的方法), Toast: 提示, store: vuex定义的全局变量,在进入页面的时候,如果是苹果手机,先存储地址

/*** 参考文档: .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 signaturereturn 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 }

本文标签： wx