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


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对象的property属性详解
Apr 01 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
Json解析的方法小结
Jun 22 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
原生js实现下拉选项卡
Nov 27 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 error_log 函数的使用
2009/04/13 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
详解python中*号的用法
2019/10/21 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
计算机专业应届毕业生自荐信
2013/09/26 职场文书
驾驶员岗位职责
2014/01/29 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
新党员入党决心书
2015/09/22 职场文书