main.js引入

import {WechatPlugin} from 'vux'

Vue.use(WechatPlugin)

公共的jswxShare.js

import Vue from 'vue'
import {
vm
} from '@/main'
//微信分享
const wxShare = (obj, callback) => {
// console.log(obj,callback);
function getUrl() {
var url = window.location.href;
var locationurl = url.split('#')[0];
//console.log(locationurl); return locationurl;
}
if (obj) {
var title = obj.title == undefined || obj.title == null ? '集朵' : obj.title;
var link = obj.link == undefined || obj.link == null ? window.location.href : obj.link;
var desc = obj.desc == undefined || obj.desc == null ? '集朵' : obj.desc;
var imgUrl = obj.imgUrl == undefined || obj.imgUrl == null ? 'src/assets/images/logo@3x.png' : obj.imgUrl;
var debug = obj.debug == true ? true : false;
} else {
alert('请传分享参数');
} //微信分享
vm.$FormData.post(后台接口地址, {
url: getUrl()
}).then(res => {
var data = res.data.data
if (res.data.error_code == 0) {
let wxdata = {
debug: debug,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'onMenuShareTimeline', //分享到朋友圈
'onMenuShareAppMessage', //分享给朋友
'onMenuShareQQ', //分享到QQ
'onMenuShareQZone', //分享到QQ空间
'onMenuShareWeibo' //分享到腾讯微博
]
}
vm.$wechat.config(wxdata); vm.$wechat.ready(function() {
//分享到朋友圈
vm.$wechat.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接
desc: desc, // 分享描述
imgUrl: imgUrl, // 分享图标
success: function() {
callback && callback();
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
//分享到朋友
vm.$wechat.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
// 用户确认分享后执行的回调函数
callback && callback();
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
//分享到QQ
vm.$wechat.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
callback && callback();
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
}); //分享到QQ空间
vm.$wechat.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
callback && callback();
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
}); //分享到腾讯微博
vm.$wechat.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
callback && callback();
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
}); })
} })
}
export {
wxShare
}     

组件中的应用

import {
wxShare
} from "@/assets/js/wxShare.js"
created() {
wxShare({
title: '', // 分享标题
desc: '', // 分享描述
link: window.location.href, // 分享链接
imgUrl: ‘’, // 分享图标
debug: true
}, function(res) { //分享成功后的回调函数 });
},

  

vue 使用vux封装的微信分享的更多相关文章

  1. vue history模式下的微信分享

    // 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...

  2. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  3. 在vue中使用weixin-js-sdk自定义微信分享效果

    在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...

  4. vue项目history模式下微信分享相关问题

    import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...

  5. Vue+Vue-router微信分享功能

    在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案. vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn. ...

  6. vue 项目如何使用微信分享接口

    首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/w ...

  7. [转]Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...

  8. JS微信分享不好写?来封装一下

    微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...

  9. Vue单页式应用(Hash模式下)实现微信分享

    前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发 ...

随机推荐

  1. Dockerfile的HEALTHCHECK指令

    容器实例的状态虽然是up,但不能保证里面的进程一定是监控的.我门可以借助HEALTHCHECK指令来做监控状态检查 HEALTHCHECK指令有两种形式: HEALTHCHECK [OPTIONS] ...

  2. Docker Compose 配置文件常用指令

    Docker Compose 配置文件常用指令 YAML文件格式及编写注意事项 YAML是一种标记语言很直观的数据序列化格式,可读性高.类似于XML数据描述语言,语法比XML简单的很多. YAML数据 ...

  3. centos etcd 启动失败

    chmod -R 777 /var/lib/etcd systemctl daemon-reload cat /etc/systemd/system/etcd.service " [Unit ...

  4. day05数据类型,数字类型,字符串类型,字符串的操作方法,列表类型的操作方法,可变类型与不可变类型

    复习 ''' 流程控制 1.顺序结构.分支结构.循环结构 2.if分支结构 if 条件: 代码块 elif 条件: 代码块 else: 代码块 # 可以被if转换为False:0 | '' | Non ...

  5. Mac OS X 避免产生临时文件 .DS_Store

    参考: 删除Mac中所有 .DS_Store 隐藏文件 Mac OS X 避免产生临时文件 .DS_Store .DS_Store 隐藏文件保存针对目录的特殊信息和设置配置,例如查看方式,图标大小以及 ...

  6. Linux下postgres9.4 版本的单机版安装小笔记

    1.添加RPMyum install https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7-x86_64/pgdg-redha ...

  7. leecode第一百五十五题(最小栈)

    class MinStack { public: stack<int> cur_stack; stack<int> cur_min;//用来存储最小值的栈 int min_nu ...

  8. Set集合中的treeSet问题:cannot be cast to java.lang.Comparable;

    使用TreeSet保存自定义对象时, 必须让定义对象的类实现Comparable接口,并重写compareTo()方法 否则报 实体类User:cannot be cast to java.lang. ...

  9. 精析python中的装饰器、生成器

    装饰器: 在编程时,要遵循一个原则,就是开放-封闭原则. 在不破坏原函数的情况下,要想对原函数进行一些修饰,那么这里就要用到装饰器. 例如:你完成了一些用函数写成的项目,此时公司正在年度考核,你需要给 ...

  10. jquery获取选中值

    1.获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 2.获取select被选中项的文本 :var item = $( ...