最近在用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出来,还是很方便的
可以看得出来,所有的参数都需要后台返回,其实我们也可以前端获取,但是毕竟不安全,好吧,科普下如何简单快速地获取到这些参数,当然微信官方有文档获取,但是呢比较麻烦,今天就告诉大家如何快速地获取到这些参数,如下是我写的后端代码
服务端:
服务端我是用node.js写的,当然了接口没有加密,不过不影响使用
npm安装wechat_interaction_jsapi,是不是特别简单,而且不用担心过期时间,我们可以看到这个插件生成的过期时间如下,足够用了吧
客户端实例如下:
注意了,下边分享的设置一个都不能错,否则设置失败
效果图
如果帮到了您,麻烦点个赞,谢谢!