关于在vue-cli中使用微信自动登录和分享的实例


Posted in Javascript onJune 22, 2017

(以下所有接口由后台提供)

一、微信自动登录

//定义事件
 methods:{
   //判断是否微信登陆 是不是微信浏览器
  isWeiXin() {
   let ua = window.navigator.userAgent.toLowerCase();
   console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
   if (ua.match(/MicroMessenger/i) == 'micromessenger') {
   return true;
   } else {
   return false;
   }
  },
  test(){
    if(this.isWeiXin()){
    //微信登录,接口由后台定义
     this.$http.get('/wx/index/login/type/2').then((res) => {  
      if(res.data.code==0){  //微信登录成功跳转个人中心
        this.$router.push({
          name:'UserHome',
        })
      }else{        //微信登录失败,使用填写信息登录
        this.$router.push({
          name:'Login',
        })
      }
     })
  }
//页面加载后执行
 mounted(){
   if(this.isWeiXin()){  //是来自微信内置浏览器
    // 获取微信信息,如果之前没有使用微信登陆过,将进行授权登录
    this.$http.get(this.$root.api+"/index/index/wx_info").then((res) => {
     if(res.data.code!=0){
       location.href='/wx/index/wxAutoLogin';
     }
    })
   }
 }

 二、微信分享

methods:{
  //判断是否微信登陆
  isWeiXin() {
   let ua = window.navigator.userAgent.toLowerCase();
   console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
   if (ua.match(/MicroMessenger/i) == 'micromessenger') {
   return true;
   } else {
   return false;
   }
  },
  //微信分享使用方法
  wxInit(sd){
   let links='http://www.kspxzx.com/index/index/wxshare_choiceOk/identity/Student/courseID/'+this.courseID+'/appointment_code/'+this.appointment_code;  //分享出去的链接
   let title='学车训练课程分享';  //分享的标题
   let desc=' 教练名字:'+this.codeName+' 所在驾校:'+this.drive+' 训练日期:'+this.date+' 训练项目:'+this.proje; //分享的详情介绍
     wx.config({
       debug: false,
       appId: sd.appId,
       timestamp: sd.timestamp,
       nonceStr: sd.nonceStr,
       signature: sd.signature,
       jsApiList: [
         'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo'
       ]
     }); 
     wx.ready(function () {
      // alert("done")
      // alert(title)
      wx.onMenuShareTimeline({
        title: title, // 分享标题
        link:links, // 分享链接'
        imgUrl: sd.cover, // 分享图标
        success: function () {
          // 分享纪录
          shareRecord();
          alert("分享到朋友圈成功")
        },
        cancel: function () {
          alert("分享失败,您取消了分享!")
        }
      });
      // wx.onMenuShareAppMessage({
      //   title: title, // 分享标题
      //   desc: description, // 分享描述
      //   link: link, // 分享链接
      //   imgUrl: cover, // 分享图标
      //   success: function () {
      //     alert("成功分享给朋友")
      //   },
      //   cancel: function () {
      //     alert("分享失败,您取消了分享!")
      //   }
      // });

      //微信分享菜单测试
      wx.onMenuShareAppMessage({
        title:title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: sd.cover, // 分享图标
        success: function () {
          // 分享纪录
          shareRecord();
          alert("成功分享给朋友")
        },
        cancel: function () {
          alert("分享失败,您取消了分享!")
        }
      });

      wx.onMenuShareQQ({
        title:title, // 分享标题
        desc: desc, // 分享描述
        link:links, // 分享链接
        imgUrl: sd.cover, // 分享图标
        success: function () {
          // 分享纪录
          shareRecord();
          alert("成功分享给QQ")
        },
        cancel: function () {
          alert("分享失败,您取消了分享!")
        }
      });
      wx.onMenuShareWeibo({
        title:title, // 分享标题
        desc: desc, // 分享描述
        link: links, // 分享链接
        imgUrl: sd.cover, // 分享图标
        success: function () {
          // 分享纪录
          shareRecord();
          alert("成功分享给朋友")
        },
        cancel: function () {
          alert("分享失败,您取消了分享!")
        }
      });
     });
     wx.error(function(res){
       // alert("error")
       // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
     });
  },

 },
mounted(){// 微信分享  'http://www.kspxzx.com/'
    let old_this=this;
    if(this.isWeiXin()){
      var url = "/Index/index/wxShare";  //后台接口
      var data = {url:'http://www.kspxzx.com/'}   //当前网页链接,必须跟当前页面链接一样,单页面则以首页链接为准
      $.post(url,data,function(res){
        if(res.code == 0){
          // 调用微信分享
          old_this.wxInit(res.data);
        }
      });
    }
   };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 #Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 #Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 #Javascript
详解用webpack2搭建angular2的项目
Jun 22 #Javascript
vue2.0实现分页组件的实例代码
Jun 22 #Javascript
纯JS实现只能输入数字的简单代码
Jun 21 #Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
You might like
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php的4种常见运行方式
2015/03/20 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php如何获取Http请求
2020/04/30 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
使用python Django做网页
2013/11/04 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python opencv摄像头的简单应用
2019/06/06 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
消防先进事迹材料
2014/02/10 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
质量承诺书怎么写
2014/05/24 职场文书
课外科技活动总结
2014/08/27 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
python实现会员管理系统
2022/03/18 Python