第一步:安装wxjssdk
npm i weixin-js-sdk -S
第二步:在需要使用的组件页面导入(建议在main.js中导入)
import wx from 'weixin-js-sdk';
第三步:通过后台接口拿到签名信息
this.$https.getWx({
pageURL: window.location.href.split("#")[0]//通过当前页面地址生成对应签名
}).then(res=>{
try{
if(res.data.result=='success'){
//进行微信授权。
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.wx.appId, // 必填,公众号的唯一标识
timestamp: res.wx.timestamp, // 必填,生成签名的时间戳
nonceStr: res.wx.nonceStr, // 必填,生成签名的随机串
signature: res.wx.signature,// 必填,签名
jsApiList: [
'chooseImage',
'uploadImage'
]// 必填,需要使用的JS接口列表
});
};
}catch(e){console.log(e)}
});
使用选择图片api实例:
upLoadImg(qrcodeType){
wx.ready(()=>{
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
wx.uploadImage({
localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
//拿到微信服务端id后传递给后台
this.getImg(serverId);
}
});
}
});
})
}