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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js实现的map方法示例代码
Jan 13 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
destoon复制新模块的方法
2014/06/21 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
django使用JWT保存用户登录信息
2020/04/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
MySQL数据库事务的四大特性
2022/04/20 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers