017-登录模块-界面开发原创

光说不练，假把式列外，咱们从这一节开始啊，就进入我们的项目实战这一大模块了，在项目实战这一模块中啊，我们会利用我们之前所讲的腾讯云的系列产品来一步一步的把咱们的直播带货小程序啊给打造出来啊，那这个模块叫登录模块啊，这也是咱们做小程序开发，或者做任何网页开发可能就必走的一个模块，你得先能够注册登录了之后啊，我才能够下一步再让你去选择是直播还是发弹幕等等等啊，所以咱们这一个小应用呀，它也是避免不了先走我们的登录模块的。而且这个登录模块的话挺好，正好衔接咱们上一节所讲的即时通讯I'm这个产品，因为咱们会发现其他产品咱们都走了走代码，而这个没走啊，因为这个一旦走代码的话，那真是啊已经属于上纲上线的了啊，所以其实通讯R'M呀，咱们在上一节配置好了，正好来到这一节中，我们在写我们登录模块的时候会用得到的客隆先简单的给大家啊，把我们登录模块所要干的事啊给大家说一下啊，我在这里啊，通过一个呃画图板给大家展示一下，那我们在这个登录模块中啊，主要分为以下几个过程，咱们第一个过程的话就要跟着坑啊，先把我们小程序的界面咱们可以打造一下，当然我们打造的就是我们最基本的这一个什么呀，登录页面，在登录页面这个过程中啊，他的这个布局啊，非常的简单啊，我们这块的话有一个呃logo啊，然后这块的话是我们对于此应用的一个简述，在下面这块的话有一个核心的。

更大的登录按钮啊好在这里我们的登录按钮在之前的演示中，大家应该也已经看到我们这个小程序的一个样子了啊，可们在这就不在于啊，去拿出来再去给大家看一眼了，好吧啊等大家点击完这个登录按钮之后，哎，这个事儿就来了，大家可以想一想哈，其实我们现在啊做任何开发中，一想登录，那这个过程中肯定是说诶有没有注册呀，要是没注册的话呢，我会引导你进行注册页面，诶咱们在外B开发中就这样的啊，引导进行注册页面啊注册的时候又有什么用户名，密码，手机号验证码等等的的一种方式，但现在咱们是在小程序开发中，所以小程序开发中啊，很正常的这种登录流程啊，就变成了我们什么呀，微信授权验证的流程了，另外啊，所以我们接下来就是在我们这个登录按钮一旦点完之后，那你就要跟着客们来进行我们的微信的授权验证的这样一个流程。

啊，在授权验证流程中，反正不管怎么样啊，有人说我熟悉，有人说我不熟悉，没关系，客们就当大家是不熟悉的，咱们把微信授权验证啊，怎么弹出授权框啊，确认之后啊，又怎么样的一个流程，最终最终获得到我们的唯一用户标识open案例这个过程啊给大家讲一下，那这个获得到微信的open ID之后，哎，Open ID作为我们的用户的唯一标识，也就是说你这个微信号将来的话呢，会唯一对应这个open ID啊，你在这里你可以把你的open ID作为你整用户表的主件啊，然后这个时候你再让用户再完善完善信息，再获取这个手机号等等的就可以，但咱们这个小程序中啊，咱们就用这个open案例作为这个用户的唯一标识，咱们再不通过其他的什么手机号，再就做二次的这种验证了，好吧，好获得open ID的下一步我们要干嘛呀，难道这这不就登录授权成功了吗。

那下一步就赶紧的进入我们的聊天嘛，哎，要想进入聊天啊，就像我们说我要加入这个群聊，我要进入这个直播间啊，我得怎么样，是不是我们的直播间得被创建出来呀，然后所以在这里的话呢，你列位啊，就需要啊，我们在这里画这样一张图啊，需要什么呀，我们要创建直播间啊，创建我们的直播群组，咱们这样说的，跟我们的这个产品对应点叫AV chat room啊在这里AV啊chat room，嗯，在这里，那在创建的时候呢，我要把这个谁呀，我们这个open ID啊，作为我们这个直播群主的这个群主，所以我们要在这里去设置这一个群主，那列位你也看见了，坑隆在上一阶中啊，直接就在我们这个产品中去创建这个群主的时候呢，他有点懵，对吧，他说该群主未注册，哎，或者是被删。

