今天我们来做一下设置页面和登录页面的布局，因为这个系统不登录几乎没有操作权限。 　　

　　

　　还有一点：现在的APP普遍要求，一旦打开，不需要任何操作就能看到界面和基本页面。即使页面是空的，用户在继续之前也会弹出登录的提示。说这个要求是为了用户体验； 　　

　　

　　比如对安全性有要求的软件，比如银行APP，打开后不用登录就能看到一些东西，具体操作时才会要求登录。 　　

　　

　　如果不这样做，你把APP设计成一打开就要求登录，大部分在应用市场和小程序后台都不会通过审核。 　　

　　

　　登录和设计页面的大致风格 　　

　　

　　这是上面“登录”和“设置”页面的总体布局。今后如有需要，我们将随时更换。为了测试方便，我在login下做了三个快速登录按钮设置用于调试，一旦点击，我就以相应的身份登录。 　　

　　

　　这两页的代码如下(我尽量把评论都写出来): 　　

　　

　　登录页面： 　　

　　

　　templateview！uniapp的每个vue文件必须至少有一个view-view class=' input-box '！-标签的class属性控制它的外观，它是在下面的样式中定义的-view class=' input-item ' view class=' input-label '手机号码/view view class=' input-body ' input v-model=' phone ' maxlength=' 11 ' type=' text ' placeholder=' Please enter your mobile phone number ' class=' input ' button 30。isCanSendCode ' class=' BTN-code“{ sendMsg } }/button！-当- uniapp中的label属性前面是数字：时，VUE的变量名用它后面的引号表示-！-如果不想在标签中引用VUE变量，请使用{{variable name}}来引用它-/view/view view class=' input-item ' view class=' input-label '验证码/view view view class=' input-body ' input v-model=' vcode ' type=' text ' style='。Placeholder='请输入验证码' maxlength='20' class='input'/！-以上v型是双向绑定。变量变了，这里的值也变了，这里的值变了，时变的内容也会变-/view/view！-如果只需要改变一两个标签的样式，而我比较懒，我就直接在标签里指定样式，不需要在下面定义-button class=' button ' style=' background-color 3360 # 08b6f 2；' color: # fff'登录/按钮按钮class=' button ' type=' default ' style=' margin-top :30 rpx；' color: # 999'返回主页/button view style=' margin-top :50 rpx；'调试账号登录按钮class='button' type='warn '老赵1、管理员/按钮button class=' button ' type=' default '老赵2、员工/按钮button class=' button ' type=' primary '老赵3、Owner/button/view/view/template script export default { data(){ return {/* VUE变量，这里的变量可以绑定到上面的模板，然后相互交互*/sendmsg3360 '发送验证码'，iscansendcode3360 true，p 　　

