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


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实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JSONP之我见
Mar 24 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Angular4 反向代理Details实践
May 30 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
微信小程序开发入门基础教程
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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python冒泡排序注意要点实例详解
2016/09/09 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python开发入门——set的使用
2020/09/03 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
shell变量的作用空间是什么
2013/08/17 面试题
十八届三中全会个人学习材料
2014/02/13 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
个人四风问题整改措施
2014/10/24 职场文书
如何写好活动总结
2019/06/21 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python