专栏首页林澈思的茶在Vue2中实现微信分享功能

在Vue2中实现微信分享功能

公众号配置

如果你们的公众号有专人保管,那么跟他说把安全域名加一下,安全域名用于微信的验证,没有这一步操作,下面的都白搭。比如我们的测试公众号,绑定的就是我们测试服务器的域名。同理,生产也是如此。


后端配置

要想使用微信的JS-SDK功能,需要生成签名,配合appId才能使用,这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名,反正你找后端同学就对了。


前端配置

终于轮到我们前端上场了,啰嗦了那么多,下面让我们正式起飞~┏ (゜ω゜)=☞

安装微信JS-SDK

首先我们通过npm 安装 微信的js-sdk,当然你也可以在index.html页面中直接加<script>引用,哪种方式都可以。

  1. npm -install weixin-js-sdk --save

Shell

判断是否为微信浏览器

既然我们要用,我们就搞一个通用的mixins嘛,也方便以后在不同的项目中调用。那么,新建一个wxapi.js吧,然后引入之前安装的JS-SDK。既然用微信的JS-SDK,那么肯定非微信浏览器就无法访问该页面啦,所以我们要先写一个判断浏览器的方法。

// wxapi.js
importwx from'weixin-js-sdk'
constwxApi= {
/**
* [isweixin 判断是否微信浏览器]
*/
isweixin() {
constua=window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true
} else {
this.$router.push({path: '/wxkj/isnotWechat'})
return false
}
}
}
export defaultwxApi

JavaScript

微信JS-SDK初始化

接着,我们写一个微信初始化的方法,用来初始化微信的JS-SDK。该方法接受一个参数,用于传入后续调用的微信功能(如分享,获取地理位置等等)。因为微信的签名等数据是由后端同学生成的,所以我们需要通过ajax来获取这些数据。这里的this.ajaxGet换成你们自己的ajax方法就好啦。

在获取到后端同学的数据之后,我们调用wx.config方法,来校验是否可以使用微信的JS-SDK。注意,jsApiList是用来配置可以注册哪些微信功能的,这里举例了2个,一个是分享给朋友,一个是分享到朋友圈,其他功能请到微信JS-SDK文档中自行查看。之后我们调用wx.ready方法,用来处理验证成功后的事件。

