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


Posted in Javascript onAugust 28, 2018

vux微信分享说明

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

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

引入

在 main.js 中全局引入:

import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)

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

组件外使用

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

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

import { WechatPlugin, AjaxPlugin } from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)

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

组件中使用

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

export default {
 created () {
 this.$wechat.onMenuShareTimeline({
  title: 'hello VUX'
 })
 }
}

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

引入对应的文件

import Vue from 'vue'
import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)//使用微信插件
//微信分享
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/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, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });

   //分享到QQ空间
   Vue.wechat.onMenuShareQZone({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });

   //分享到腾讯微博
   Vue.wechat.onMenuShareWeibo({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
     // 用户确认分享后执行的回调函数
     callback && callback();
    },
    cancel: function () {
     // 用户取消分享后执行的回调函数
    }
   });
  })
 })
}

输出

export {wxShare}

组件内调用

import { wxShare } from '封装wxShare函数的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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
You might like
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
小学开学寄语
2014/01/19 职场文书
学校门卫岗位职责
2014/03/16 职场文书
商务助理求职信范文
2014/04/20 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js