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接口安全域名".这个不多说,微信开发 ...
随机推荐
- json字符串、json对象、数组之间的转换
json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...
- Linux 进程管理、系统状态查询
1.内存给进程一段空间让他启动,让内核通过cpu来管理它. 2.ps命令查看命令信息. 用户.pid号.使用cpu.使用内存.虚拟内存.真实内存.控制台.状态.启动时间.运行时间.名 USER PID ...
- linux下如何源码编译安装vim
1. 获取源码 git clone https://github.com/vim/vim.git ~/vim cd ~/vim 2. 配置 ./configure --prefix=/home/jel ...
- git如何撤销git add操作?
答: 使用git reset <file name>即可撤销
- Canonical Coin Systems【完全背包】
问题 C: Canonical Coin Systems 时间限制: 1 Sec 内存限制: 128 MB 提交: 200 解决: 31 [提交] [状态] [命题人:admin] 题目描述 A ...
- Java this关键字 学习笔记
前言: 这篇博文就是系统的学习一下Java中的this关键字,本人对this关键字的理解知识简单的停留在对 类的成员变量进行赋值,这次所以决定系统的体会一下this 关键字 转自:https://b ...
- 将php-fpm添加至service服务
1. 使用命令:cd /usr/local/php/etc,进入etc目录,编辑 php-fpm.conf 文件,将 ;pid = run/php-fpm.pid 前面的分号去掉 2. 重启php- ...
- 剑指offer 01:二维数组中的查找
题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...
- Android外包团队——Jquery乱码解决方案
最近使用jQuery遇到中文乱码问题,其实他的中文乱码就是因为contentType没有指定编码,只需在jQuery.js中搜索’contentType’ 然后在application/x-www-f ...
- image magick 批量转换文件
一个事例: You can set the output file name via -set + some percent escapes (in this case you need the di ...