isweixin() {
...
},
// 这里接着上面的代码
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister(callback) {
let data= {params: {reqUrl:window.location.href}}
this.ajaxGet(false, '/wxpl/cfgInfo',data).then((res) => {
wx.config({
debug: false, // 开启调试模式
appId:res.appId, // 必填,公众号的唯一标识
timestamp:res.timestamp, // 必填,生成签名的时间戳
nonceStr:res.noncestr, // 必填,生成签名的随机串
signature:res.signature, // 必填,签名,见附录1
jsApiList: [
'onMenuShareAppMessage', // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
'onMenuShareTimeline' // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
}).catch((error) => {
console.log(error)
})
wx.ready((res) => {
// 如果需要定制ready回调方法
if (callback) {
callback()
}
})
}

JavaScript

微信分享到朋友圈

初始化之后,我们接着往下写,这里拿分享到朋友圈举例。写一个方法,用来调用微信的分享朋友圈。因为不同的页面分享的内容不一样,成功或者失败后的回调函数也不同,所以我们这里做个简单配置。传一个参数。

// 接上面的代码
/**
* [ShareTimeline 微信分享到朋友圈]
* @param {[type]} opstion [分享信息]
* @param {[type]} success [成功回调]
* @param {[type]} error [失败回调]
*/
ShareTimeline (opstion) {
wx.onMenuShareTimeline({
title:opstion.title, // 分享标题
link:opstion.link, // 分享链接
imgUrl:opstion.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
opstion.success()
},
cancel() {
// 用户取消分享后执行的回调函数
opstion.error()
}
})
}

JavaScript

页面中调用微信功能

通过以上代码,我们封装了一个简单的微信JS-SDK功能,那么在页面中如何调用这些封装好的方法呢。首先我们编写一个方法用来作为wx.ready中的callback,然后在通过配置opstion的方式,将自定义信息注入到之前封装好的通用分享方法中。实现随用随调,灵活配置的微信功能。

//a.vue
importwxapi from'../mixins/wxapi.js'
 
export default {
mixins: [wxapi],
mounted() {
this.wxRegister(this.wxRegCallback)
},
methods: {
/**
* [wxRegCallback 用于微信JS-SDK回调]
*/
wxRegCallback() {
this.wxShareTimeline()
},
/**
* [wxShareTimeline 微信自定义分享到朋友圈]
*/
wxShareTimeline() {
let opstion= {
title: '胡小呆&曹小萌的情侣博客', // 分享标题
link: 'http://www.jzdlink.com', // 分享链接
imgUrl: 'http://www.jzdlink.com/wordpress/wp-content/themes/wordpress_thems/images/lib/logo.png'// 分享图标
success: function () {
alert('分享成功')
},
error: function () {
alert('分享失败')
}
}
// 将配置注入通用方法
this.ShareTimeline(opstion)
},
}
}

JavaScript

微信授权

微信授权的功能其实我们前端只需要存储好用户的uid和token即可。验证的逻辑一般都是后端那边进行的。授权的方法同样归类为微信操作,所以代码也封装在wxapi.js中,可以参考如下代码:(hostName是当前域名,因为开发,测试,生产的域名不一样,所以做了变量配置)

/**
* [isWxAuth 微信授权]
*/
isWxAuth() {
let localUid=localStorage.getItem('localUid')
let localToken=localStorage.getItem('localToken')
if (!localToken) {
let token= this.$route.query.token
let uid= this.$route.query.uid
if (token) {
localStorage.setItem('localToken',token)
localStorage.setItem('localUid',uid)
} else {
// 将url编码后传给后端,解决微信过滤Vue hash模式 #被过滤的问题
varu=encodeURIComponent(window.location.href)
window.location.href=hostName+ '/wxpl/oauth?forwardUrl=' +u
}
}
}

JavaScript

思路也很简单,每次进入页面的时候就会判断本地存储中是否有token,如果没有,去url中查看是否带有token参数,有的话存到本地。没有的话将当前页面地址编码后传给后端,进行授权。

但是这样做,token过期后,页面一直取过期的token,就会导致授权一直失败。所以我们还需要在token过期之后,将旧的token从本地存储中删掉,更新为新的token。我是这么做的:(因为调用后端接口需要我将token传给他们验证是否过期,所以后端会返回一个字段告诉是否需要重新授权)

这里有一点需要注意: 就是如果当前url中带着参数,比如www.jzdlink.com/#hello?uid=200&token=abcdefg这种形式,如果我们还是取window.localtion.href,授权的就是www.jzdlink.com/#hello?uid=200&token=abcdefg这个页面,和www.jzdlink.com/#hello是不同的,出现的问题就是页面一直在不断的往url后面加uidtoken,一直跳授权,导致死循环。

所以我这里用域名 + 路径 + vue的path来拼装url,这样就可以解决发送给后端的url错误的问题。

// 通用ajax方法中
...
// 微信token是否过期 这里的字段是后端返回的,如果为true就说明token已经过期
if (response.data.invalid_auth== 'true') {
localStorage.removeItem('localToken')
localStorage.removeItem('localUid')
varu=encodeURIComponent(hostName+window.location.pathname+ '#' + this.$route.path)
window.location.href=hostName+ '/wxpl/oauth?forwardUrl=' +u
} else {
resolve(response.data)
}
...

JavaScript


踩坑分享

1.签名验证失败

解决思路:(1)先查看是否是因为字母大小写等原因造成的。(2)之后查看是否因为路由的变化导致签名校验失效。用小呆的这种方式可以避免因路由变化导致校验失败的问题。因为每次路由变化后都会重新生成签名进行校验。

2.分享出去的URL被微信插入其他字符

比如我分享的url是www.gxuzf.com/#hello,但是实际在微信中打开的链接是www.gxuzf.com?from=xxxxxxxx/#hello

解决思路:暂无。目前测试,加入微信的参数之后,页面可以正常打开。

3.hash模式,微信授权会将url中的#过滤掉,导致授权的token和url不一致

解决思路:将url进行转码后在传给后端,即可解决。

4.授权url错误导致的一直重复授权的死循环

解决思路: url不用window.location.href,采用拼装方式处理

好啦,到这里这篇笔记就写完了,如果对你有帮助,就给本文点个赞吧。如果能把博客收藏起来时不时转转,那就更好啦~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress回复可见的实现方法

    WordPress回复可见的功能,会有一些问题,比如使用多说导致回复后,不能立刻显示内容,,但是如果是用WordPress自带评论模块的话,那么这个功能,可谓是...

    赵帆同学GXUZF.COM
  • 宝塔面板的端口相关命令

    宝塔面板的端口给改了怎么办?出于安全的需要,很多站长在使用宝塔面板时,会将默认端口改掉,然而改完很多人可能记不住当时改成了什么,这个时候我们就需要找回端口。

    赵帆同学GXUZF.COM
  • 如何不让别人复制自己的网站文章

    有很多人看见好的文章图片,就直接复制粘贴拿走,一点都不改动的就发到自己的网站或者平台上,还不留下原网站的转载信息,还说着原创。对于转载这事来说,我们是很赞同的,...

    赵帆同学GXUZF.COM
  • 微信小程序的王者时代

    对于小程序的诞生,我们大家都不是很陌生了。在不久前的《财富》论坛上,马化腾是这么说的:“......我们认为这是未来,以后计算机的世界没有APP,只有不断浮动的...

    企鹅号小编
  • 微信小程序:小程序申请开通支付功能的步骤

    随着微信小程序越来越受欢迎,微信小程序的开发越来越火,尤其是初创型公司需要开发自己的小程序,就需要知道微信小程序开发的一套流程,而且商家在运营小程序的时候开通支...

    三掌柜
  • 成了腾讯“增量”利器,微信小程序的春天真来了?

    小程序在朋友圈、公众号、微信群、个人号之间,成了一个连接器,把这个封闭的圈子生态造活了。微信通过守住用户的时间,让微信从简单的社交产品转向成为链接人的一个全功能...

    深圳秀思科技有限公司
  • 小程序 | 创造5000亿+的市场!2019微信会有哪些“大动作”?

    2019微信公开课PRO正式启动!2018年末,微信更新7.0大版本,微信进入了快跑阶段。

    云蚁cloudant
  • 这是一次关于内容分发方式的博弈,社交赢,还是 AI 赢?

    昨天微信既 2014 年以来,又一次大版本的更新。微信作为国民级的超级 App ,每一次微小的更新都能引起热烈反响和讨论,更何况昨天是一次大版本的更新迭代呢!昨...

    非著名程序员
  • 解决6.5.16及以上版本微信内部M页不能唤起APP

    最近微信唤起app的数据急速下降,产品同学告诉我们大事来了,微信不能唤起Android的App了!!

    静默加载
  • 微信已到中年,好在一点都不油腻

    今天,一年一度的微信公开课Pro召开,全国各地的“微信教”信徒奔赴广州上张小龙教主的大课,了解微信生态的最新动态。 如你所料,张小龙将最多的篇幅给了小程序;如你...

    罗超频道

扫码关注云+社区

领取腾讯云代金券