使用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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
使用vux+ajax,Vue 应用中结合vux使用微信 jssdk的方法相关推荐
- php项目引入vue,怎样实现Vue项目中使用Vux
这次给大家带来怎样实现Vue项目中使用Vux,Vue项目中使用Vux的注意事项有哪些,下面就是实战案例,一起来看一下. 默认已安装vue环境 1.安装vux npm install vux --sav ...
- vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
- jquery.ajax的url中传递中文乱码问题的解决方法
jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQuer ...
- Ajax 1.0 中使用web控件调用后台方法的用法.
今天在做页面文本框审核的时候发现个Ajax 1.0 中使用web控件调用后台方法的一个不爽的地方. 把该调用方法发上来供大家参考. 首先我们创建一个MasterPage.master文件. 在页面上放 ...
- vue项目中 img标签加载失败(404)方法,@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
- vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...
- node.js/VUE项目中导出excel表格的多种实现方法(D2admin适用)
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...
- Vue项目中个人中心头像的上传方法
我们实现的时点击头像栏这一整行都可以更换头像这个功能. 我们需要使用vant组件库中的Uploader文件上传组件. 即: <van-uploader :after-read="aft ...
最新文章
- scrum看板管理产品线路图
- js 改变change方法_Linux 中改变主机名的 4 种方法 | Linux 中国
- 常见测量矩阵的MATLAB实现
- CSS3 -webkit-transition(属性渐变)
- AI自动P图:maskrcnn+inpaintting消除并修复指定区域图像
- SpringBoot2.6.1 elasticsearch7.1.5 Vue
- php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
- 转SQLSERVER 会不会自动加锁
- 矩池云怎么上传文件夹
- FlashDevelop 3.0.0 Beta2 released
- mysql查询与索引优化2
- Python如何使用生成器得到斐波那契数列
- 高级项目管理师/高项考试十大管理论文模板
- windows下.bat文件启动多个jar文件 (.bat 批量启动jar)
- springboot 过滤器
- setTimer()函数详解
- selenium之find_element_by_xpath定位元素
- 函数的递归调用-年龄增大问题
- 对技术的态度(酷壳)
- Excel(Office)哪一版最好用?
热门文章
- bootrom启动流程【转】
- C#:设置当前线程的区域性
- RegisterStartupScript 和 RegisterClientScriptBlock 的区别
- 阿里巴巴总裁马云对雅虎员工的精彩演讲:爱迪生欺骗了世界!(转载)
- mysql acer_Acer电脑【no bootable device】引导修复
- 小红帽怎样装图形化界面_linux安装图形化界面
- iphone个系列尺寸_iPhone 12系列、11系列尺寸对比
- 漫步者煲耳机软件_它是苹果AirPods的“真香替身”——漫步者lolliPods开箱体验...
- python中x y表示_Python中表达式x += y和x = x+y 的区别详解
- 层 数据仓库_数据仓库的架构是什么样的,大家可以通过这篇文章了解一下