微信小程序 登录的简单实现


Posted in Javascript onApril 19, 2017

微信小程序 实现登录

最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一遍,话说我的运气有时候也确实挺爆炸的,小程序一个小登录送给大家,

一、小程序开发前准备

目前在网上的教程已经不计其数了,给大家推荐一个网址: https://3water.com/article/111566.htm 这里面介绍比较详细,

二、小程序登录

我先开始的时候在登录就出问题了,因为当时官方给的文档就让人很纠结,因为官方给的文档让人感觉就凌乱了,在这里我解释一下,

官方给的流程:

第一步:获取用户授权信息(每次的授权信息都不一样)

第二部: 上代码

wx.request({ 
 url : API_URL,//自己的服务接口地址 
 method : 'POST', 
 // 在这里需要格外注意了,所有的post请求header必须是下面的格式不然你又入坑了 
 header : {'content-type':'application/x-www-form-urlencoded'}, 
 data : 
 { 
 iv: res2.iv, 
 code: code, 
 encryptedData: res2.encryptedData 
 }, 
 success: function (data) 
 { 
 // 4.解密成功后 获取自己服务器返回的结果 
 // 解密的sdk在开发文档上搜索-签名加密-然后你阅读后就知道了-下载属于自己语言的解码包 
 if(data.data.status == 1) 
 { 
 var userInfo_ = data.data.userInfo; 
 }else 
 { 
 console.log('解密失败') 
 } 
 }, 
 fail:function() 
 { 
 console.log('系统错误') 
 } 
})

他的意思是所有的操作在后台进行,这样相对安全一点,还有一点就是公众号需要的unionId可以通过解密获取到,那样的话就可以在公众号的页面看到你的小程序了,unionId是公众号和小程序的共用ID,如果你们的项目是需要关联的话那我还是建议你按照官方的走,如果不是的话,下面的方式可以迅速解决你的登录问题

自定义流程:

//app.js 
function Login(code,username,img) 
{ 
 var that = this 
 wx.request({ 
 url:HTTP_URL, 
 data: 
 { 
  appid : '你后台获取的appdi', 
  secret : '你后台获取的secret', 
  js_code : code, 
  grant_type : 'authorization_code' 
 }, 
 method:'GET', 
 header:{'content-type': 'application/json'}, 
 success: function (a) 
 { 
  var openid = a.data.openid 
  // 请求自己的服务器 
  wx.request({ 
  url:API_URL, 
  data: 
  { 
   img : img 
   openid : openid, 
   username : username, 
  }, 
  success: function(b) 
  { 
   // 成功返回用户的唯一ID(这是数据库ID) 
   console.log(b.data.uid) 
   // 我这里是把用户返回的ID存到了缓存里因为,我在使用全局变 
   // 量时候发现有时候引入了js但是还会有丢失找不到的现象 
   wx.setStorageSync('uid', b.data.uid) 
  } 
  }) 
 }, 
 fail: function () 
 { 
  // 在这里你要考虑到用户登录失败的情况 
  wx.showToast({ 
  title: '网站正在维护中...', 
  icon: 'loading', 
  duration: 10000 
  }); 
 } 
 }) 
} 
// 自己服务器的地址 
// 注意:开发时可以是http协议,但是如果上线必须申请https协议(也就是SSL协议)协议可以在阿里和腾讯的控制 
// 台都可以购买,例子:阿里-管理控制台-安全(云盾)-证书服务,一般用dv免费的就可以了协议申请完后需要补全, 
// 补全完毕后下载文件是个压缩包,里面有两个文件,把他们放到你服务器上,然后再配置文件中指明这是ssl协议并 
// 且指明路径,这样 你就算配置成功了,至于如何配置,网上开源的教程挺多的,nginx有Apache也有如果你 
var API_URL = "自己服务器的地址"; 
// 微信提供的接口地址:这里必须要把https://api.weixin.qq.com这个网址在微信后台安全域名中添加进去否则你会 
// 感觉生活是如此的黑暗完全看不到希望 
var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code"; 
App({ 
 onLaunch: function () 
 { 
 // 调用API从本地缓存中获取数据 
 var logs = wx.getStorageSync('logs') || [] 
 logs.unshift(Date.now()) 
 wx.setStorageSync('logs', logs) 
 }, 
 getUserInfo: function (cb) 
 { 
 var that = this 
 if(this.globalData.userInfo) 
 { 
  typeof cb == "function" && cb(this.globalData.userInfo) 
 }else 
 { 
  // 调用登录接口 
  wx.login({ 
  // login流程 
  success: function (res) 
  { 
   //登录成功 
   if (res.code) 
   { 
   // 这里是用户的授权信息每次都不一样 
   var code = res.code; 
   wx.getUserInfo({ 
    // getUserInfo流程 
    success: function (res2) 
    { 
    // console.log(res2) 
    that.globalData.userInfo = res2.userInfo 
    typeof cb == "function" && cb(that.globalData.userInfo) 
    var username = res2.userInfo.nickName 
    var img = res2.userInfo.avatarUrl 
    // 请求自己的服务器 
    Login(code,username,img); 
    } 
   }) 
   }else 
   { 
   wx.showModal({ 
    title: '提示', 
    content: '获取用户登录态失败!'+res.errMsg 
   }) 
   } 
  } 
  }) 
 } 
 }, 
 globalData: 
 { 
 userInfo:null 
 } 
})

下面附两张图片是申请SSL协议的大概流程图微信小程序 登录的简单实现微信小程序 登录的简单实现

有些乱,大家将就一下。

还有就是注意一点,那就是代码的重用,毕竟小程序代码上传是有限制的不得大于1MB,有些代码其实可以节省的有些css代码或是js代码有些都是可以封装一下的开发工具提供了app.js和app.css有些你感觉每个页面都会用到的都可以放到里面,这样也就减少了一些麻烦,还有就是有些人查看手机时,发现只能查看静态的,这里提醒一定要打开调试模式,不然你就干着急吧。以上就是个人的一些经验分享,感谢观看。如果说对各位有帮助的话,希望点个赞。第一次写博客,感谢支持。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
微信小程序开发入门基础教程
Apr 19 #Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 #Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 #Javascript
vue2.0父子组件间通信的实现方法
Apr 19 #Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 #Javascript
微信小程序页面传值实例分析
Apr 19 #Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
You might like
PHP 实现判断用户是否手机访问
2015/01/21 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python缩进和冒号详解
2016/06/01 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
golang/python实现归并排序实例代码
2020/08/30 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
机械专业应届生求职信
2013/09/21 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
秸秆管理实施方案
2014/03/15 职场文书
2015年见习期工作总结
2014/12/12 职场文书
中层干部考核评语
2015/01/04 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书