基本需求

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

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

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

项目地址及运行方法

Git 项目地址为：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 的组件，直接使用即可，具体使用方法参考官方文档。

uView-ui

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" 属性

<style lang="scss">/* 要写在第一行 */@import "uview-ui/index.scss"
</style>

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）

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

<!-- HTML -->
<!-- ispdFocus: 密码框是否拥有焦点；isuserFocus: 帐号输入框是否拥有焦点 -->
<view :style="(ispdFocus || isuserFocus) ? containerHeight.focus : containerHeight.blur"></view><!-- JavaScript -->
data() {return {containerHeight: {focus: 'height:800rpx;transition:0.2s',blur: 'height:1300rpx;transition:0.2s'},        }
}

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

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

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

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

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

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

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

以下交互大家可以自行思考方案，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）。

<!-- HTML -->
<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) {// ... // 这里编写其他输入框的判断，如 usercase 'password':this.userLoginInfo.password = ''this.pd = falsethis.$nextTick(() => {this.pd = true})break}}

总结

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

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

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

问题描述

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

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

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

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

总结

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

【uni-app】uni-app移动端开发 - 登录界面相关推荐

27个漂亮的移动端注册/登录界面设计作品
英文:medium 作者:Muzli 译者:设计达人链接:http://www.shejidaren.com/login-ui-for-mobile-apps.html 注册/登录界面是网站或APP ...
iOS开发-登录界面开发(6)Toast-Swift的使用-Swfit4.1_Xcode9.3.1
iOS开发-登录界面开发(6)Toast-Swift的使用-Swfit4.1_Xcode9.3.1 先看一下效果: 1.前面我们做了登录界面的UI,实现了网络请求,如果用户输入了错误的VIP号码,应该 ...
Java swing 界面开发 - 登录界面- 2021-11-10
Java swing 界面开发 - 登录界面界面开发包包的概念开发包 Java界面开发包登录界面开发步骤最简单的窗体优化窗体内容注意优化响应内容界面开发包包的概念包的加入让类 ...
PC端QQ登录界面的测试用例
PC端QQ登录界面的测试用例功能设置选项中网络设置选项能否正常使用设置选项中登录服务器选项能否正常使用不输入账号密码是否能登录输入账号与密码匹配是否能登录输入账号与密码不匹配是否能登录 ...
魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息（meta）、开发准备、移动端项目搭建（模拟器调试）、APICloud（APICloud 前端框架，获取服务端API接口）
一.移动端开发相关概念 1.APP类型 ①.Native APP Native APP又称原生APP,就是我们平时说的手机应用软件. 原生APP 是针对IOS.Android.Windows等不同的手 ...
魔方APP项目-07-客户端提交登录信息、在APICloud中集成防水墙验证码，前端获取显示并校验验证码、服务端校验验证码、保存用户登录状态，APICloud提供的数据存储、客户端保存用户登陆数据
用户登录一.客户端提交登录信息 html/login.html,代码: <!DOCTYPE html> <html> <head><title>登录& ...
JavaSwing 界面开发-登录界面
目录界面开发 Java 界面开发包介绍: javax.swing 包介绍: java.awt 包介绍: 一个基础界面开发框架搭建:熟悉创建类以及使用类创建对象,并且调用对象的方法 . 界面主体代码实 ...
ThinkPHP5.0+APP+支付宝支付服务端开发
工作环境,支付宝账号是公司的,app应用和秘钥配置都是我自己申请的,这其中的流程暂且跳过. 一.准备工作 appid.应用私钥.应用公钥.支付宝公钥二.配置文件 'alipay'=>['app ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信各地服务器如何同步,彻底搞清楚并实现多端同步登录
1.如何判断用户已经登录可以利用本地缓存判断用户是否已经登录.如:在 main.js 中封装了检查登录函数,并跳转到登录页面Vue.prototype.isLogin = function(){ t ...

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

基本需求

项目地址及运行方法

交互注意点

实现准备

1. UI 库的选择

2. 代码编辑器

主要功能及实现

重难点及解决方案

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

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

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

【uni-app】uni-app移动端开发 - 登录界面相关推荐

最新文章

热门文章

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

基本需求

项目地址及运行方法

交互注意点

实现准备

1. UI 库的选择

2. 代码编辑器

主要功能及实现

重难点及解决方案

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

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

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

【uni-app】uni-app移动端开发 - 登录界面相关推荐

最新文章

热门文章

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