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 相关文章推荐
Jquery动态添加输入框的方法
May 29 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
js制作提示框插件
2020/12/24 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
django ORM之values和annotate使用详解
2020/05/19 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
什么是Web Service?
2012/07/25 面试题
应届生法律求职信
2013/10/22 职场文书
专题组织生活会方案
2014/06/15 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
长城导游词400字
2015/01/30 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python办公自动化之excel的操作
2021/05/23 Python