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

一、微信自动登录

 //定义事件
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. 关于python中的dir函数

    dir函数用于查看python对象的属性,如果所查看的python对象已经定义了__dir__方法,则使用dir会返回定义的__dir__方法的返回值.如果没有定义__dir__方法,则会从__dic ...

  2. sql查询化繁为简 告别rs.getString("XX"),bean属性赋值setXX("XX")

    一.在执行sql语句查询时候,查询的结果是set的map集合(ResultSet): 结果使用rs.getString("XX")获得对应属性的值,赋值到bean对象的相应的属性中 ...

  3. 深入.NET数据类型(2)

    一.装箱和拆箱 将值类型转换为引用类型的过程称为装箱,反之称为拆箱 实际开发尽量避免 装/拆 箱 原因: 装/拆 箱都会降低程序性能 示例代码: static void Main(string[] a ...

  4. sql server 提示无法彻底删除_复制-而无法删除数据库或重新配置发布订阅

    EXEC sp_removedbreplication 'Sys' --记着把当前执行EXEC sp_removedbreplication 'Sys'连接也关闭哦! 即使勾下面关闭连接,还会报错! ...

  5. Fiddler的script用法

    一.关于Fiddler Script Fiddler Script 是用JScript.NET语言写的.Fiddler 包含了一个脚本文件可以自动修改Http Request 和Response.这样 ...

  6. Nginx: http 跳转 https

    参考:博文 参考:HTTP 状态码解读 Nginx - rewrite 方式 Nginx Server 配置 server { listen ; server_name www.test.com te ...

  7. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  8. 对RC4算法进行改写,新的加密算法RCX。

    最近研究JWT算法, JWT由header.payload.signature三个部分组成,payload是非加密的,一些敏感信息能被别人非法获得,必要时候要加密. 加密算法中,RC4算法的速度可以达 ...

  9. 工作流调度器azkaban(以及各种工作流调度器比对)

    1:工作流调度系统的作用: (1):一个完整的数据分析系统通常都是由大量任务单元组成:比如,shell脚本程序,java程序,mapreduce程序.hive脚本等:(2):各任务单元之间存在时间先后 ...

  10. hook 虚表

    PVOID* GetVtpl(PVOID lpThis, int nIndex){  return *(PVOID**)lpThis + nIndex;} PVOID HookVtpl(PVOID*  ...