使用vux+ajax,Vue 应用中结合vux使用微信 jssdk的方法

vux微信分享说明

分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。

先确认已经满足使用jssdk的要求再进行开发。

引入

在 main.js 中全局引入：

console.log(Vue.wechat) // 可以直接访问 wx 对象。

组件外使用

考虑到你需要在引入插件后调用config方法进行配置，你可以通过 Vue.wechat 在组件外部访问wx对象。

jssdk需要请求签名配置接口，你可以直接使用 VUX 基于 Axios 封装的 AjaxPlugin

Vue.http.get('/api',({data}) => {

Vue.wechat.config(data.data)

})

组件中使用

那么之后任何组件中都可以通过 this.$wechat 访问到 wx 对象。

我所使用的是组件外定义，组件内调用

引入对应的文件

插件

{

// 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/img/share.png':obj.imgUrl;

var debug = obj.debug==true?true:false;

}else{

alert('请传分享参数');

}

//微信分享

Vue.http.get("http://获取wx_token地址").then(response => response.json()).then(data => {

// console.log('微信微信',data)

var wxdata = data;

wxdata.debug = debug;

wxdata.jsApiList= [

// 所有要调用的 API 都要加到这个列表中

'onMenuShareTimeline',//分享到朋友圈

'onMenuShareAppMessage',//分享给朋友

'onMenuShareQQ',//分享到QQ

'onMenuShareQZone',//分享到QQ空间

'onMenuShareWeibo'//分享到腾讯微博

];

Vue.wechat.config(wxdata);

Vue.wechat.ready(function () {

//分享到朋友圈

Vue.wechat.onMenuShareTimeline({

title:title,// 分享标题

link: link,// 分享链接

desc: desc,// 分享描述

imgUrl:imgUrl,// 分享图标

success: function () {

callback && callback();

// 用户确认分享后执行的回调函数

},cancel: function () {

// 用户取消分享后执行的回调函数

}

});

//分享到朋友

Vue.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

Vue.wechat.onMenuShareQQ({

title: title,// 分享图标

success: function () {

// 用户确认分享后执行的回调函数

callback && callback();

},cancel: function () {

// 用户取消分享后执行的回调函数

}

});

//分享到QQ空间

Vue.wechat.onMenuShareQZone({

title: title,cancel: function () {

// 用户取消分享后执行的回调函数

}

});

//分享到腾讯微博

Vue.wechat.onMenuShareWeibo({

title: title,cancel: function () {

// 用户取消分享后执行的回调函数

}

});

})

})

}

组件内调用

函数的js路径'

export default {

name:'Home',data() { //选项 / 数import { ViewBox } from 'vux'

export default {

name:'Home',data() { //选项 / 数据

return {

}

},methods: { //事件处理器

},components: { //定义组件

},created() { //生命周期函数

wxShare({

title: '分享标题',// 分享标题

desc: '分享描述',// 分享描述

link: window.location.href,// 分享链接

imgUrl: 'http://图片地址share.png',// 分享图标

// debug:true

},function(){//分享成功后的回调函数

});

}

}

以上这篇Vue 应用中结合vux使用微信 jssdk的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。