微信小程序开发入门之共享账本

接着上一篇。众所周知，共享账本是一个需要登录才能用的小程序，所以这次我们来加个登录界面以及相应的功能。首先是写一个登录界面，像下面这个一样的（最好别像这个一样，我真的是一点都没有艺术细胞啊…）

别看他丑，我也花了不少功夫的，你看那标题几个字，是不是还是有点不一样的！闲话少说，开始上代码

…

还是先建文件夹吧！新建一个目录叫welcome（爱起啥名起啥名），然后在这个目录下新建一个page

打开welcome.wxml文件，删掉原有的，添加以下代码

<view class="container">
 <button class="goBtn" open-type="getUserInfo" bindgetuserinfo="go"> 
 </button>
</view>

没错，就一个view和一个button，在此之前只需要掉一个系统函数就可以弹窗请求用户授权，但是现在不行了，官方要求必须要用户点击了一个open-type="getUserInfo"的按钮才可以弹窗询问，应该是为了增加用户体验吧

另外还要用bindgetuserinfo="go"来声明用哪个函数来处理获取用户授权信息的事件

然后看看这次要增加那些样式，打开welcome.wxss文件，增加下面这些样式

Page {
 width: 100%;
 height: 100%;
 background-color: white;
}
.container{
 width: 100%;
 height: 100%;
 background-color: #aac4d5;
 background-image: url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/backgrounds/welcom_top.jpg?sign=476f7d231fc91109134ef3262a1ce593&t=1571553179'), url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/backgrounds/welcom_bottom.jpg?sign=dbcc8cf56e6d8dde672d97abb58e397d&t=1571557522');
 background-size: contain,60%;
 background-position: top center, bottom center;
 background-repeat: no-repeat;
}
.goBtn{
 width: 256rpx;
 height: 256rpx;
 border-radius: 50%;
 border: 1px solid black;
 position: absolute;
 top: 35%;
 left: 50%;
 margin-left: -128rpx;
 background-color: white;
 background-image: url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/icon/goBtn.jpg?sign=0864daa96fdc071bcbfaec1821a2fab4&t=1571555170');
 background-size: 90%;
 background-repeat: no-repeat;
 background-position: center;
}

这里的图片链接都是存在我的云存储空间的，可以根据前面讲过的云存储的方式自行进行替换

其中样式.container用了两个背景图片，一个放在顶部，一个放在底部；.goBtn用left: 50%;和margin-left: -128rpx;（数值为自身宽度的一半）来实现水平居中，其余的都是普通样式了

有一点要说一下，每次我们新建page时，系统都会将新page的路径默认放到app.json的pages的最后面

这个pages里面描述了我们所有页面的路径，其中第一个就是主界面，所以我们在调试界面的过程中可以把要调试的界面放在第一个，这样每次一打开就是这个界面了，app.json下面还有关于window的配置，暂时就用默认的就行

把pages里的路径调换一下顺序

最后再看下welcome.js文件，因为这个页面就一个功能——引导用户授权，所以用不着data和各个生命周期函数，统统删掉就行

然后添加我们需要的代码，就一个函数

 

函数里就判断了用户是否进行授权，如果授权成功就跳转到之前写的index界面

还有对应index.js也要改动一下，首先把onLoad函数里的代码提到一个新的函数里，如mockData（图片没有截完，跟之前代码一样）

然后在onLoad函数里添加新的逻辑，对用户是否授权进行判断，如果授权成功就生成模拟数据并弹窗一条欢迎信息，否则就跳转到welcome界面

onLoad: function (options) {
 wx.getSetting({
 success: res => {
 if (res.authSetting['scope.userInfo']) {
 wx.getUserInfo({
 success: res => {
 //新建用户信息或者查询已有信息
 this.mockData()
 wx.showToast({
 title: "欢迎你," + res.userInfo.nickName,
 image:'/images/smile.png'
 })
 }
 })
 } else {
 wx.redirectTo({
 url: '../welcome/welcome',
 })
 }
 }
 })
}

wx.getSetting是获取所有授权信息的系统函数，比如用户信息，地理位置，手机号等，然后再判断是否已经授权使用用户信息

别忘了把app.json的pages顺序改回来

编译运行，不出意外会跳转到welcome界面，然后点击GO按钮，会弹出询问是否授权

拒绝就会停留在这个界面，允许的话就会跳转到index页面，并且弹出一条问候信息

今日份开发到此结束