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. Docker Kubernetes 容器更新与回滚

    Docker Kubernetes 容器更新与回滚 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...

  2. ORA-12805: parallel query server died unexpectedly ORA-04030 (sort subheap,sort key) 原因排查与解决方法

    今日,某服务器pga调整为30G,_pga_max_size调整为8G之后(原来是2G,但是one passes语句较多,性能太低),执行出现ORA-12805: parallel query ser ...

  3. ORA-12801/ORA-12853: insufficient memory for PX buffers: current 274880K, max needed 19722240K/ORA-04031解决方法

    近日,现场一台服务器在运行时出现下列异常: ORA-12801: error signaled in parallel query server P139 ORA-12853: insufficien ...

  4. Angular7 表单

    Angular 表单 input.checkbox.radio. select. textarea 实现在线预约功能 html 文件 <h2>人员登记系统</h2> <d ...

  5. 安卓内嵌H5只展示部分静态页面

    问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android  关闭硬件加速   android:hardwareAccelerated=" ...

  6. 【java】J2EE、J2SE和J2ME的区别

    本文向大家简单介绍一下J2EE.J2SE.J2ME概念及区别,J2EE,J2SE,J2ME是java针对不同的的使用来提供不同的服务,也就是提供不同类型的类库. Java2平台包括:标准版(J2SE) ...

  7. CPU高速缓存

    目录 Code: 物理结构: 缓存行Cache Line 伪共享: 概念: 解决办法: 内存屏障: 理解: 参考: Code: public class Main { static long[][] ...

  8. 【HAOI 2012】高速公路

    Problem Description \(Y901\) 高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站. \(Y901\) ...

  9. loj#3 -Copycat

    原题链接:https://loj.ac/problem/3 题目描述: --- Copycat 内存限制:256 MiB 时间限制:1000 ms 输入文件: copycat.in 输出文件: cop ...

  10. spring 配置Value常量(不支持到static上)

    spring 配置Value常量(不支持到static上) 看代码吧,语言表达有问题. package com.variflight.xzair.rest.constant; import org.s ...