不请稍后再试，那大家可以想一想，你说我怎么知道这个唯一的这个open ID将来是什么呢？对不对啊，我不可能说我知道了，然后的话呢，我直接设置上，就是我知道了，直接设置上去，大家会发现我连这手动设置都不好用，你就动用代码，它就能好用吗？所以一定也是不好用的，那在这里怎么办呢？在这里要想创建AV root这个直播群组，必须先让这个账号再导入到我们的I'的这个体系里面，所以在前面样的话呢，就会有一个什么样的过程呢？叫导入账号啊，到我们的这个R'M这个体系中啊，体系系统中，系统中，系统中，哎，这句话的意思就是你未来想选我们登录完的啊科ome的这个open ID啊，作为我们的群主，并且创建这个直播间，那前提是得让这个唯一的open ID，它怎么样呀，得先提前的导。

入到我们的这个I'm的账号体系系统中，哎，导入进来之后成功了，再下一步再调用我们相面代码和一些权限，在创建这个avch的room，那这样的话呢，CN啊这个账号他就可以啊拥有自己的直播间啊，那这个直播间我直不直播的就是我的事，但是我得有这个直播间啊，所以在这里的话呢，咱们就可以了啊，咱们也可以设定成像抖音那样的，先把直播间创建出来，但是这个直播间默认是关着的状态啊，就是不允许直播，这个时候咱们可以让这个人去申请，然后申请完之后咱们给他通过，再把这个给它打开就行了啊，所以但是这个东西在提前呢，怎么样，怎么创建好这样一个直播的群组啊，大家可以把这个过程的话呢，因为一说创建群，好多人就想着说这个直播还有群的意思吗？啊，其实我们这个直每一个直播间都是一个群，大家想一想，是不是这样的一个道理呢？每一个直播间都是一个群。

我进入这个直播间，如果是群主我就可以直播啊，我是普通的啊，群成员我们就是看客，我们可以看这个人直播，但是大家都可以发弹幕啊聊天呀，对吧？啊购买商品啊，其实发弹幕聊天这些行为的话呢，本来也就是这种即时通讯的这种行为，我给他刷个火箭，点个赞关注，他取消关注等等的，本来就是一些即时通讯的行为嘛，他就是群的意思啊，所以在这里创建AV的直播群主，设置为群主这个人就有直播权限啊，然后其他人就是看播的就可以了。另外好了，那这样的话呢，我把刚才这个过程咱们简单的呃捋一下，就是列位跟着客们第一步先创建好我们的登录的页面，把布局做好之后，就留一个登录按钮，是我们的核心按钮，点完了之后立即引导我们的微信授权流程，微信授权中你可能会经过我们的啊，Get user profile啊，弹出我们的授权框啊，获得到头像啊，啊我们。

的昵称啊这些信息，然后再通过我们的log in拿到code，拿code再去换取我们的open ID啊，然后利用open ID啊，还有我们的头像这些信息啊，咱们直接把这些东西导入到我们的R'M账号系统中，在这导入这个过程的话呢，可能会涉及到很多R'M产品的一些具体流程，咱们在这个过程中好好来讲一讲代码怎么去写的问题，然后等我们导入成功之后，这个时候我们再利用我们的请求HTP请求，利用他给咱们开放了那个接口，咱们可以动态的通过代码来创建AV的直播间啊，而不是在这里经过手动创建啊，咱们可以通过代码创建，那创建的时候，这个时候他要让你选择群主是谁，诶，咱们就可以把刚才那个群主设置上去，把这个群的公告呀，把这个群的名字呀，你都可以在这里动态的进行一个设置，那这样的话呢，我们就完成了我们这一个登录的这一个模块了啊，所以咱们登录按模块是这么安排。

来的啊好了，另外那接下来咱们一步一个脚印的啊，跟着科们来看看我们是怎么来完成从授权到导入账号体系啊，到我们创建AV直播群组这个过程实现的，好吧，另外咱们先从第一个来，就是我们画出来我们这一个页面啊，那咱们还就来到我们的小程序这一个啊开发里面来啊选程开发中科在这里哈，导入了一个什么呃，Image的文件夹，Image文件夹中里面有很多很多图片啊，里面有一个logo，这样来就是我放在我的登录页面中的这张图片的啊大家说这个文件夹他们我怎么我从哪弄呀？诶你到时候联系啊咱们这一个啊群啊，然加入咱们的群中，获取咱们的这些资料啊客们会把我们加群的这个二维码的话呢，放在咱们的视频的链接中啊，大家也可以在咱们视频链接的下面能看到啊，这样一个群啊，到时候获取咱们这些图片就可以了。

