【uni-app】uni-app移动端开发 - 登录界面

悠悠 2022-12-10 10:14 635阅读 0赞

# 基本需求 #

uni-app 框架的优点在于一次编码，多端编译运行。本次通过完成一个登录界面，来学会 uni-app 框架的使用，以及开发过程需要注意的点，还有难以排查出来且又找不到资料的一些坑，总有一些你需要的信息，接下来先明确登录界面的基本需求。

登录界面是再简单不过的界面，但麻雀虽小，五脏俱全。本次演示在用户输入框、密码输入框及一个登录按钮的基础上，增加些许样式，完善交互中容易被忽视的问题。

操作流程：点击 **帐号输入框 **并输入 -> 点击 **密码输入框 **并输入 -> **登录按钮 **变为可用并亮起 -> 点击登录按钮，最终完成效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1][]

# 项目地址及运行方法 #

Git 项目地址为：[https://github.com/Jokerlsss/uni\_app\_login][https_github.com_Jokerlsss_uni_app_login]

下载后解压，直接导入到 HX 中即可运行

# 交互注意点 #

*  弹起键盘时，整体界面往上移动，在 **不生成滚动条 **的同时，也 **不能遮盖住控件**。
 *  点击登录按钮后，需要有一个登录中 **loading** 反馈；登录成功后，使用 **toast** 弹窗提示后跳转。
 *  聚焦输入框时应有合适的动画样式变化，让用户能够知道当前所处的输入框焦点在哪里。
 *  清除内容后需要重新将 **焦点聚焦 **到对应的 input 框上。
 *  登录按钮在禁用时，颜色变淡。
 *  登录页面 **禁止下拉刷新 **。

# 实现准备 #

## 1. UI 库的选择 ##

在使用 uni-app 之前，我以为 vant、Mint 等移动端 UI 库可以进行兼容，但在真正导入和使用后，发现兼容性并不那么好，也可能是我的引用方式不妥。经过一阵子的摸爬滚打后，比较推荐的 uni-app 有两个 UI 库，一个是原生的 **uni-ui** 库，一个是 DCloud 市场（也就是 HBuilderX 编译器中的插件市场）中的 **uView-ui**。这两个对于 uni-app 几乎是量身定制，推荐使用，也可两者结合使用，使用方法后续会提到。

**uni-ui**

在使用 HBuilderX 新建项目时，选择 uni-app 中的默认模板新建即可，在代码编写过程中打出 u 的时候，便会提示如 uInput 的联想，这便是 uni-ui 的组件，直接使用即可，具体使用方法参考[官方文档][Link 1]。

**uView-ui**

[uView官方文档][uView]。我这边的方式是采用 npm 的方式进行安装，如下（在此之前，先在 HBuilderX 的插件市场中安装内置终端，然后再在终端中执行如下操作）：

**① 安装 uview-ui**

// 如果项目中没有 package.json 文件时，先执行如下命令：
    npm init -y
    
    // 安装
    npm install uview-ui
    
    // 更新
    npm update uview-ui

**② 安装 scss**

如果是通过 HX（HBuilderX 的简称，下文同）创建的项目，则进入到 **插件市场 **搜索 Scss/Sass 编译插件进行安装，安装后重启 HX 即可。

如果是通过 vue-cli 创建的项目，则通过 npm 的方式进行安装，这里不再赘述，详见 uview-ui 文档。

**③ 配置**

1）在根目录的 main.js 中引入 uView js 库

// main.js
    // 这两行代码应放在 import Vue ... 之后
    import uView from "uview-ui";
    Vue.use(uView);

2）在 uni.scss 中引入 uView 的全局Scss文件

/* uni.scss */
    @import 'uview-ui/theme.scss'

3）引入 uView 基础样式

**注意：**以下这行代码应在 App.vue 中 style 的 **首行 **位置引入，注意加上 **lang = "scss"** 属性

4）配置 easycom 按需引入组件模式

配置完后，**重启** HX 并重新编译才能正常使用，且在 pages.json 文件中只能有一个 easycom 字段。

之后在页面使用的时候，**无需 import** 注册组件就可以直接使用。

// pages.json
    {
    	"easycom": {
    		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    	},
    	
    	// 此为本身已有的内容
    	"pages": [
    		// ......
    	]
    }

## 2. 代码编辑器 ##

因为 uni-app 和 HBuilderX 是同一个团队出的，那么首选是 **HBuilderX**，在里面可以安装一些插件，如 Sass，甚至可以安装一些别人封装好的组件进行学习、使用。

# 主要功能及实现 #

围绕我们的需求，来对这些基本的交互一一进行实现。

① 弹起键盘时，整体界面往上移动，在 **不生成滚动条 **的同时，也 **不能遮盖住控件**。

**1）问题描述**

移动端在点击 input 框时会弹起键盘，**键盘会有一定的高度**，如果我们整体的控件高度设置不当的话，可能会出现 **键盘把某些控件遮挡住**，导致体验不佳，或者导致 **页面出现滚动条**，用户体验感觉软件排版不严谨。

**2）思路**

由于移动端的 rpx 单位是可以随着机型的大小进行自适应，因此我们以开发常用的尺寸（以 iphone 6 的 375 \* 667 px）为例，在不超过这个值的限制上，去 **给定父容器的宽高**。

宽度设置为 100%，高度设置为如 1300 rpx（2rpx = 1px）

当获取到输入框焦点时，**高度缩小**，内容自动往上移动，并加入 **动画 **效果以让页面更加丝滑。

<view :style="(ispdFocus || isuserFocus) ? containerHeight.focus : containerHeight.blur"></view>
    
    
    data() {
        return {
            containerHeight: {
                focus: 'height:800rpx;transition:0.2s',
            	blur: 'height:1300rpx;transition:0.2s'
            },        
        }
    }

② 点击登录按钮后，需要有一个登录中 **loading** 反馈；登录成功后，使用 **toast** 弹窗提示后跳转。

登录的过程涉及到对接口的访问，此处用 settimeout 代替此过程进行模拟。

使用 uView-ui 中的按钮控件时，可以通过设置 **loading** 属性来让按钮呈现出加载状态，效果如图：

![2020092715044212.png][]

<u-button :loading="isLogining" @click="login">{
       {isLogining ? '' : '登 录'}}</u-button>
    
    <u-toast ref="uToast"></u-toast>

login() {
    		// 密码正确
    		this.isLogining = true
    
    		setTimeout(()=>{
    		    this.isLogining = false
    		    this.$refs.uToast.show({
    				title: '登录成功',
    				type: 'success'
                    // 通过配置 url 可以指定在弹窗显示后跳转到哪个页面
                    // 如果是 tabBar 页面则还需要配置上 isTab: 'true'
                    // url: '',
                    // isTab: ''
    		    })
            },2000)
        }

登录成功后，调用 **uToast** 来进行展示，效果如图：

密码错误的逻辑和弹窗这里就不再赘述，同理。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2][]

