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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
js登录弹出层特效
Mar 07 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
微信小程序实现给嵌套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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
电子商务个人自荐信
2013/12/12 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
幼儿园小班评语
2014/04/18 职场文书
法人委托书范本
2014/09/15 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书