美文网首页
Vue中使用jssdk

Vue中使用jssdk

作者: hello_web_Front | 来源:发表于2020-10-19 21:53 被阅读0次

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只需要调用一次就可以了的。

相关文章

  • Vue中使用jssdk

    1.微信jssdk的使用如果写过微信小程序你会发现,小程序里面的方法用起来是很舒服的,直接通过Api调用就可以了,...

  • 微擎模块使用VUE开发解决JSSDK回调问题

    微擎模块开发过程中,为了提高用户体验,我们团队都是使用VUE进行开发,当使用JSSDK分享、扫码、支付时回调地址是...

  • Vue 应用中结合vux使用微信 jssdk

    vux微信分享说明 分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置。 先确认已经满足使用jssdk的...

  • 单图base64 上传七牛云

    1:需求:在微信公众号中使用vue来构建了一个单页应用网站,其中使用微信JSSDK来获得图片的base64(没找到...

  • vue项目使用微信公众号支付

    使用jssdk调用微信支付,具体查看开发文档; 使用的vuex,在mutations中 在支付页面中commit ...

  • 小程序 web-view 实践

    技术栈:vue-cli 3 + typescript + weixin-js-sdk 一、jssdk 引入 1.1...

  • Vue 应用中使用微信 jssdk

    关于微信jssdk 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力...

  • create-react-app

    1.引入微信jssdk 安装: 使用:

  • VUE路由的简单使用

    VUE中如何使用路由? 路由的基本使用 在html中 引入vue 和 vue-router 包 创建vue对象并将...

  • 本期小结(一)

    vue★ Vue中引入jQuery vue使用element-ui vue的v-cloak使用 vue动态组件 v...

网友评论

      本文标题:Vue中使用jssdk

      本文链接:https://www.haomeiwen.com/subject/lvwlmktx.html