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

前端面试题汇总

JavaScript

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

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, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: [“scanQRCode”], // 必填,需要使用的JS接口列表
});
wx.ready(function () {
//开启扫描功能
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: [“qrCode”], // 可以指定扫二维码还是一维码,默认二者都有
success: function (resson) {
var result = resson.resultStr; // 当needResult 为 1 时,扫码返回的结果
// 拿到结果后做逻辑处理即可
},
});
});
wx.error(function (res2) {
console.log(“扫码错误信息”, res2);
});
});


最常见的问题就是 63002 无效的签名 这个错误,这个时候一定要后端人员检查接口流程是否正确。


常见错误可见文档附录5-常见错误及解决方法  
 <https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html>








### 结尾

正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/380faf45d93970257cbbb310a0801b85.webp?x-oss-process=image/format,png)

战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-B50ZNZAg-1715163870597)]

### 使用 Vue 开发微信公众号的最佳实践 #### 选择合适的框架和技术栈 为了更高效地开发微信公众号,建议采用基于 Vue.js 的框架,如 WeVue 或 Vant Weapp。这些框架专门为构建微信小程序和 H5 应用而设计,集成了最新的前端技术和最佳实践,能够显著简化开发流程并提升效率[^1]。 #### 初始化项目结构 创建一个合理的项目目录结构对于维护代码至关重要。通常情况下,推荐按照以下方式进行组织: - `src/`:源码根目录 - `assets/`: 存放静态资源文件 - `components/`: 组件库所在位置 - `pages/`: 各个页面对应的模块 - `router/`: 路由配置 - `store/`: Vuex状态管理仓库 - `utils/`: 工具函数集合 - `App.vue`: 主应用程序入口组件 - `main.js`: Webpack打包入口文件 ```javascript // main.js 示例 import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 集成必要的插件和服务 针对微信特有的功能需求,需引入相应的 SDK 和服务接口。例如,在集成微信支付时,应严格遵循官方文档指导完成相应操作,并注意解决可能出现的技术难题,比如 JSSDK 签名验证失败等问题[^2][^3]。 #### 处理常见问题与优化体验 在实际开发过程中可能会遇到各种挑战,如 iOS 平台上的分享链接异常、URL 中特殊字符被截断等情况。面对这些问题,开发者应当仔细排查原因,并采取适当措施加以修正。此外,还应注意用户体验方面的细节调整,确保应用流畅运行于不同设备之上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值