移动App开发日志开发实例

简单的移动端App开发案例，持续更新。。。

案例是在HBuilder中开发完成的，因为能够方便的一边编写一边及时查看显示结果，而且编写完成后的打包也是简便（可以通过编写web移动app便捷的云打包为apk文件上传实机测试）。

——然后，案例比较简单，是我作为初学者学习的案例，见笑。。。

第一天实现简单的基本界面

界面设计（ps：因为初学者的缘故，所以没有想太过复杂的界面规划）

将页面分为三个div块，分别为Top\Content\Footer，作为标题，内容，底部标签区块。

Content内容块可以滚动，但Top和Footer区块不受滚动条影响。

Footer底部区块平分三块嵌入类似于button的标签。

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><script type="text/javascript">document.addEventListener('plusready', function(){//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"});</script><style>body{margin: 0px;padding: 0px;}.body{border:1px solid #000;position: absolute;height:100%;width: 100%;}/*头部*/.top{height: 10%;width: 100%;position: fixed;background-color: #084981;top: 0px;}/*内容*/.content{position: relative;height: 75%;margin-top: 10%;}/*底部*/ .foot{position: fixed;height: 15%;width: 100%;background-color: #084981;bottom: 0px;}/*标签图片*/.pic{width: 100%;height: 70%;height: auto;width: 33.3%;}/*底部三分区块*/.cell{float: left;height: 100%;width: 33.3%;text-align: center;}/*第一块*/.cell-1{height: 80%;}/*第二块*/.cell-2{height: 80%;}/*第三块*/.cell-3{height: 80%;}/*Top中的标题字*/.top-title1{height: 70%;font-size: 40px;color: #fff;}.top-title2{height: 30%;font-size: 12px;color: #fff;}/*底部标签字体*/.foot-font{height: 20%;color: #FFFFFF;}</style>
</head>
<body><!--外部div--><div class="body"><!--头部--><div class="top"><div class="top-title1"><center><label>装机网</label></center></div><div class="top-title2">购买电脑配件，选配电脑方案，旧机甩卖就上装机网！</div></div><!--内容--><div class="content"></div><!--底部--><div class="foot"><!--menu标签--><div class="cell"><div class="cell-1" id="menu"><img src="img/菜单.png" style="height: 100%;"/></div><center><div class="foot-font">目录</div></center></div><!--wifi标签--><div class="cell"><div class="cell-2" id="share"><img src="img/wifi.png" style="height: 100%;"/></div><center><div class="foot-font">分享</div></center></div><!--pay标签--><div class="cell"><div class="cell-3" id="pay" ><img src="img/付款.png" style="height: 100%;"/></div><center><div class="foot-font">支付</div></center></div></div></div>
</body>
</html>

效果：

说说第一天遇到的问题（ps：幼稚的问题：））））：

1.底部标签图片自适应问题：

编写伊始，嵌入图片用的是<img>标签，然后在CSS样式中一直纠结父容器cell的宽高百分比（想着调width,height自适应，结果在网页上显示出来会不完整，而且图片被拉伸）。

然后解决办法：①网上看到可以将图片设置为background-image，然后通过属性background-size调整大小，再通过background-position设置图片位置为center可以达到图片自适应的效果。其实这个也很麻烦。。。

②简单的方法其实“近在眼前”，说来也是对style属性的不了解，在<img>标签中可以设置style属性，给到height:100%，width默认就可以。这样做的前提是，设置父容器cell的宽高为百分比，比如底部三分div，我们用到的就是float浮动布局+宽度width百分比，父容器的cell就会自适应的平分，然后图片再自适应父容器cell。

2.Content滚动，Top、Footer不受滚动条影响：

这个问题其实也源自于对CSS中的position属性的概念模糊不清。就不赘述跌倒的过程，直接摆position概念，已警示自己。

position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

position属性：

static定位：顾名思义，静态定位。元素不会受到top、right、bottom、left的值的影响，忽略z-index设置的值。

fixed定位：绝对定位。元素相对于浏览器窗口进行定位，当浏览器出现滚动条时，不会随页面滚动而移动，就比如页面上浮动的广告。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

absolute定位：绝对定位（区分fixed定位）。元素相对于static以外的第一个父容器进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

inherit定位：从父元素继承position的值。

relative定位：相对定位。相对于其正常位置进行定位。所以，“left：50”就是在元素的left位置添加50像素。

第二天实现底部标签响应事件（跳转页面），简单的实现一下页面效果。

——另外将样式代码单独作为CSS样式文件，增加复用性，因为涉及到了多个页面。

1.先摆一下文档结构

2.编写如上除Index.html（目录页）之外的pay.html页面和share.html页面，然后实现跳转页面。

页面跳转的方法：<a href="http://www.baidu.com"></a>跳转

JavaScript中通过全局对象document调用location来实现页面跳转，语句：document.location.href="http://www.baifu.com";

我选择的是在JavaScript中通过调用location实现跳转。

分别在三个页面中的底部标签的div中添加onclick点击事件。每个页面添加的都是两个，不包括本页页面的标签。

标签代码：

 <!--menu标签--><div class="cell" id="menu""><div class="cell-1"><img src="img/菜单.png" style="height: 100%;"/></div><center><div class="foot-font">目录</div></center></div><!--wifi标签--><div class="cell" id="share" οnclick="share()"><div class="cell-2" id="share"><img src="img/wifi.png" style="height: 100%;"/></div><center><div class="foot-font">分享</div></center></div><!--pay标签--><div class="cell" id="pay" οnclick="pay()"><div class="cell-3" id="pay" ><img src="img/付款.png" style="height: 100%;"/></div><center><div class="foot-font">支付</div></center></div>

JavaScript代码：

//Index.html

<script type="text/javascript">document.addEventListener('plusready', function(){//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"});function share(){window.location.href="share.html";}function pay(){window.location.href="pay.html";}</script>

同样的

//Share.html

function index(){window.location.href="index.html";}function pay(){window.location.href="pay.html";}

同上

//Pay.html

function share(){window.location.href="share.html";}function index(){window.location.href="index.html";}

然后就实现了三个页面点击标签来回跳转。。。

效果图：

Index.html share.html pay.html

3.在Index.html目录页面中添加搜索框searchbar——功能未实现（关于JavaScript要在明天学习JavaScript后进行详细规划后编写。包括目录页面中content布局的内容，是用table表格做出来的暂时预览；分享页面的分享功能仅是将input中的内容显示在第一行textarea中，没有实现与数据库的交互，还在纠结使用IndexedDB还是WebStorage）。

在top和content布局中间添加新布局

代码：

<!--搜索框--><div class="seaerchbar"><form action="list.jsp" method="get">品牌：<input type="text" style="width: 100px;"/>价格区间：<input type="text" style="width:50px;"/>~<input type="text" style="width: 50px"/><input type="submit" value="查询" /></form></div>

CSS样式：

.seaerchbar{display: block;margin:80px 0px;position: fixed;background-color: #FCFCFC;}button,input,optgroup,select,textarea{font: inherit;margin: 0;color: inherit;}

4.在share.html分享页面添加底部分享栏。

代码：

<div class="content"><ul><li><img src="img/head.png" style="width: 10%;height: auto;"/><textarea class="share_textarea" id="share_text"></textarea></li></ul><!--底部分享表单--><div class="sharebox"><input type="text" id="share_input" class="share_input"/><input type="button" name="button" id="release_button" value="发布" οnclick="release()" class="share_button"/></div></div>

CSS样式：

                ul{padding-left: 0px;list-style: none;width: 100%;height: 10%;}ul li{border: 1px solid #6B6B6B;padding-left: 0px;float: left;}.share_textarea{width: 80%;height:auto;font-size: 30px;}.sharebox{display: block;height: 60px;width: 100%;position: fixed;background-color: #FCFCFC;margin-top: 89%;}.share_input{width: 80%;}.share_button{width: 18%;}

JavaScript的简单参数传输：

function release(){var text = document.getElementById("share_input").value;if(text){document.getElementById("share_text").value=text;}}

效果（只实现了内容参数传输，没有与数据库交互）：

今天纠结于数据库是使用IndexedDB和WebStorage。。。最后还是不知道，明天问问老师后决定。

移动App开发日志开发实例相关推荐

Android开发日志打卡APP（二）
Android开发日志打卡APP(二) 文章目录 Android开发日志打卡APP(二) 前言开发过程一.背景和标题二.日志图标三.日志弹框前言在之前的文章中,准备工作已经完成,现在我们将 ...
android tv 云播放器,Android TV开发总结（六）构建一个TV app的直播节目实例
近年来,Android TV的迅速发展,传统的有线电视受到较大的冲击,在TV上用户同样也可以看到各个有线电视的直播频道,相对于手机,这种直播节目,体验效果更佳,尤其是一样赛事节目,大屏幕看得才够痛快, ...
Android开发日志打卡APP（一）
Android开发日志打卡APP(一) 文章目录 Android开发日志打卡APP(一) 简介界面展示内容总结 1.控件 2.布局 3.技术开发过程准备工作启动页面底部导航栏简介初 ...
地图APP开发日志 Day 1
目录地图APP开发日志 Day 1 前期准备功能地图显示注意定位失败无法显示定位蓝点手动定位地图APP开发日志 Day 1 一个基于高德SDK个人地图项目为什么要自己写? 不想要广告 ...
【徕卡全站仪Geocom开发】开发日志#01
前言不知道能写多久的开发日志,先将就着写着看看,也算是对自己当前的总结和未来的鞭策吧. 本人从21年10月份开始接触前端开发,22年3月份开始接触app开发,对一些原生的安卓语言可能不太了解甚至可能 ...
近期业务大量突增微服务性能优化总结-2.开发日志输出异常堆栈的过滤插件
最近,业务增长的很迅猛,对于我们后台这块也是一个不小的挑战,这次遇到的核心业务接口的性能瓶颈,并不是单独的一个问题导致的,而是几个问题揉在一起:我们解决一个之后,发上线,之后发现还有另一个的性能瓶颈问 ...
Win10+Python+Django+Nginx+MySQL开发教程及实例（1）——开发环境搭建
Win10+Python+Django+Nginx+MySQL开发教程及实例 PaulTsao 本教程共有三篇内容: 第一篇:Win10+Python+Django+Nginx+MySQL 开发环境搭 ...
android studio小案例代码,AndroidStudio开发小相册实例
郑州app开发AndroidStudio开发小相册实例代码如下. 布局代码如下: java代码如下: package cn.xhhkj.xhhkjtest; import android.app.Ac ...
微信支付 php编程,PHP编程：微信支付开发交易通知实例
<PHP编程:微信支付开发交易通知实例>要点: 本文介绍了PHP编程:微信支付开发交易通知实例,希望对您有用.如果有疑问,可以联系我们. 一.交易通知用户在成功完成支付后,微信后台通知( ...

移动App开发日志开发实例

简单的移动端App开发案例，持续更新。。。

移动App开发日志开发实例相关推荐

最新文章

热门文章