vue实现微信分享功能


Posted in Javascript onNovember 28, 2018

本文实例为大家分享了vue实现微信分享功能的具体代码,供大家参考,具体内容如下

1.引入微信js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.从后台获取签名并分享

fenxiangFun(){//详情分享
 var that = this;
 this.$http({
 url:this.changeData() + '/member/weChatShare',
 method: "post",
 params: {
 url : window.location.href.split('#')[0]
 }
 }).then(function(res){
 // console.log(res)
 wx.config({
 //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: res.data.appId, // 必填,公众号的唯一标识
 timestamp: res.data.timestamp, // 必填,生成签名的时间戳
 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
 signature: res.data.signature,// 必填,签名
 jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填,需要使用的JS接口列表
 });
 
 wx.ready(function(){
 // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
 //分享给朋友
 wx.onMenuShareAppMessage({
 title: that.projectDetail.project_name, // 分享标题
 desc: '卖铺宝', // 分享描述
 link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: that.projectPic[0], // 分享图标
 type: '', // 分享类型,music、video或link,不填默认为link
 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
 success: function () {
  // 用户点击了分享后执行的回调函数
 }
 });
 
 //分享到朋友圈
 wx.onMenuShareTimeline({
 title: that.projectDetail.project_name, // 分享标题
 link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: that.projectPic[0], // 分享图标
 success: function () {
  // 用户点击了分享后执行的回调函数
 }
 });
 });
 wx.error(function(res){
 // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
 });
 }.bind(this)).catch(function(err){
 console.log("商店详情页面错误:",err)
 });
},

3.ios兼容性问题

beforeRouteEnter (to, from, next) {
 var u = navigator.userAgent;
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 // XXX: 修复iOS版微信HTML5 History兼容性问题
 if (isiOS && to.path !== location.pathname) {
 // 此处不可使用location.replace
 location.assign(to.fullPath)
 } else {
 next()
 }
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
微信小程序实现简单评论功能
Nov 28 #Javascript
微信小程序实现省市区三级地址选择
Jun 21 #Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 #Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 #Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 #Javascript
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
php二分查找二种实现示例
2014/03/12 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
python中的列表推导浅析
2014/04/26 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python杀死一个线程的方法
2015/09/06 Python
浅述python中深浅拷贝原理
2018/09/18 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
小区门卫岗位职责
2013/12/31 职场文书
报到证丢失证明
2014/01/11 职场文书
致全体运动员广播稿
2014/02/01 职场文书
服务口号大全
2014/06/11 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
优秀教研组申报材料
2014/12/26 职场文书
个人总结与自我评价
2015/02/14 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS