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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
smarty简单入门实例
2014/11/28 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
React优化子组件render的使用
2019/05/12 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Django实现文件上传和下载功能
2019/10/06 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
2014年自愿离婚协议书范本
2014/09/25 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技