vue 使用vux封装的微信分享
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封装的微信分享的更多相关文章
- vue history模式下的微信分享
// 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- 在vue中使用weixin-js-sdk自定义微信分享效果
在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...
- vue项目history模式下微信分享相关问题
import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...
- Vue+Vue-router微信分享功能
在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案. vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn. ...
- vue 项目如何使用微信分享接口
首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/w ...
- [转]Vue项目全局配置微信分享思路详解
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...
- JS微信分享不好写?来封装一下
微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...
- Vue单页式应用(Hash模式下)实现微信分享
前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发 ...
随机推荐
- ListTile
const ListTile({ Key key, this.leading, // item 前置图标 this.title, // item 标题 this.subtitle, // item 副 ...
- ★Pandas 零碎知识
1 修改属性 1.1 修改1列的类型属性: df['总金额'] = pd.to_numeric(df['总金额']) #转变dataframe的1列为数值型 1.2 多列设为数值型:(使用DataFr ...
- [C++ Primer Plus] 第7章、函数(一)程序清单——递归,指针和const,指针数组和数组指针,函数和二维数组
程序清单7.6 #include<iostream> using namespace std; ; int sum_arr(int arr[], int n);//函数声明 void ma ...
- java中什么是泛型
一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...
- 论文笔记:Improving Deep Visual Representation for Person Re-identification by Global and Local Image-language Association
Improving Deep Visual Representation for Person Re-identification by Global and Local Image-language ...
- [CodeForces 471A] MUH and Sticks
题目链接:http://codeforces.com/problemset/problem/471/A 题目数据规模1 - 9,可以用一个数组进行计数,减掉出现四次的数,看看还有几个是非零数,有一个就 ...
- 理解 Python 装饰器看这一篇就够了
讲 Python 装饰器前,我想先举个例子,虽有点污,但跟装饰器这个话题很贴切. 每个人都有的内裤主要功能是用来遮羞,但是到了冬天它没法为我们防风御寒,咋办?我们想到的一个办法就是把内裤改造一下,让它 ...
- vue进行文件下载
本文为博主原创,未经允许不得转载: 总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:aja ...
- Visual Studio 实用扩展工具
Indent Guides 为每个缩进绘制一条虚线: Highlight all occurrences of selected word 高亮相关代码: Productivity Power Too ...
- 【依赖注入】Unity和Autofac
全面理解ASP.NET Core依赖注入:https://www.cnblogs.com/jesse2013/p/di-in-aspnetcore.html MSDN:https://docs.mic ...