以下交互大家可以自行思考方案，demo 中提供的只是初步思路，如果有更好的思路欢迎私信或评论，我会将更好的实现方案后续更新到该模块下。

③ 聚焦输入框时应有合适的动画样式变化，让用户能够知道当前所处的输入框焦点在哪里。

④ 清除内容后需要重新将 **焦点聚焦 **到对应的 input 框上。

⑤ 登录按钮在禁用时，颜色变淡。

⑥ 登录页面 **禁止下拉刷新 **。

**解决方案**

// pages.json
    {
        "pages": [
            {
            // 页面注册
    		"path": "pages/index/index",
    		"style": {
                // 禁止刷新
                // ... : "false" => 写法错误，不能加双引号
    			"enablePullDownRefresh": false,
    
                // 自定义导航栏（可理解为去除原生导航栏）
    			"navigationStyle": "custom"
    		    }
    	    }
        ],
        ...
    }

# 重难点及解决方案 #

## 1. 输入框清空按钮焦点失去问题 ##

清空按钮的存在逻辑是：当前输入框中 **有内容 **且 **焦点存在 **当前输入框中（notNull && isFocus）。该清空按钮存在焦点失去的问题，具体问题为：当点击清空按钮时，input 框失去焦点，因为我们的存在逻辑是必须有焦点才会出现，导致清空按钮消失，清空事件不会被触发。

