记录下vue中使用微信接口,后续用到一种功能就更新一种,养成写日记的习惯。
大神们有更好的写法的话还请分享分享~
微信接口依赖(wx-js-sdk)
安装微信js-sdk:
npm install weixin-js-sdk -S
可以增加公共sdk.js文件用于配置config校验
import wx from 'weixin-js-sdk'//微信sdk依赖
import axios from 'axios'
const jsApiList = ["hideOptionMenu",'hideMenuItems']//要用到的微信API列表
function getJSSDK(url) {
axios.post('后台获取签名接口',{
params:{
// url:encodeURIComponent(url) //和后台定义路径参数是否要编码
url:url
}
).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接口列表
})
wx.error(function (res) {
// alert("微信验证失败");
});
})
}
export default {
// 暴露JSSDK方法
getJSSDK: getJSSDK
}
使用
在需要的页面中引入
import sdk from '../../commonJS/sdk'; //引入sdk.js
import wx from 'weixin-js-sdk';
在mounted
中执行或者调用封装的方法
sdk.getJSSDK('#之前的路径地址')
wx.ready(function () {
wx.hideOptionMenu();//隐藏右上角按钮里面的功能按钮
/*wx.hideMenuItems({
menuList: [
"menuItem:share:qq",
"menuItem:favorite",
"menuItem:share:QZone",
"menuItem:share:email"
] // 指定要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
});*/
//分享给朋友(即将废弃)
/*wx.onMenuShareAppMessage({
title: 'shareTitle',
desc: 'shareDesc',
link: 'shareLink',
imgUrl:'shareImg',
trigger: function trigger(res) { },
success: function success(res) {
// alert('已分享');
},
cancel: function cancel(res) {
// alert('已取消');
},
fail: function fail(res) {
// alert(JSON.stringify(res));
}
});*/
})
关于即将废弃接口以及其他接口说明,详细 官网文档:js-sdk说明文档
可以使用 微信开发者工具 查看相关的权限信息
待更新~