vue 项目如何引入微信sdk接口的方法


Posted in Javascript onDecember 18, 2017

做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家。

安装sdk

npm install weixin-js-sdk --save

开始之前大家可以先读一读微信公众号的 接入文档 ,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,搜易就需要在每个路由地址都引入一遍。

整体步骤:

vue引入sdk的话,就是在路由组件里面的,组件生命周期的:creatd()和mounted()里面放代码。

用伪代码,熟悉一下整体的流程,要做哪些事情:

//wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
   wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表,然后这个方法才可以用 
     title: '这里是标题', // 分享标题
     desc: 'This is a test!', // 分享描述
     link: '链接', // 分享链接
     imgUrl: '图片', // 分享图标
     type: '', // 分享类型,music、video或link,不填默认为link
     dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '标题', // 分享标题
     link: '链接',
     imgUrl: '图片', // 分享图标
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
   });
 });
 wxx.error(function(res){//通过error接口处理失败验证
   // config信息验证失败会执行error函数
 });

上面的流程多看几遍,对整个流程有个概念,其中最重要的一步就是下面这个借口注入权限。

config接口注入权限

接入微信接口的最主要也是最重要一步步就是填写下面这些信息,填完这些信息之后,基本就好了。下面这些信息通常是通过后端接口来获取的。

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

获取config配置信息:

前端要获取上面那些信息,不用做太多东西,只要调后端接口就可以了。后端会把那些信息处理好,然后通过一个接口返给你这些参数。你要给后端传一个 当前路由页面的完整url ,后端就会返回上述的那些信息给你,后面就可以根据自己的需求调用相应的接口,自定义里面的东西。

坑点:url

这里要注意的就是url的问题,如果url没有正确传递,后端也会返回信息,但是签名信息会是错误的。

上面提到的完整url指的是:'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。可以通过 location.href 来获取。

注意: 如果你的vue项目,路由没有开启history 模式,也就是你的url上面包含“#”,这个时候要从后端正确获取签名,就需要 去掉url上#后面的字符 。(url去掉'#'hash部分,可用 location.href.split('#')[0] )

封装调用sdk注入:

因为要在每个路由页面都注入sdk,这个肯定要复用的,不然那么多代码,看着就头大。

我是这么做的:

因为我把axios包了一层,然后把axios接口,在main.js里面挂载到Vue实例。

vue 项目如何引入微信sdk接口的方法

然后在全局函数里面调用这个接口,然后在每个路由页面的相应组件里面调用这个函数,把当前页面的url以及其他标题、图片什么的传进去。

里面的具体步骤就不说了,最重要的是参考上面的那个流程,函数里面的东西也都是基于那个流程的。

签名校验:

当你反复确认步骤都没有问题,微信sdk注入还是签名失败的时候,这个时候你就要考虑是不是后端那边的算法有问题,可以把后端返回的签名和微信提供的JS 接口签名校验工具生成的签名对比一下,或许是后端那边算法的问题也不一定。

后话

实不相瞒,当时我做的时候就是被url这个坑了,第一次做这个东西,没有经验,折腾了好久。引入sdk并不难,重要的是那个配置信息要填写正确,然后其他的就根据实际需求来做了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 #Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 #Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 #Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
javaScript中的空值和假值
Dec 18 #Javascript
浅谈Webpack自动化构建实践指南
Dec 18 #Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
原生js实现放大镜
2017/02/20 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python更改已存在excel文件的方法
2018/05/03 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
建筑专业毕业生自荐信
2014/05/25 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
学校2014年度工作总结
2014/12/06 职场文书
大明湖导游词
2015/02/03 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android
MySQL新手入门进阶语句汇总
2022/09/23 MySQL