hone: "",vCode: ""}},methods: {/*VUE事件函数放这里，因为我们还没做逻辑，所以这里是空的。*/}}</script><style lang="scss"> /*页面样式类的存放地方*/button::after {border: none;}.input-box {padding: 50upx;font-size: 30upx;.input-item {display: flex;background: white;border-bottom: 1upx solid #eeeeee;line-height: 100upx;height: 100upx;.input-label {width: 150upx;}.input-body {position: relative;height: 100upx;width: calc(100% - 150upx);.input {line-height: 100upx;height: 100upx;position: relative;font-size: 28upx;width: 300rpx;}.eye {position: absolute;height: 50upx;width: 50upx;right: 0;top: 50%;transform: translateY(-50%);}.btn-code {position: absolute;right: 0upx;top: 50%;transform: translateY(-50%);background: none;color: #205592;width: 160upx;font-size: 24upx;box-sizing: border-box;text-align: right;padding: 0;height: 100upx;line-height: 100upx;}}}.select {padding-top: 40upx;display: flex;justify-content: space-between;color: #003B67;}}.button {margin: 0 30upx;border-radius: 50upx;line-height: 80upx;height: 80upx;font-size: 32upx;}</style>注意一下rpx这个单位，一般我们在做HTML、CSS时，都是用px，1px就代表1个显示器上的物理像素，在uniapp中也是这样1px等于一个物理像素，但是手机的分辨率是很多样的，因此我们不能方便地控制大小，所以才有了rpx这个单位，这个单位会把屏幕总宽度当成750，当屏幕宽度不足750的时候，1rpx会小于1像素，屏幕宽度大于750的时候，1rpx会大于1个像素。1rpx=屏幕宽度物理像素数量/750。

　　

关键的地方我在上面用注释写了一下，要是都解释一下的话，估计得好几万字，有不清楚的留言吧。

　　

　　

下面是设置页面的代码：

　　

<template><view><view class="set_header"><view class="shd_topBar"><view class="avatar"><image src="../../static/avatar.png"></image></view><view class="title"><view class="nickName">老赵和他的</view><view><uni-tag text="管理员" type="error" :circle="true" size="small"></uni-tag></view></view><view class="setBtn"><uni-icons type="gear-filled" color="#fff" size="26"></uni-icons></view></view><view class="iCounter"><view class="item"><view>999</view><view>发布</view></view><view class="item"><view>888</view><view>解决</view></view><view class="item"><view>999天</view><view>任职</view></view></view></view><uni-list><uni-list-item class="listItem" title="这里能有些什么功能呢？" :show-badge="true" badge-text="12"></uni-list-item><uni-list-item class="listItem" title="我们以后用的时候再设计" :show-switch="true"></uni-list-item></uni-list></view></template><script>export default {data() {return {}},onShow() {console.log(this.getLoginMsg());},methods: {}}</script><style>.listItem{ background-color: #fafafa;}.set_header {padding:50rpx;margin: 30rpx;border-radius: 20rpx;background-image: linear-gradient(to right bottom, #0ba360 0%, #3cba92 100%); /*上面这一行是给头部加渐变色的CSS，有一个网站专门提供这个代码，挺有意思的*/height: 200rpx;}.shd_topBar{display: flex;}.shd_topBar .avatar{width:100rpx;height:100rpx;overflow: hidden;}.shd_topBar .avatar image{width:100rpx;height:100rpx;}.shd_topBar .title{flex:1;padding:5rpx 0 0 30rpx;}.shd_topBar .title .nickName{color:#fff;font-weight: bold;text-shadow: 1rpx 1rpx 1rpx #999;}.shd_topBar .setBtn{width:60rpx;height:100rpx;overflow: hidden;line-height: 100rpx;}.iCounter{display: flex;margin-top:50rpx;}.iCounter .item{flex:1;text-align: center;color:#fff;font-size:8rpx;}</style>**这个页面使用了uni-tag组件，别忘了安装一下。

　　

一个APP通常由很多个页面组件，那么他们之间肯定要调用很多相同的方法，我们不能每个页都重写一遍所有方法，所以我们要找一个定义一次就可以在整个APP、内调用的办法，那就是在main.js里定义。我写了一个检查登录状态的函数，那么现在我的main.js代码就是这样的了：

　　

import Vue from 'vue'import App from './App'Vue.config.productionTip = false/** * 检查是否登录的全局方法 * ========================= * 如果登录了，返回一个对象，里面有pid * 这个函数不验证具体的身份是否正常。 * 它只是记录了登录信息，具体在调用API时在服务端会对这些信息进行验证。 * 所以这里不用操心是否正确。 */Vue.prototype.getLoginMsg = function(){var loginMsg = {}; //定义一个空对象loginMsg.pid = uni.getStorageSync("login_pid"); //用同步的方法在磁盘中读取保存的pidif(loginMsg.pid.length < 1){//login_pid是空的，就是没登录，直接返回false，连调用API的机会都没有。return false;}loginMsg.userPhone = uni.getStorageSync("login_userPhone"); //登录手机loginMsg.vCode = uni.getStorageSync("login_vCode"); //md5后的验证码loginMsg.startDate = uni.getStorageSync("login_startDate"); //登录的日期loginMsg.Identity = uni.getStorageSync("login_Identity"); //用户身份（管理员、员工、业主）console.log(loginMsg); //调用试用的，这句代码是在控制台输出东西。return loginMsg;}App.mpType = 'app'const app = new Vue({ ...App})app.$mount()大概就是这样，先做个样子，还没做逻辑功能。以后用到什么功能再加。