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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
Javascript变量函数浅析
Sep 02 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Bootstrap表单布局
2016/07/19 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python中常见的数据类型小结
2015/08/29 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
费用会计岗位职责
2014/01/01 职场文书
幼师求职自荐信
2014/05/31 职场文书
校庆标语集锦
2014/06/25 职场文书
社会实践单位意见
2015/06/05 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python道路车道线检测的实现
2021/06/27 Python
MySQL创建管理KEY分区
2022/04/13 MySQL