12-微信小程序授权封装下

现在开始正式实现授权界面了,以前的知识和现在的知识一起融汇起来,就可以编写出出色的小程序了,一切熟练之后,都会变得简单而有趣,而在这之前,你需要做的就是坚持

效果图.gif

一.前言

上一文章,我们编写了授权界面,并且添加了获取用户信息的授权按钮,只要用户点击那个按钮,我们就可以得到用户的信息,但是运用中,我们需要将用户的信息传输到自己的远程服务器,还要获取code码,以及你的服务器你需要的登录信息,在你的服务器上发送code码到微信服务器获取本次登录的会话密钥以及用户的唯一小程序标识appid,所以接下来我们要将获取的用户的有用数据传递到服务器,如果传送成功,还要删除登录界面

二.网络优化

1.在src文件夹下新建utils文件夹并且在该文件夹下新建networkUtils.js文件
2.查阅wepy的网络优化方法

发送请求优化.png

文件结构.png

baseRequest.png

get.png

]
898b0691cfa616bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里后台访问的数据是@极客江南提供的教学数据,可以用在线json转换工具查看具体内容

3.新建api.js并封装
这里专门封装用于提交用户数据到指定服务器的post方法

userLoginAPI.png

三.Login组件补充

1.导入提交用户登录数据的api方法

userLoginAPI.png

2.获取用户登录凭证
A.

getsetting作用.png

getsettign示例.png

在官方文档的API设置中可以看到这部分内容

B.

$apply.png

这个在wepy官网的数据绑定中可以查找到
C.

onload.png

这个用户在组件加载完毕执行,先获取code登录凭证,然后验证是否已经获取用户的授权,如果授权就修改data中的授权页面状态码
3.提交用户信息到远程服务器
A.根据用户授权状态变量控制授权页面的显示与隐藏

isShow.png

控制属性.png

刚才在onload里面已经定义了异步函数,会在组件加载之前根据授权状态确定授权状态码的值
B.定义数据变量保存code编码

code变量.png

code保存.png

C.提交用户信息到远程服务器

用户授权数据.png

setstorage.png

以上内容均来自于官方文档数据缓存的内容,同步缓存只有当前同步的内容执行完才会执行,异步缓存不会影响当前程序进度

提交请求.png