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

一、微信自动登录

 //定义事件
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. 再谈javascript面向对象编程

    前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...

  2. 19 Zabbix 利用Scripts栏目对Hosts远程执行命令

    点击返回:自学Zabbix之路 19 Zabbix 利用Scripts栏目对Hosts远程执行命令 在Monitoring板块中,有Host出现的地方,单击Host按钮后,都可以执行对Host远程执行 ...

  3. 这是要逆天么,看我控制台程序玩Microsoft XPS Document 打印

    主要是想试试Microsoft XPS Document 打印时怎样去掉那个“将打印输出另存为”对话框 using System; using System.Drawing; using System ...

  4. MyEclipse过期后怎么破解

    方法一:写一个程序生成Subscriptioncode import java.io.*; public class MyEclipseGen { private static final Strin ...

  5. HDFS High Availability Using the Quorum Journal Manager

    http://hadoop.apache.org/docs/r2.9.0/hadoop-project-dist/hadoop-hdfs/HDFSHighAvailabilityWithQJM.htm ...

  6. linux上配置bochs,搭建基于X86架构操作系统的开发环境

    学习操作系统最好的方法就是自己编写新的操作系统,或者修改已有的操作系统.但是如果在真机上完成这个过程,调试会成为一个很大的问题.利用虚拟机来完成,可以使调试过程变得简单,而且能节约很多开关机的时间. ...

  7. ubuntu14.04下部署Tsung

    我是在Windows 7下装的虚拟机里部署的Tsung,所以,以下均是在虚拟机下的操作: 1.网络问题必须搞定,见我的另外一篇博文 2.erlang的安装包.Tsung的安装包一一备齐.我用的是tsu ...

  8. Cent OS 6.5下源码安装php7.2

    1.安装php需要的扩展 # yum install libxml2 libxml2-devel openssl openssl-devel libcurl libcurl-devel libjpeg ...

  9. java数据结构与算法(一)

    1.数据结构概念 所谓的数据结构是数据之间的关系,都是为了提高程序效率而设计的. 分为逻辑关系和物理关系两种. 逻辑关系:人为的一种逻辑思维的认为. (1)集合:在一个范围内有多个数据,数据之间没有关 ...

  10. SPI通讯协议

    一.SPI概述 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线, ...