微信小程序的简单登录
来源:互联网 发布:python 绝技 目录 编辑:程序博客网 时间:2024/05/28 22:10
这种在前台直接获取openid的方式已经不可以用了,各位想了解新的登录请去http://blog.csdn.net/m0_37992327/article/details/73469087,不过下面的一些东西还是对大家有帮助的,有兴趣的可以看一下,尤其是ssl证书的申请方式。
最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一遍,话说我的运气有时候也确实挺爆炸的,小程序一个小登录送给大家,
一、小程序开发前准备
目前在网上的教程已经不计其数了,给大家推荐一个网址: http://blog.csdn.net/xiangzhihong8/article/details/53738417 这里面介绍比较详细,
二、小程序登录
我先开始的时候在登录就出问题了,因为当时官方给的文档就让人很纠结,因为官方给的文档让人感觉就凌乱了,在这里我解释一下,
官方给的流程:
第一步:获取用户授权信息(每次的授权信息都不一样)
第二部: 上代码
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.jsfunction 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有些你感觉每个页面都会用到的都可以放到里面,这样也就减少了一些麻烦,还有就是有些人查看手机时,发现只能查看静态的,这里提醒一定要打开调试模式,不然你就干着急吧。以上就是个人的一些经验分享,感谢观看。如果说对各位有帮助的话,希望点个赞。第一次写博客,感谢支持。
- 微信小程序的简单登录
- 简单的登录程序
- 简单的c# 登录程序
- 简单的JSP登录程序
- 微信小程序简单的登录页面的跳转
- 微信小程序简单的登录页面的跳转
- Android_Servlet验证 HttpPost的简单登录程序
- php写一个简单的登录程序
- Android_Servlet验证的简单登录程序
- Android_Servlet验证的简单登录程序
- 一个简单的注册/登录程序
- Android_Servlet验证的简单登录程序
- 简单的Web登录程序,jsp+mysql
- 简单的Python登录小程序
- 简单用户登录程序
- IO 简单登录程序
- C#写的简单的登录界面程序
- 制作一个简单的包含有过滤器的登录程序
- bzoj 2762 树状数组
- 《APUE》读书笔记—第八章进程控制
- TP-GAN 让图像生成再获突破,根据单一侧脸生成正面逼真人脸
- Python selenium 三种等待方式详解
- python的sorted用法
- 微信小程序的简单登录
- [LeetCode]122. Best Time to Buy and Sell Stock II
- 机器学习13-支持向量机大边界的直观理解
- android native层的opengltest程序学习例子
- jsp的九大内置对象和四大作用域
- Node.js Buffer(缓冲区)
- 斐波那契博弈
- 重载,覆盖,隐藏
- java初学者集合类关系及注重事项