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


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静态的动态
Sep 18 Javascript
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
微信小程序开发入门基础教程
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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php 图像函数大举例(非原创)
2009/06/20 PHP
Wordpress php 分页代码
2009/10/21 PHP
YII中assets的使用示例
2014/07/31 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python可变参数用法实例分析
2017/04/02 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python中的引用知识点总结
2019/05/20 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
毕业生如何写自荐信
2014/03/26 职场文书
大学生村官考核材料
2014/05/23 职场文书
公共场所禁烟标语
2014/06/25 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
小学毕业感言200字
2015/07/30 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS