Vue微信公众号网页分享的示例代码
前言
今天做了个分享功能,反正挺诡异的,下面就来说一说步骤
后端使用egg.js,代码如下:
'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { const config = this.ctx.app.config.wechat_config; const url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'.replace('APPID', config.appId) .replace('APPSECRET', config.appSecret); const res = await this.ctx.curl(url, { dataType: 'json', }); console.log(res);//accesstoken if (res.data.errcode) { return; } console.log('token ' + res.data.access_token); const jsUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'.replace('ACCESS_TOKEN', res.data.access_token); const jsRes = await this.ctx.curl(jsUrl, { dataType: 'json', }); console.log('ticket ' + jsRes.data.ticket);//ticket this.ctx.app.ticket = jsRes.data.ticket; this.ctx.app.access_token = res.data.access_token; } } module.exports = AccessToken;
async getJSsdk() { const appId = this.ctx.app.config.wechat_config.appId;//appid const ticket = this.ctx.app.ticket;//初始化时获得的ticket const nonceStr = Math.random() .toString(36) .substr(2, 15); const timestamp = parseInt(new Date().getTime() / 1000);//秒为单位的时间戳 let url = this.ctx.query.link; //前端的页面地址 url = decodeURIComponent(url);//解码 const string = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + url; const hash = crypto.createHash('sha1'); hash.update(string); const signature = hash.digest('hex');//生成签名 this.ctx.body = { status: true, message: '获取成功', data }; };
步骤
1.在vue项目中public目录下的index.html中引入
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2.在想分享的组件的mounted中加入如下代码:
//如果不创建meta标签分享出去的就会没有描述 var oMeta = document.createElement('meta'); oMeta.content = '随意的内容';//这里随便写 oMeta.name = 'keywords'; document.getElementsByTagName('head')[0].appendChild(oMeta); var oMeta1 = document.createElement('meta'); oMeta1.content = '随意的内容';//这里随便写 oMeta1.name = 'description'; document.getElementsByTagName('head')[0].appendChild(oMeta1);
3.initJSSDK方法体:
function initJSSDK() { let wechaturl = window.location.href.split('#')[0];//单页应用就获取#前面的东西 let link = encodeURIComponent(wechaturl); const jssdk = await getJSSDK(link); //给后端接口传过去当前页面的地址,注意这个地址要配置在js安全域名里 wx.ready(() => { let shareData = { title: this.detail.title, desc: this.detail.summary, link: location.href, //必须是js安全域名下的地址(分享出去的没有图片显示请检查这里的link参数) imgUrl: window.wechatImg,//随意地址的图片都行,最好是jpg的,经测试无图片大小约束 success: function () { console.log(1); }, cancel: function () { console.log(2); } }; wx.onMenuShareAppMessage(shareData);//分享给好友 wx.onMenuShareQQ(shareData);//分享给手机QQ wx.onMenuShareQZone(shareData);//分享到QQ空间 wx.onMenuShareTimeline(shareData);//分享到朋友圈 }); wx.error(function (res) { console.log(res); }); wx.config({ debug: true, appId: jssdk.appId, // 必填,公众号的唯一标识 timestamp: jssdk.timestamp, // 必填,生成签名的时间戳,精确到秒(后端返回) nonceStr: jssdk.nonceStr, // 必填,生成签名的随机串(后端返回) signature: jssdk.signature, // 必填,签名(后端返回) jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone'] }); }
常见问题
无效的签名:可能是前端encode地址过去后,后端忘记解码了,也有可能是因为前端地址传错了或者没有encode就传过去了,后端签名算法出错的机率比较小.
还有可能是后端的ticket失效了(这个在开发过程中机率比较小)
无效的domain:前端给后端传的地址可能没有配置在js安全域名中
jssdk版本就用上面的1.4版本,同样的代码用了新版的就直接不行了,也没有任何报错。
暂时没有发现网上所说的苹果会出现问题。经测试都是好的
到此这篇关于Vue微信公众号网页分享的示例代码的文章就介绍到这了,更多相关Vue公众号网页分享内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12