关于在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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
vue时间格式化实例代码
Jun 13 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php错误级别的设置方法
2013/06/17 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
python字符串替换的2种方法
2014/11/30 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python内置函数locals和globals对比
2020/04/28 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python如何使用代码运行助手
2020/07/03 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
工作会议欢迎词
2014/01/16 职场文书
一帮一活动总结
2014/05/08 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python