关于在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 相关文章推荐
Opacity.js
Jan 22 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
Js和VUE实现跑马灯效果
May 25 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Python ljust rjust center输出
2008/09/06 Python
Python对象体系深入分析
2014/10/28 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
好的演讲稿开场白
2013/12/30 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
图书馆标语
2014/06/19 职场文书
信用卡工资证明范本
2014/10/17 职场文书
接收函格式
2015/01/30 职场文书