详解vue中使用微信jssdk

首先，确保你安装了weixin-js-sdk。

如果还没有安装  npm install weixin-js-sdk

在页面中

 import wx from 'weixin-js-sdk';

接下来，就需要在mounted里面进行wx.config()了。

由于使用微信js需要进行授权配置，所以需要使用ajax请求从服务端获取微信jssdk的授权参数，ajax请求我这里使用的axios

this.axios({
 method: 'post',
 url: 'http://my.service.com/index.php/opcode/6002',
 data:{ url:location.href.split('#')[0] } //向服务端提供授权url参数，并且不需要#后面的部分
}).then((res)=>{
 wx.config({
  debug: true, // 开启调试模式,
  appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
  timestamp: res.timestamp, // 必填，生成签名的时间戳
  nonceStr: res.nonceStr, // 必填，生成签名的随机串
  signature: res.signature,// 必填，签名，见附录1
  jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
 });
})

就这样，只要服务端返回的签名没有错，就能配置成功，就可以使用微信js啦。

需要注意的是，每次url变化之后都需要重新微信jssdk授权，虽然每次授权url除去#后都是一样的，但是必须这么做，微信的机制。

还有一个需要注意的坑，使用微信自定义分享功能的时候，当分享链接中存在中文的时候，一定要进行encodeURIComponent()，否则在安卓手机上能成功自定义分享，ios手机上则不能成功分享。查阅资料后得知是安卓手机会自动encodeURIComponent，而ios不会。

以上所述是小编给大家介绍的vue中使用微信jssdk详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解vue开发中调用微信jssdk的问题

    起因 微信分享网址时无法分享图片,这个问题需要用jssdk去解决.其实开始的时候时可以看到图片的,但后来微信禁止了.所以只能使用jssdk去解决. 普通网页开发很简单,但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了.只要url发生变化就会报签名错误.其实微信官方上已经写了说明. 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

  • 微信jssdk逻辑在vue中的运用详解

    微信 jssdk 在 vue 中的简单使用 import wx from 'weixin-js-sdk'; wx.config({ debug: true, appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: [] }); wx.ready(() => { // do something... }); wx.error((err) => { // do something... }); 以上是微信官方给出的示例代码,但

  • 详解vue项目接入微信JSSDK的坑

    用于记录接入微信JS-SDK的坑,以后方便查询 第一次接入公众号微信支付.分享.定位等等的坑的时候,心里是迷茫而又恐惧.因为,听说坑特别多,后来发现自己的亲身体验到了这一点. 支付的坑 1.当前URL未注册 问题: 微信公众号H5调起支付时,点击支付按钮出现"当前页面的URL未注册"的提示. 解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调URL配置入口已于8月1日迁移至商户平台(pay.weixin.qq.co

  • 详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

    背景 手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-router)上使用history模式,在某个页面内调用微信JSSDK相关API,如扫码.分享等,使用当前页面URL总会出现签名错误(invalid signature),导致API调用失败. 问题根源 Vue-Router进行路由切换的时候,总是会操作浏览器的历史记录,从而响应页面URL变化. 在JSSD

  • Vue 应用中结合vux使用微信 jssdk的方法

    vux微信分享说明 分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置. 先确认已经满足使用jssdk的要求再进行开发. 引入 在 main.js 中全局引入: import { WechatPlugin } from 'vux' Vue.use(WechatPlugin) console.log(Vue.wechat) // 可以直接访问 wx 对象. 组件外使用 考虑到你需要在引入插件后调用config方法进行配置,你可以通过 Vue.wechat 在组件外部访问wx对象. jss

  • 详解vue中使用微信jssdk

    首先,确保你安装了weixin-js-sdk. 如果还没有安装  npm install weixin-js-sdk 在页面中 import wx from 'weixin-js-sdk'; 接下来,就需要在mounted里面进行wx.config()了. 由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数,ajax请求我这里使用的axios this.axios({ method: 'post', url: 'http://my.service.co

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • 详解VUE中的插值( Interpolation)语法

    背景分析 在传统的html页面中我们可以定义变量吗?当然不可以,那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的.当然我们可以在服务端通过定义html标签库方式,然后以html作为模板,在服务端解析也可以实现,但这样必须通过服务端进行处理,才可以做到,能不能通过一种技术直接在客户端html页面中实现呢? VUE中的插值语法 这种语法是为了在html中添加变量,借助变量方式与js程序中的变量值进行同步,进而简化代码编写.其基本语法为: <HTML元素>{{变量或js表达式}}<

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

随机推荐