Vue中使用jssdk

1.微信jssdk的使用
如果写过微信小程序你会发现，小程序里面的方法用起来是很舒服的，直接通过Api调用就可以了，但是微信公众号不是小程序，所以如果要使用微信的功能，那么你就必须要为当前的url注入权限，确保是安全的，这样才可以正常的使用它的功能。
先附上地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
这里的一些配置项，就不需要我们前端人员去管了，都是由后台的人员去弄了，我们前端人员主要做的就是把当前页面的url传递给后台，从而后台人员拿到我们的url，返回给我们
** appId，nonceStr，signature， timestamp** 这四个参数，然后调用wx.config进行配置，还需要在jsApiList中写我们需要的哪些权限， 如果配置成功的话 在微信网页开发的控制台是可以看到当权注入了api功能权限。

npm install weixin-js-sdk -S
sdk前端代码：

import wx from'weixin-js-sdk'

import service from'../request/request'

async function wxconfig(){

const url = (window.location.href.split('#')[0]);

    service.get(`wx/get\_signature?url=${url}`).then(({result})=>{

        wx.config({

            appId: result.appId,

            nonceStr: result.nonceStr,

            signature: result.signature,

            timestamp: result.timestamp,

            debug:true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

            jsApiList: [ // 必填，需要使用的JS接口列表

                                        'chooseImage',
                                        
                                        'scanQRCode',
                                        
                                        "getLocation",
                                        
                                        "getNetworkType",
                                        
                                        "openLocation",
                                        
                                        "uploadImage",
                                        
                                        "downloadImage",
                                        
                                        "getLocalImgData"

            ]

});
}
export default wxconfig;

然后在我们的App.vue的mounted里面调用一下就可以了 ，同一个url只需要调用一次就可以了的。

 

 转自：https://www.jianshu.com/p/6eb334fd8730