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. nginx ssl 卸载功能 第八章

    一 .证书自签发和给web 服务签发证书 .ssl 证书加密文件 ****************************** 建立私有CA openCA openssl 证书申请及签署步骤 .生成证 ...

  2. Html Link 标签

    Html Link 标签 Link 是 HTML Head 内部标签 <html> <head> <!-- link标签:rel="shortcut icon& ...

  3. UI自动化(十二)appium

    windows不可以测试iosmac 是可以测试Android ios appium cmd 下装的是appium的服务端appium-desktop 是定位元素的工具,同时自带一个appium服务端 ...

  4. 3、zabbix配置入门

    Zabbix模板 zabbix组件:    zabbix-server    zabbix-database    zabbix-web    zabbix-agent    zabbix-proxy ...

  5. js 数组原型

    Array.isArray( Array.prototype ) // A. true // B. false // C. error // D. other 答案是A. 其实 Array.proto ...

  6. Docker安装Tomcat镜像并部署web项目

    一.安装Tomcat 1.查找Docker Hub上的tomcat镜像 docker search tomcat 2.拉取官方的镜像 docker pull tomcat 等待下载完毕,需要一些时间. ...

  7. 利用iframe实现无刷新提交

    服务器里边:

  8. JVM垃圾回收(一)- 什么是垃圾回收

    什么是垃圾回收? 垃圾回收是追踪所有正在被使用的对象,并标注剩余的为garbage.这里我们先从JVM的GC是如何实现的说起. 手动内存管理 在开始介绍垃圾回收之前,我们先复习一下手动内存管理.它是指 ...

  9. iis7.0 win7如何修改默认iis端口号

    iis7与iis6的设置方法要详细很多.所以,在更改设置上,iis7反而显得更复杂.iis作为本地网页编辑环境,占用80端口都是理所当然的.但是,作为网页调试的技术人员,通常本地都会安装iis.Apa ...

  10. java连接Access数据库的两种方法

    where ziduan  in(select  ziduan from  table) 嵌套 ResultSet rs = pst.executeQuery();List list = new Ar ...