⽤h5+实现APP简单登录页⾯
# 简单介绍
最近接到公司⼀个移动APP项⽬开发任务，公司决定采⽤跨端技术来实现⼀套代码同时兼容安卓和苹果端⼿机，于是我评估了⼀下最后决定采⽤dcloud平台提供mui和htlm5+技术来实现，其实现在市⾯上有很多优秀的跨端开发技术⽐如facebook的react native、Googl的flutter、还有阿⾥weex等等他们也有各种特⾊，⽽我为什么选择dcloud呢？原因是我之前⼀直做原⽣APP开发对web技术栈不是很熟，想借此机会可以学习web相关技术，还有就是⽬前项⽬马上要启动了dcloud相⽐其他框架学习成本较低。，好了接下来我就分享⼀下我使⽤dcloud开发app的经历吧。
1、⽤dcloud开发H5移动APP需要⽤到什么技术？
html/html5标记语⾔⽤于编辑APP页⾯容器和控件
css样式语⾔⽤于对APP页⾯控件进⾏渲染
javascipt技术⽤于开发APP的业务逻辑层
2、dcloud介绍
dcloud是⼀家云服务器开发公司他为开发者提供了 ⼀套⽤于Html5开发APP的UI和api框架
其中MUI框架是⼀套dcloud根据移动端⾃⾝的特性封装的⼀套适合⼿机端展⽰的控件UI库，我们可以直接⽤他们封装好的控件，此框架采⽤的技术就是html+css。另外⼀个叫5+Runtime咱们它简称5+他的⼯作原理是⽤通过javaScipt代码去调⽤安卓和苹果系统⽤于开发原⽣API接⼝。这样就达到了只需要写⼀⾏javascipt代码就可以同时调⽤安卓和苹果api的⽬的。
3、实现⼀个登录页⾯功能
我⽤的是dcloud提供的IED叫HBuilderX是⼀款很好⽤开发⼯具个⼈感觉体验还不错。
第⼀步 创建项⽬
新建项⽬选择5+APP、输⼊项⽬名、选择好项⽬存放⽬录、选择MUI项⽬（会⾃动给你集成MUI框架）然后点击创建。
第⼆步 编写代码实现⼀个简单登录页⾯
咱们先看看项⽬⽬录如图
如上图所⽰项⽬包括3个⽂件夹和2个⽂件，其中css⽂件夹⽤于存放css样式⽂件负责APP页⾯控件效果渲染、html⽤于存放html⽂件负责APP 页⾯控件布局、js⽂件夹存放的是javascriot⽂件⽤实现APP业务逻辑、index.html⽂件是⼀项⽬默认⼊⼝页⾯。 mainifest.json是⽤有配置app 开发的时候需要调⽤⼿机设备的某些权限和APP⾃⾝的⼀些配置⽐如调⽤摄像头、设置APP桌⾯图标等。
⾸先我们在html⽂件夹新建Login.html⽂件然后打开就可以开始我们的页⾯布局代码的编写了。编写前简单思考⼀下⼀个登陆页⾯需要设计哪些元素？，我在这⾥设计的⼀个账号输⼊框⼀个秘密输⼊框和⼀个登陆按钮这样⼀个简单登录页⾯就实现了，废话不多说直接上代码如下。
<!DOCTYPE html>
//登录页⾯
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="../js/vue.min.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.min.js"></script>
<style type="text/css">
.con {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.con-h1 {
margin-top: 90prx;
}
</style>
</head>
<body>
<div class="con">
<h1 class="con-h1">登录页⾯</h1>
<input type="text" id="account" class="mui-input-clear" placeholder="请输⼊账号" />
<input type="password" id="pwd" class="mui-input-password" placeholder="请输⼊密码" />
<button type="mui-button" onclick="login()">登录</button>
<button type="mui-button" onclick="phoneVail()">注册</button>
</div>
</body>
</html>
我的具体实现步骤如下
1、我定义了⼀个.con样式来定义整个页⾯div容器。他实现功能是弹性布局页⾯，长⾼度设置100%并且让⼦元素成垂直布局代码如下。
.con {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
2、我⽤2个<input>分别实现账号输⼊框和密码输⼊框在<input>中我⽤到了4个属性分别为（type、class、id、placeholder）type设置input 输⼊内容类型账号设置为text密码设置为password，id属性⽤有代表元素的唯⼀标识。⽤于写逻辑的时候区分指定的元素标签，class属性⽤于设置控件css样式。我⽤了mui库提供的mui-input-clear和mui-input-password，placeholder属性⽤于提⽰⽤户输⼊框需要输⼊什么内容，可由开发者⾃定义代码如下。
<input type="text" id="account" class="mui-input-clear" placeholder="请输⼊账号" />
<input type="password" id="pwd" class="mui-input-password" placeholder="请输⼊密码" />
3、实现button按钮
我⽤<button>标签实现登录按钮 type我采⽤了mui提供mui-button类型。在style属性⾥⾯可以直接编写css样式脚本代码。我这⾥设置的离上⾯控件距离50px。"margin-top: 50px;"
4、调试运⾏
调试可以有两种⽐较的模式第⼀种是⽤⼿机⽤usb线连接电脑另外⼀种是下载个安卓模拟器现在⽹上很多⼿游模拟器下载，下来可以直接⽤的，
我这⾥⽤的⽹易的mumu模拟器。
接下来保存代码->选择菜单栏运⾏->⼿机或者模拟器到你的项⽬和模拟器点击运⾏->OK运⾏成功
如图
ps：模拟器链接不上怎么办？
建议在模拟器⾥⾯下载⼀个应⽤宝APP然后启动它，它会⾃动下载和mBuilderX连接的驱动程序。然后你在IDE运⾏看看能否到⾃⼰的模拟器。实在不⾏就⽤⼿机通过USB链接电脑。
不管在模拟器还是⼿机上调试应⽤的时候它都会⾃动安装⼀个的H5基座应⽤，你的应⽤就是在这个基座⾥⾯展⽰。
业务逻辑部分
这⾥我只是写了⼀个简单登录逻辑⽅法，⽅法功能是获取账号和密码输⼊框的输⼊值，并做⾮空判断。如果为⾮空就跳⼊主页⾯，如果为空就弹出提⽰框，login()⽅法代码如下。
<script type="text/javascript">
function login() { //登录
var account, password;
account = ElementById("account").value;
password = ElementById("pwd").value;
console.log("=================参数长度===================" + password.length)
if (account.length == 0 || password.length == 0) {
console.log("=================参数为空===================")
mui.alert('参数不能为空', '温馨提⽰')
} else {
console.log("==============登录===========")
mui.openWindow({
手机上可以打html与css的appurl: 'shenbao.html'
})
}
}
</script>
app的业务逻辑代码是通过javascript脚本语⾔编写，并且需要放在在<script type="text/javascript"></script>中实现步骤如下
1、我这⾥定义了两个变量account,password两个变量来获取账号和密码输⼊框的值， ⽤此⽅法
2、然后我通过分别判断account和password变量的长度来判断值是否为空如果等于0代表值为空否则代表有值。
3、验证，如果输⼊值为空我⽤mui框架提供的mui.alert（）⽅法弹出提⽰⽤户值不能为空对话框。如果有值就⽤mui.openWindow({ url:'本地项⽬指定页⾯路径'})打开登录后的页⾯。
好了通过h5实现⼀个简单APP登录页⾯就讲完了。如果有什么表达不准确的地⽅请指出来，⼤家⼀起纠正进步。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论