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

一、微信自动登录

 //定义事件
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. 搜索引擎之全文搜索算法功能实现(基于Lucene)

    之前做去转盘网的时候,我已经公开了非全文搜索的代码,需要的朋友希望能够前去阅读我的博客.本文主要讨论如何进行全文搜索,由于本人花了很长时间设计了新作:观点,观点对全文搜索的要求还是很高的,所以我又花了 ...

  2. Asp.net IIS Express 无法启动 解决办法

    http://www.mamicode.com/info-detail-1893424.html 一 .其他项目都可以,就这么一个不行 用记事本或者其他什么文本编辑器,打开项目的.csproj文件,定 ...

  3. (class file version 53.0), Java Runtime versions up to 52.0错误的解决方法

    遇到这个错误是在Apache Tomcat上部署应用程序的时候遇到的,具体的错误描述是: java.lang.UnsupportedClassVersionError: HelloWorld has ...

  4. Java笔记:Java 流(Stream)、文件(File)和IO

    更新时间:2018-1-7 12:27:21 更多请查看在线文集:http://android.52fhy.com/java/index.html java.io 包几乎包含了所有操作输入.输出需要的 ...

  5. 基于IndexedDB实现简单文件系统

    现在的indexedDB已经有几个成熟的库了,比如西面这几个,任何一个都是非常出色的. 用别人的东西好处是上手快,看文档就好,要是文档不太好,那就有点尴尬了. dexie.js :A Minimali ...

  6. Yarn篇--搭建yran集群

    一.前述 有了上次hadoop集群的搭建,搭建yarn就简单多了.废话不多说,直接来 二.规划 三.配置如下 yarn-site.xml配置 <property>        <n ...

  7. [Spark内核] 第38课:BlockManager架构原理、运行流程图和源码解密

    本课主题 BlockManager 运行實例 BlockManager 原理流程图 BlockManager 源码解析 引言 BlockManager 是管理整个Spark运行时的数据读写的,当然也包 ...

  8. tensorflow核心概念和原理介绍

    关于 TensorFlow TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库. 节点(Nodes)在图中表示数学操作,图中的线(edges)则表示 ...

  9. 记一次使用Node.js electron打包网站的记录

    具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...

  10. Gulp 插件及其使用

    前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gu ...