简单粗暴帮你用vue实现微信分享

最近在用vue搞项目,碰到一个问题就是微信分享,我们知道微信分享会自动获取页面的title标签做为我们的分享标题,但是分享的详细描述和图标呢?如果需要自定义,我们就需要调取微信分享接口  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

无论是pc端,webapp的分享其实就是分享网页地址,那么在微信浏览器内如何自定义自己的分享页面标题,描述和图标呢?步骤如下

1.首先安装微信js-sdk,针对vue我们就采用npm的安装形式,npm install weixin-js-sdk,在main.js中引入weixin-js-sdk

2.接下来就是设置微信的config,开启debug模式可以直接在pc端打印日志,在微信客户端alert出来,还是很方便的

简单粗暴帮你用vue实现微信分享_第1张图片
获取微信参数

可以看得出来,所有的参数都需要后台返回,其实我们也可以前端获取,但是毕竟不安全,好吧,科普下如何简单快速地获取到这些参数,当然微信官方有文档获取,但是呢比较麻烦,今天就告诉大家如何快速地获取到这些参数,如下是我写的后端代码

服务端:

服务端我是用node.js写的,当然了接口没有加密,不过不影响使用

简单粗暴帮你用vue实现微信分享_第2张图片
获取微信配置参数并返还

npm安装wechat_interaction_jsapi,是不是特别简单,而且不用担心过期时间,我们可以看到这个插件生成的过期时间如下,足够用了吧

过期时间

客户端实例如下:

简单粗暴帮你用vue实现微信分享_第3张图片
客户端实例

注意了,下边分享的设置一个都不能错,否则设置失败

效果图

简单粗暴帮你用vue实现微信分享_第4张图片
效果图

如果帮到了您,麻烦点个赞,谢谢!

你可能感兴趣的:(简单粗暴帮你用vue实现微信分享)