vue开发微信公众号---JS-SDK授权以及api的使用方式_公众号jssdk api文档(1)

经过项目环境的搭建以及项目配置,现在项目已经启动了,然后我们就可以进行项目的开发了。然而在开发的过程中我需要使用微信的功能接口。如:调取扫码功能。这个时候我们就需要使用JS-SDK
官方说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
然而现实是:我们即便看了这个文档,但实际操作上还是会出不少的问题,所以接下来便记录一下当前所遇到过的问题以及自己的使用过程。

第一步:阅读官方JSSDK的使用步骤

  • 步骤一解读:所谓的绑定域名就是在测试号中绑定内网映射工具赠送的域名
    在这里插入图片描述
  • 步骤二解读:引入js文件,这里支持使用直接在html文件中使用<script 标签的方式引入,也支持使用npm。 由于我使用的vue脚手架所以使用的npm方式。如下:
npm install weixin-js-sdk --save
// 第一种方式:
//在组件中引入
var wx = require('weixin-js-sdk')
//然后使用即可
wx.xxx({})
// 第二种方式:
// 在main.js中引入并且全局注册在vue原型链上即可

看到步骤三、步骤四、步骤五我就遇到了问题,步骤三的配置数据从哪里来?

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

仔细查看文档后发现,结果内容在最底下的附录1中
在附录1中记录了js-sdk的权限签名算法,如果你是前后端分离开发的前端人员,那么请把这个任务交给后端,必须让他写接口(因为前端弄的话会出现跨域问题以及每次调用都会进行多次请求与计算严重影响性能),并且把这个附录1给他看即可。最后的结果就是他会做出一个接口出来,你只需传入一个url(当前网址的前缀部分),即可获得appId、timestamp、nonceStr、signature这四个内容。
我的前端代码参考如下:(需要给后端人员提供appId和appsecret)
------每一次使用jssdkapi的某个功能都需要走一下这个流程

 // 获取jsapi授权签名信息
 let myurl = location.href.split("#")[0];  // 传递给后端的url
 this.$axios.get("/emergency-bag-sys/api/accessToken/getWxJsapi",{params: {url: myurl}})
        .then((res) => {
          console.log("接口返回的信息", res);
          // 调起配置
          wx.config({
            debug: false, // 关闭调试模式
            appId: res.appId, // 必填,公众号的唯一标识
            timestamp: res.timestamp, // 必填,生成签名的时间戳


### ajax
1)ajax请求的原理/ 手写一个ajax请求?
2)readyState?
3)ajax异步与同步的区别?
4)ajax传递中文用什么方法?

![ajax.PNG](https://img-blog.csdnimg.cn/img_convert/2998119747171a1de5622e5b683bf705.webp?x-oss-process=image/format,png)

![前12.PNG](https://img-blog.csdnimg.cn/img_convert/159a48b54398fc38692dba63d4e1dffc.webp?x-oss-process=image/format,png)

-9WttkKii-1714372877824)]

[外链图片转存中...(img-sOEY6NnJ-1714372877825)]

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
要在Vue2中接入微信公众号JSSDK,您需要按照以下步骤进行操作: 1. 在公众号后台配置JS接口安全域名,确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库,可以通过npm进行安装: ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库: ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK,并进行相关配置: ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口,比如选择图片接口`chooseImage`: ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤,您可以根据实际需求进行相应的配置和调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值