小程序登录的正确打开方式
小程序网络组件
RequestTask wx.request(Object object)
RequestTask说明
方法 | 说明 |
---|---|
RequestTask.abort() | 中断请求任务。 |
RequestTask.onHeadersReceived(function callback) | 监听 HTTP Response Header 事件。会比请求完成事件更早。 |
RequestTask.offHeadersReceived(function callback) | 取消监听 HTTP Response Header 事件。 |
RequestTask.onChunkReceived(function callback) | 监听 Transfer-Encoding Chunk Received 事件。当接收到新的chunk时触发。 |
RequestTask.offChunkReceived(function callback) | 取消监听 Transfer-Encoding Chunk Received 事件。 |
wx.request(Object object)属性
此处只列比较常用的属性,全部属性请查看链接。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | |
data | string/object/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。 content-type 默认为 application/json |
|
timeout | number | 否 | 超时时间,单位为毫秒 | |
method | string | GET | 否 | HTTP 请求方法 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行)哪怕是abort掉的请求! |
总结一下:所有的小程序接口基本上都有两个特征:
参数都是一个对象。便于记忆的同时方便扩展。
都有相同的结果处理方式:都有success、fail、complete三个回调属性。
接口执行的各种情况下的errMsg对象介绍。
回调属性 | errMsg对象 |
---|---|
success | {errMsg:”request:ok”…} |
fail | {errMsg:”request:fail “…} 有的系统这个fail后面有个空格,所以要使用这个判断,最好是使用正则表达式。也可以使用indexOf函数,大于-1进行判断。 |
abort | {errMsg:”request:fail abort”…} |
示例代码
1 |
|
小程序登录接口
wx.getUserProfile(Object object)
获取用户信息。页面产生点击事件(例如
button
上bindtap
的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回userInfo
。该接口用于替换wx.getUserInfo
,详见 用户信息接口调整说明。wx.checkSession(Object object)
检查登录态是否过期。 通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序,用户登录态越有可能失效。反之如果用户一直在使用小程序,则用户登录态一直保持有效。具体时效逻辑由微信维护,对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。
登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。调用成功说明当前 session_key 未过期,调用失败说明 session_key 已过期。更多使用方法详见 小程序登录。
-
调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。更多使用方法详见 小程序登录。
后端登录接口代码实现
后端使用NodeJS,web框架KOA版本^2.13.4,路由框架@koa/router版本^10.1.1,框架request,版本 ^2.88.2,jsonwebtoken用来加密解密token信息,版本^8.5.1
1 |
|
1 |
|
小程序端登录代码实现
1 |
|
1 |
|
针对登录代码可以做哪些优化?
对于一个软件,就代码层面而言,需要追求最基本的几个方面(远不止这些,但是先姑且先做个好这些吧):
可维护性(maintainability)
所谓的“维护”无外乎就是修改 bug、修改老的代码、添加新的代码之类的工作。所谓“代码易维护”就是指,在不破坏原有代码设计、不引入新的 bug 的情况下,能够快速地修改或者添加代码。所谓“代码不易维护”就是指,修改或者添加代码需要冒着极大的引入新 bug 的风险,并且需要花费很长的时间才能完成。
可读性(readability)
软件设计大师 Martin Fowler 曾经说过:“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”翻译成中文就是:“任何傻瓜都会编写计算机能理解的代码。好的程序员能够编写人能够理解的代码。”Google 内部甚至专门有个认证就叫作 Readability。只有拿到这个认证的工程师,才有资格在 code review 的时候,批准别人提交代码。可见代码的可读性有多重要,毕竟,代码被阅读的次数远远超过被编写和执行的次数。我们需要看代码是否符合编码规范、命名是否达意、注释是否详尽、函数是否长短合适、模块划分是否清晰、是否符合高内聚低耦合等等。
可扩展性(extensibility)
可扩展性也是一个评价代码质量非常重要的标准。代码预留了一些功能扩展点,你可以把新功能代码,直接插到扩展点上,而不需要因为要添加一个功能而大动干戈,改动大量的原始代码。
可复用性(reusability)
代码的可复用性可以简单地理解为,尽量减少重复代码的编写,复用已有的代码。
那么接下来就来优化一下代码吧:
模块化
可以把登录的代码模块化,代码如下:
1 |
|
Promise化
回调地狱问题,不利于代码的阅读,所以接下来我们基于Promise进行代码优化。有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
Promise的几个方法简介
方法名 | 说明 |
---|---|
Promise.prototype.then | 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。这种设计使得嵌套的异步操作,可以被很容易得改写,从回调函数的”横向发展”改为”向下发展”。 |
Promise.prototype.catch | 是 Promise.prototype.then(null, rejection) 的别名,用于指定发生错误时的回调函数。Promise 对象的错误具有”冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获。 |
Promise.prototype.finally | 方法返回一个Promise 。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise 是否成功完成后都需要执行的代码提供了一种方式。 |
Promise.all | 这避免了同样的语句需要在then() 和catch() 中各写一次的情况。Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。Promise.all 方法接受一个数组作为参数,var p = Promise.all([p1,p2,p3]); p1、p2、p3 都是 Promise 对象的实例。(Promise.all 方法的参数不一定是数组,但是必须具有 iterator 接口,且返回的每个成员都是 Promise 实例。)p 的状态由 p1、p2、p3 决定,分成两种情况。 (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。 (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。 |
Promise.race | Promise.race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。var p = Promise.race([p1,p2,p3]); 上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的返回值。 |
Promise.any | 接收一个Promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。所有子实例都处于rejected状态,总的promise才处于rejected状态。 |
Promise.allSettled | 返回一个在所有给定的promise都已经fulfilled 或rejected 后的promise,并带有一个对象数组,每个对象表示对应的promise结果。相比之下,Promise.all() 更适合彼此相互依赖或者在其中任何一个reject 时立即结束。 |
小程序API接口Promise化并且把需要登录的调用接口模块化
- 安装插件。请先查看npm支持文档。
1 |
|
- 在微信开发者工具右方详情中勾选使用npm模块,并在菜单栏工具中点击构建npm。
- 初始化代码。
1 |
|
- 改写login.js代码
1 |
|
- 调用代码
1 |
|
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!