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

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等

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

前端视频资料:

// 第二种方式:
// 在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, // 必填,生成签名的时间戳
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);
});
});

自学几个月前端,为什么感觉什么都没学到??


这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。

最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。

很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。

这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。

但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。

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

还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。

所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。

,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。

所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue使用微信 JS-SDK 实现分享功能,需要完成以下步骤: 1. 获取微信公众号的 appid 和 appsecret,以及当前页面的 url。 2. 在服务器端配置好微信 JS-SDK 的权限验证,获取到 signature、timestamp 和 noncestr 等参数。 3. 在 Vue 中引入微信 JS-SDKSDK 文件,并初始化。 4. 调用微信 JS-SDK 的接口,完成分享功能。 下面是一个简单的示例代码: ```html <template> <div class="share"> <button @click="shareToWechat">分享到微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { data() { return { appId: '', timestamp: '', nonceStr: '', signature: '', imgUrl: '', shareUrl: '' } }, created() { // 获取微信 JS-SDK 配置参数 this.getWechatConfig() }, methods: { // 获取微信 JS-SDK 配置参数 async getWechatConfig() { const url = window.location.href.split('#')[0] const res = await this.$api.getWechatConfig({ url }) if (res.code === 0) { const data = res.data this.appId = data.appId this.timestamp = data.timestamp this.nonceStr = data.nonceStr this.signature = data.signature this.imgUrl = data.imgUrl this.shareUrl = data.shareUrl this.initWechatSDK() } }, // 初始化微信 SDK initWechatSDK() { wx.config({ debug: false, appId: this.appId, timestamp: this.timestamp, nonceStr: this.nonceStr, signature: this.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 配置分享信息 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) wx.updateTimelineShareData({ title: '分享标题', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) }) }, // 分享到微信 shareToWechat() { wx.chooseWXPay({ // ... }) } } } </script> ``` 在上面的代码中,我们首先通过 `getWechatConfig` 方法获取微信 JS-SDK 的配置参数,然后在 `initWechatSDK` 方法中初始化微信 SDK,并配置分享信息。最后,在 `shareToWechat` 方法中调用微信 JS-SDK 的 `chooseWXPay` 接口,实现分享功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值