为了解决这个问题，需要将失去焦点的事件用 setimeout 进行延迟控制，先清空后再执行失去焦点事件。该段内容与下方第2点代码进行合并讲解。

## 2. 清除内容后需要重新将 **焦点聚焦 **到对应的 input 框上。 ##

1） **u-input** 基础输入框，根据文档，给定一个 **focus** 的属性，用于手动控制获取焦点；加上 @focus 和 @blur 方法用于监听输入框的焦点获取与失去。

再加上一张清空图片作为清空按钮，给定清空事件 **clearInput**，并且只在当输入框有内容且有焦点时才进行展示（ispdFocus 是通过 input 的 @focus 事件来触发使之变为 true）。

<view>
        <u-input :focus="pd" v-model="userLoginInfo.password" type="password" :clearable="false" @focus="pdFocus" @blur="pdBlur"/>
        <view class="clear" @click="clearInput('password')" v-show="userLoginInfo.password!=='' && ispdFocus">
    		<image :src="clearImg" class="img"></image>
    	</view>
    </view>

2）data 中将 **focus** 初始值设为 false

// Script
    data() {
        return {
            focus: false,
            isFocus: false
        }
    }

3）在获取和失去焦点事件中，进行焦点是否获取的标志变化。值得一提的是，延时控制失去焦点( settimeout 设为 1)，可以让清空按钮顺利执行完清空事件后，再执行 input 框焦点失去，否则会让清空事件失效。

pdFocus() {
    	this.ispdFocus = true
    },
    pdBlur() {
    	// 失去焦点事件先于清除事件触发，因此让其延迟即可先触发 clearInput 事件
    	setTimeout(() => {
    			this.ispdFocus = false
    	}, 1)
    }

4）在清空内容的事件中编写逻辑

这里为何 pd 要先置为 false 再变为 true？focus 属性中是这样判定的，当你从 **false 变为 true** 的话，焦点才能 **聚焦 **到该 input 框上，而如果本来是从 true 变为 true 的话，那么是不发生变化的，因此无法达到将焦点聚焦在 input 框上的效果。

使用 **nextTick** 是为了保证让 **pd = false** 能够执行完毕后再进行操作，才能保证焦点的正确聚焦。

clearInput(value) {
    				switch (value) {
                        // ... 
                        // 这里编写其他输入框的判断，如 user
    
    					case 'password':
    						this.userLoginInfo.password = ''
    						this.pd = false
    						this.$nextTick(() => {
    							this.pd = true
    						})
    						break
    				}
    			}

**总结**

① 在 blur 事件中通过延时来解决清空按钮失去焦点而导致失效的问题

② 在清空事件中使用 nextTick 控制 focus 来获取焦点

## 2. 在安卓端输入框之间切换时，焦点获取逻辑混乱，键盘弹起无规律 ##

**问题描述**

在安卓端由于密码键盘的存在，导致在某些情况下与第三方键盘（如搜狗输入法）并不能很好地兼容。特别是在 **type="text"** 与 **type="password"** 之间切换时，更容易出现问题，而我发现的会导致此问题发生的，是如下的一行代码。

由于我希望在登录界面不展示出导航栏和状态栏，让其看起来更加清爽，搜索资料得知，去除状态栏（如电量等）的方法为：

onShow() {
    	// 去除状态栏
    	plus.navigator.setFullscreen(true);
    },

但是加上这行代码后，会导致我登录界面在输入框之间切换焦点时，键盘会出现混乱弹起和收入的现象，焦点的获取也变得混乱，用户体验极差，但是目前没有在 iOS 端发现有此问题。

**总结**

① 在有 input 框的界面不建议加上如上代码，容易出现获取焦点混乱。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221123/9e73217979fd4cab9b3acc1ae663d91e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/3261cd6088ed43dba3ec58458a753cad.png
[https_github.com_Jokerlsss_uni_app_login]: https://github.com/Jokerlsss/uni_app_login
[Link 1]: https://uniapp.dcloud.io/component/view
[uView]: https://uviewui.com/components/install.html
[2020092715044212.png]: /images/20221123/cc77330446654289b0511321bc073454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/1a657b7b6dc14fa4b3ff549375a33ed8.png