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

一、微信自动登录

 //定义事件
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);
}
});
}
};

关于在vue-cli中使用微信自动登录和分享的更多相关文章

  1. ecshop微信通中微信自动登录的设置方法

    ecshop微信通中微信自动登录的设置方法 来 源:共享世纪 作 者:网络 时间:2015-12-03 点击: 4017 注意:微信自动登录,必须同时满足两个条件: 第一.微信公众号必须是服务号经过认 ...

  2. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  3. vue项目中关于微信分享的坑,以及安卓和ios获取location.href不同的处理

    最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端 ...

  4. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  5. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  6. VUE开发SPA之微信授权登录

    SPA单页应用中微信授权登录的一点思路 单页应用应该如何解决微信授权登录的尴尬跳转?后退无法返回?主要遇到的问题就是 先进入单页应用,一边渲染页面一边判断用户有没有登录,当判断到没有登录时异步数据请求 ...

  7. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  8. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  9. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

随机推荐

  1. 安装spark单机环境

    (假定已经装好的hadoop,不管你装没装好,反正我是装好了) 1 下载spark安装包 http://spark.apache.org/downloads.html 下载spark-1.6.1-bi ...

  2. jquery中this和event.target的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用Python批量下载ftp服务器中的内容

    使用ftplib,轻松实现从ftp服务器上下载所需要的文件,包括目录结构等,支持了一下断点续传 from ftplib import FTP import sys import os import r ...

  4. Java实现简单工厂模式

    昨天看了一下设计模式,复习了一下简单工厂模式,做个笔记,浅淡一下我对简单工厂模式的理解.书上使用的是C#,因为我所学的是Java,所以本人就用Java实现了一遍.如果有讲的不对的地方,希望能够指出来. ...

  5. Java的虚方法

    虚方法出现在Java的多态特性中, 父类与子类之间的多态性,对父类的函数进行重新定义.如果在子类中定义某方法与其父类有相同的名称和参数,我们说该方法被重写 (Overriding).在Java中,子类 ...

  6. 商业智能(BI)选型手册(转载)

    摘自http://articles.e-works.net.cn/bi/Article126429.htm 1.前言 互联网时代企业数据呈现爆发式增长,全面考验着企业的数据处理和分析能力.面对大容量. ...

  7. Nodejs的运行原理-调用篇

    前言 之前做过Nodejs的架构篇, 有很多朋友留言给我,说没看懂里面的例子,这里我会重新梳理一下,再以http server为例,来解析Nodejs从前端到libuv的调用过程. 正文 回忆a. N ...

  8. [Spark性能调优] 第一章:性能调优的本质、Spark资源使用原理和调优要点分析

    本課主題 大数据性能调优的本质 Spark 性能调优要点分析 Spark 资源使用原理流程 Spark 资源调优最佳实战 Spark 更高性能的算子 引言 我们谈大数据性能调优,到底在谈什么,它的本质 ...

  9. MySQL使用存储过程代替子查询

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  10. sync_binlog innodb_flush_log_at_trx_commit 浅析

    一 参数意义 innodb_flush_log_at_trx_commit 如果innodb_flush_log_at_trx_commit设置为0,log buffer将每秒一次地写入log fil ...