好吧，那这样的话呢，我们导入它之后，剩下的代码就没有什么了，你看我把之前那些没有用的文件夹都给删了，咱们直接做测试的那些文件夹都给删掉了，只留了一个home，然后home中啥也没写，就这点东西都是原汁原味的，那这样的话呢，就是咱们的这一个小程序啊，在小程序咱们在这里把这个navi，呃，Bar抬讨这个文字给它改一改，改成什么，改成咱们这个项目的一个名字呗，啊这样的话呢，咱们对应一下哈，哎，好，蜂巢直播带货RM嗯，强迫症的，然后看能强迫症的给改一改吧，那这样的话，这就是咱们这个小程序的直播带货RM，诶，这个留个空格吧，怎么这么贴的这么紧，那这样的话，咱们就可以来到我们这里来开发我们的这个页面，什么页面，Logging页面，哎，我想在这里创建一个login这个页面，好，另外我们在写的过程中的话呢，在后面我们可能还会持续不断的优化，所以咱们在这里啊，先把咱们最基本的这个流程啊给走下来，那这样来说的话，我们呢，首页的话呢，就变成了我们。

我们的log in了，我们重新的编译一遍，大家会发现此时我们的log in，哎，做成我们小程序的首页了，那这样的话在log中列外来布局，你会不会布局呀，你是不是太会布局了呀？哎，在这里就照着我们之前这个进行布局啊，我们在这WXM，诶他怎么在这创建的这个文件呢，好像这个东西不太多哈，没关系哈，我们在这一会再手动的创建WX就行了，好，我们在这里来log in这里，那我这块的一个布局结构列位想要什么布局啊，我们基于我们的view啊，在view这一块的话呢，我上面这块啊，我是放我的这个logo的，好一会儿啊，咱们把那张图片给它扔进来，扔到哪就扔在这里面呗，扔在这里面把那个image s RC就指向咱们的这个斜杠，Image下面的这个logo.pg扔在这里来对吧？哎，好，这张图片的话呢，就这么轻松的就过来了，但这张图片应该是被压缩了一下啊，咱们后面可以简单的给它。

那调整一下就可以了啊，在这里的话呢，这一块的话，课文准备放我们的这个什么呀，一个内容的一个简介啊，我们在这可以说一个我们项目的一个slogan啊，放在这里这个slogan的话就是我们这句话，我看一下这句话还在吗？我就是抄那句话算了吧，我自己敲吧，叫什么风巢啊。

蜂巢。直播啊带货R'M好好这样这句话放在这里，然后下面的话，它就对我们这句话的一个介绍啊，我们在这里分成两个放在这里，就是这个体验啊，体验我们直播发起功能，哎，我们的发送弹幕功能啊，因为这就是想想说啊，我们这个应用能干什么，发送这个直播弹幕啊，然后再就是送礼啊，还有我们的点赞啊，大家可以看看是不是将来我们都能完成这样一些功能呀，还有购买啊，然后等啊直播啊电商功能。这就是我们将来这个应用能干的一个事儿，你可以直播发起，你也可以当关众啊，你也可以发送直播弹幕啊，你也可以送礼点赞购买直播等等的直接一些电商的行为就可以了。最下面这块的话呢，应该会放一个什么呀按钮啊，我们在这里放一个拔探啊，这个拔探的话呢，就是两个字登录好了，我们在这里非常简单啊，感觉诶已经写完了哈，啊稍微的把这个样式咱们给它一一做就行了，我们在这里新建好一个什么呀， login.WX啊SS这样一个文件，好了，接下来在这个文件中的话，我们可以对应的去写一写，那对应的我们这个logo这一块的话，我们怎么去写啊，Logo这一块可面把它加上一个点logo，我们加上一个text的LA center吧啊，我们将里面这张图片居中，然后我们让他跟上面这一块的话呢，空一点的这个距离把判定杠，大家在这里坑肯定之前都已经写过了，对吧，在这个布局的话呢，怎么好看，大家怎么去设。

个体到时候根据你们真正的这个设计稿啊要求啊，来把这个布局啊给它写好就可以了，然后这个图片的话，我们可能再好好的给它修正一下的列外啊，在这个图片中的话，我们给这个图片加上一个什么呀，Class等于一个什么呀，Logo r mg啊好在这个logo mg中，我们可以对这个图片的一个样式啊进行一个设置，那这个图片的话，这个宽高的话呢，你最好去量一量啊，在这里的话呢，我是按照什么来做的呀，我是按照咱们这个RPS单位来去写的，这个宽度的话，这张图片的这个宽你也可以这样把这个图片弄成100%，然后的话呢，在这里的话，设置它的目录属性是wide fix，然后这样的话呢，宽度固定之后，呃，高度自适应啊，可在这里就是按照这个原来这个图片的宽度啊，是良好高度良好，然后在这切换成RPX单位，然后在大的一设备中的话呢，可能它可能显得比较小啊，所以客人把它放在这。

