微信小程序的简单登录

这种在前台直接获取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.js
function  Login(code,username,img)
{var that = thiswx.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      : imgopenid   : 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 = thisif(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.userInfotypeof cb == "function" && cb(that.globalData.userInfo)var username = res2.userInfo.nickNamevar 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有些你感觉每个页面都会用到的都可以放到里面，这样也就减少了一些麻烦，还有就是有些人查看手机时，发现只能查看静态的，这里提醒一定要打开调试模式，不然你就干着急吧。以上就是个人的一些经验分享，感谢观看。如果说对各位有帮助的话，希望点个赞。第一次写博客，感谢支持。

微信小程序的简单登录相关推荐

微信小程序的详细登录(上)
前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候 ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序获取手机号登录流程(个人开发者账号不支持)
微信小程序获取手机号登录流程所需条件 1. 非个人开发者账号 2. AppID+AppSecret 流程思路 **注意:** 代码实现常见问题所需条件 1. 非个人开发者账号获取手机号文档这 ...
微信登录后台 java_Java 后端（Spring boot）+微信小程序的授权登录
微信小程序的授权登录第一.Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
微信小程序设置简单的监听器（转载）
微信小程序设置简单的监听器创建一个watch.js文件 /*** 设置监听器 watch.js*/ export function setWatcher(page) {let data = page ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...

微信小程序的简单登录

微信小程序的简单登录相关推荐

最新文章

热门文章