Vue 移动端开发实现微信登录

1 打包app，需要去微信开放者平台申请（https://open.weixin.qq.com/） appid 和 appsecret

    // 跳转到微信into_weixin (headImage) {let ts = thisvar auths = nullvar aweixin = nullplus.oauth.getServices(function (services) {auths = servicesvar sfor (var i = 0; i < auths.length; i++) {if (auths[i].id == 'weixin') {s = auths[i]break}}if (!s.authResult) {console.log('准备拉起微信')s.login(function (e) {console.log('e的内容' + JSON.stringify(e))var info = plus.push.getClientInfo()console.log('推送：' + info.clientid)var access_token = e.target.authResult.access_tokenvar openid = e.target.authResult.openidconsole.log(access_token + '|||' + openid)window.localStorage.opendId = openidvar ajax = new XMLHttpRequest()// 使用post请求ajax.open('get', 'http://59.111.110.250:8011/users/tbUser/weixin/login/?openid=' + openid + '&access_token=' + access_token + '&cid=' + info.clientid)// 如果 使用post发送数据 必须 设置 如下内容// 修改了 发送给 服务器的 请求报文的 内容// 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：ajax.setRequestHeader('Content-type', 'application/json; charset=utf-8')// 发送// post请求 发送的数据 写在 send方法中// 格式 name=jack&age=18 字符串的格式ajax.send('')// 注册事件ajax.onreadystatechange = function () {if (ajax.readyState == 4 && ajax.status == 200) {var returnData = JSON.parse(ajax.responseText)// console.log('ajas数据' + returnData)// var user =   JSON.stringify(returnData.body.user)// var token =    JSON.stringify(returnData.body.user)localStorage.setItem('users', JSON.stringify(returnData.body))console.log(JSON.stringify(returnData.body))// windows.href="https://www.baidu.com";}}ts.login()}, function (e) {console.log('登录认证失败')// console.log('返回数据' + JSON.stringify(e))console.log('返回数据' + JSON.stringify(s))})} else {// 已经登录认证// console.log('返回数据' + JSON.stringify(e))console.log('返回数据' + JSON.stringify(s))console.log('登录成功')ts.login() // 自己的登录结口// let parm = {}// parm.openId = s.authResult.openid// parm.phone = ''// parm.password = ''// loginForUser(JSON.stringify(parm), function (res) {//   if (parseInt(res.code) == 608) {//     Toast({//       message: '授权成功，您还未注册，请点击注册。您已注册可直接登录'//     })//   }//   if (res.success == true) {//     window.localStorage.userinfo = JSON.stringify(res.object)//     window.localStorage.authorization = res.addition//     ts.$router.push('/Home')//   }// })}}, function (e) {Toast({message: '登录认证失败'})console.log('获取登录失败：' + e.message + ' - ' + e.code)console.log('登录认证失败')})// this.$router.push({//   path: '/index',//   name: 'index'// })},

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！

Vue 移动端开发实现微信登录相关推荐

传智健康_第9章移动端开发-手机快速登录、权限控制
传智健康_第9章移动端开发-手机快速登录.权限控制文章目录传智健康_第9章移动端开发-手机快速登录.权限控制 1. 需求分析 2. 手机快速登录 2.1 页面调整 2.1.1 发送验证码 2. ...
用Abp实现两步验证（Two-Factor Authentication，2FA）登录（二）：Vue网页端开发
文章目录发送验证码登录退出登录界面控件获取用户信息功能项目地址前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首 ...
微信小游戏开发之微信登录功能的云开发实现方案选择
主题 CocosCreator接入微信登录获取openid,微信登录实现方案调研过程特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容 ...
【小程序开发之微信登录】
毕业设计做的是一个针对三高人群的个人膳食管理与推荐的微信小程序,本人第一一次做小程序,也是第一次写博客,还有很多不完美的地方也可能有讲得不对的地方,多多包涵.希望记录一下完成毕业设计过程中学到的知识, ...
微信小程序开发(一) 微信登录流程
文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/53761107 最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一 ...
记 vue 移动端开发中的经验
项目背景手上的 vue移动端项目已经开发了大几个月了,遇到了一些很有意思的坑,也让自己学习了很多:写此文主要目的是记下一些我遇到的坑,以及自己的解决方案,分享的同时也方便以后复习. 项目的底层是上 ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
vue pc端web页面微信支付和支付宝支付
业务场景介绍: pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成 ...
Vue移动端开发IOS浏览器回退时页面不刷新或未正常发起请求
移动端微信公众号项目进行UAT测试时遇到一个问题,ios微信浏览器访问项目时回退上一级页面异常,未刷新.网上看的是由于ios回退是从缓存中读取数据的,由于开发环境不方便测试,找到如下解决方法经测试是 ...

Vue 移动端开发实现微信登录

Vue 移动端开发实现微信登录相关推荐

最新文章

热门文章