这个S居中去显示就可以了，而RPX的话是等比例缩放的，那所以我在这保证这张图片不失帧就可以了，那这样的话呢，我可能就会去看一下这张图片的大小是多大的呀，哎，在这里它的大小的话呢，是诶我在这样去看吧，右键查看一下我们的属性相应信息中，505424对吧，大家在这里大家去量一量最好了，对吧？宽度的话525505是吧，505啊5052PX，然后高度的话呢，是量多少写多少，424R PX这样的话呢，在不同的设备中的话都会等比例缩放，因为咱们用的是RPX这样一个单位，哎，一保存之后我们的这个logo的话呢，就好用了，那这样的话呢，我们可以看一下啊，此时我们这张图片保存，哎，重新编译一下吧。

好，重新编译一下，大家可以看一下是不是这张图片已经生效了呀，你看里面肯定好用的，把这个给宽度给它top值给它改一下是好用的了，哎，这样的话我们按照这样一个节奏就继续了，嗯，有时候这一块的话别忘了重新编译一下哈，好了，这样来说，我们的这个log in啊，我们的XMMR，还有XS这一块，咱们就写了一点，下面开始改成这个，咱们在这里的话，给这个设置一个什么下，咱们把这个字体的话给它设置一下slogan这个字体来跟客们设置一下DR slogan啊，我们设置这个放size给它大一点吧，比如18PS啊，然后的话，我们这个color的颜色的话呢，给他一个井号3333的吧，好吧，然后再对应的话呢，诶，这个三少了少了一个好了，这样的话呢，我们这个text的a line也给它设置成这个center的啊，LA hit，我们给它设置成这个50RPX，然后对应的我们的marin top跟上面一样，空出一点距离呗，60RPX好了，保存之后的话呢，我们这个。

蜂巢直播带货啊，IM啊，这两个字已经标好了，那接下来的话，再就是我们这两个啊，就是这个这句话啊，这句话的话呢，咱们来看一下，咱们也给它起好这个名字啊，Class等于我们这是紫的这个slogan，我们这个标题好了，接下来我们在这里给它加上我们想要的它的一个样式就可以了啊在这里这种写法大家可以啊自由发挥啊，因为咱们在这里没有确定的这种设计稿，对吧，如果有的话，你真的是量多少写多少，为了保证它不缩，缩放的时候没有问题对吧？放了size，咱们给他一个小一点的字体，14PX color的话呢，给他一个什么999的吧，999好了，然后再对应的我们T的蓝也是center就行了，好，然后我们对应的蓝黑让它小一点，比如说是个20，呃1PRPX吧，好了，这样的话一保存之后，另外诶这个21，咱们给它改成这个什么呀，40RPS蓝黑的这一块好了。

这样来说的话，大家可以看一下体验直播啊，发起啊，发送弹幕送礼这些字对吧，你也可以把这个字的话呢，让他这个top呀和这个包的话都给它设置一下，要不然在这好像太铁了对不对，我们在这给它加上一个什么marin top，然后给设置成这个40RPX，然后对应的marin-bottom的话，我们给它设置成120RPX，让它上下的话都有一个上边距和一个下边距，那这样的话，把这个登录的话呢，给它挤到这个位置来啊，行了，然后在这个登录这一块的话呢，我们把这个小按钮的话呢，稍微的给它做一下啊，你也可以直接不用去写，给它改成一个什么呀，Type primary就行了，改成一个绿色的按钮，点击登录之后啊，我们就可以登录我们这个小程序了，好了，这个界面这一块的话，咱们好像就不需要再浪费太多的时间了吧，那接下来咱们在这只要给这个按钮的话呢，绑定好一个事件，诶我们就在这里利用。

我们的b tap hand到我们的login，然后咱们在这里hand到log in的时候，对应的在login GS中，咱们就直接在这里去写了，对不对？我们将来一点击之后，我们就触发我们的授权流程了。

授权好了保存之后，咱们至少现在点完之后这两个是没有问题的啊，那在下一节中的话，咱们就来看一下我们的微信授权的流程是怎么样子的，列位一定不要错过哦。