只会html也可以做安卓app（附实例）

有人说我只会只会简单的html 能不能做安卓（android）手机上的app呢？答案是可以的。什么是android呢，用过手机的估计都知道了。App就是手机上的应用软件，一种移动客户端软件。掌握html，你就可以做一个HTML的网站了，这也不是APP啊。其实我们利用html写出手机屏幕大小的web页面让后放入手机浏览器内执行，就是一款web app了。在几年前的工作中有做过手机App项目，pc前端和android和ios程序员配合完成整个项目的开发，这也让我产生了学习android和ios程序开发的兴趣。于是写了第一个android程序first_app，分享给其他也想学习android移动开发的朋友或是好奇安卓app是怎么制作的朋友。Web app 也是app 的一种。可以把这个Html页面打包成app。本质上都是web，都是利用html、css、js构建的网站，不同的是，webapp利用框架技术等让你有了在使用App的感觉（比如页面不跳转刷新等）。这方面做的最好的是 HBuilder。使用它，你可以使用网页（html+css+js）快速地创建APP应用程序。并在android手机中展示和使用。（当然如果网页做得好的话，采用响应式布局，即可在手机上完美展示）。hbuilder优点：速度快，所需要的环境少，加快了开发者速度，不会因为各种JDK，java，Android环境而无法打包生成apk或ipa头疼，大大减少了开发繁琐操作。

我们首先打开web开发工具hbuilder，新建一个项目如图：

新建完成后，在项目管理器会显示新建的项目目录，其中css，img，js和index.html这几个文件可删可改可替换。

unpackage文件夹是放置app图标和启动界面的图片。

1和2是mui框架，需要的css和js文件，不懂可以不用动。

页面入口默认是index.html，根据自己项目需要，更改APP的启动页面，3是manifest.json文件是移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息，当然如果你要设置 APP 的启动图和图标，你只需要在 manifest.json 里面进行设置即可，这就是为什么不要删掉的原因！

下图为index.html的内容，很简单，在html的body中写入内容。

云打包的好处就是我们不需要在本地搭建环境，直接提交上去，打包好会返回下载链接让我下载安装包，除了生产 Android 安装包之外，还可以生成 ios 的，我们这边只测试生成 Android 的安装包。

配置完成后，点击页面下方的图标配置：配置APP在手机上的显示图标；默认是HBuilder的图标：

提交之后会需要 2-5 分钟的打包，然后生成一个 apk 安装包，就可以在手机安装使用你开发得 app 了，什么签名这些全都不用搞。

打包成功后就可以将apk文件装到到android手机上查看效果了。如图：

着移动互联网的兴起，越来越多的公司、个人把展示的内容转到了手机网站上，学会制作手机网站就成了大家关注的热点。传统的网页制作工具制作电脑端的网站功能很强大，但手机网站由于手机屏幕大小和CPU处理能力较弱，对网站的要求与传统网站有很大的不同。如果用传统的网页制作工具设计手机网站需要的技术复杂，操作难度大，一般人很难完成。如果有一个傻瓜式的工具，让用户无需复杂操作就能完成手机网站的设计，将会大受欢迎。

手机网站展示

下面就给大家推荐的就是一款这样的工具，使用它可以像搭积木一样快速完成网站的设计，再也不用被专业技术名词和操作包围，痛苦难受了。

这个软件叫WYSIWYG Web Builder，是一个所见即所得的网页设计工具，体积小巧，使用简单。这个软件最大的特点就是采用了图层概念，任何元素都是图层，可以拖放到页面上的任意位置，而不影响其他的元素，非常适合初学者使用。不需要学习html知识就可以设计一个手机网站。

WYSIWYG Web Builder

下面以设计一个网站的三个页面为例，了解一下该软件的使用，首先看一下这三个页面的实际效果。

网页实际效果

下面逐一介绍每个页面的创建过程。

一、设计网站结构

要想做网站，首先要搭建网站结构，由于是演示，这个网站只有三个页面：首页、新闻资讯、关于我们。

启动WYSIWYG Web Builder，程序自动新建一个空白页面，这个页面是PC端的，而我们要设计的是手机端网站，所以要进行更改。

在“站点管理器”中选中“无标题1”，单击站点管理器工具栏中的“新建移动页”按钮，新建一个“页面1”，重复上述操作，在新建“页面2”、“页面3”。选中index，单击工具栏中的“删除”按钮，把这个pc端的页面删除，然后分别右键单击页面1、页面2、页面3，在弹出的菜单中选择“重命名页面”，将这三个页面分别命名为index、news、about，对应于网站的首页、新闻资讯、关于我们。

站点管理器

在编辑区看到网页变成了手机的竖屏页面，上面的标签也也出现了三个页面的名称，下面就开始设计这三个页面。

二、建立首页

由四部分组成，由上到下依次是：标题、导航条、图片、页脚。

A、标题

单击“插入—文本”的命令，在页面上用鼠标拖动，产生一个文本框，双击这个文化，在其中输入文字，然后在“格式”标签页中设置字体类型、大小、颜色、排列方式等。

B、导航条

单击”插入—导航—导航栏”，在页面上拖动，生成一个导航栏，双击导航栏，打开设置对话框，单击“条目”右侧的按钮，进入导航栏对话框，在“名称”列表中选中一个选项，单击右侧的“编辑”按钮，可以设置文本名称、连接页面等参数。

导航栏对话框

单击“添加”按钮，可以新增项目，同时可以单击“向下移动”和“向上移动”按钮，调整条目的顺序。

C、图片

单击“插入—图像—从图像文件”命令，在网页上拖动，从本机中选择一个图片插入，可以拖动调整图片的大小位置。

D、页脚

单击“插入—页脚”命令，在页面上拖动，插入页脚，双击页脚打开编辑窗口，单击“条目”右侧的按钮，打开“常规”设置框，单击“添加”按钮，增加页脚中包含的内容，在打开的窗口中输入文本、指定图标、设置好连接的页面，重复以上操作，添加多个页脚内容。返回页脚设置对话框，在“图标位置”下拉列表中选择图标的显示方式，同时将标题中的Footer删除。

页脚编辑窗口

三、建立新闻资讯页

有页眉、页脚、新闻列表3部分组成。页脚与前面首页中的相同，直接复制粘贴到当前页即可。

A、页眉

单击“插入—标题”命令，在页面中拖动，生成一个页眉，它会自动处于页面顶部，双击页眉，打开设置对话框，在“左键按钮”中，将文本改为“首页”，URL指向index，将“右键按钮”中的文本改为“关于我们”，URL指向about，将“杂项”中的标题改为“新闻资讯”。

页眉对话框

B、新闻列表

单击“插入—列表视图”，在网页中插入一个列表，双击它，打开设置对话框，在“名称”列表中选中一个条目，单击“编辑”按钮设置文本、图像、连接页面等参数，单击“添加”按钮，可以添加新的条目。

列表视图

四、建立关于我们页

有页眉、页脚、可折叠面板三部分组成。页脚与前面相同，直接复制粘贴，也没设置。页眉设置不属于新闻资讯页相同，只不过是把“右键按钮”中的URL改为news，即新闻资讯页。

单击“插入—可折叠”，在页面中插入一个可折叠面板，默认有两个面板，可以双击打开设置对话框，添加更多面板。单击加号按钮展开面板，然后将需要的元素插入其中即可。

可折叠面板

五、预览网站

在首页标签中单击预览按钮或按F5键，用浏览器预览网页。

六、发布网站

制作好的网站可以直接上传到网站服务器上，也可以保存到本机上的某个目录中，在“首页”标签中单击“发布”按钮，打开发布站点对话框。

发布站点对话框

单击“新建”按钮，在“类型”列表中选择“本地文件夹”，单击“文件夹”右边的按钮，选择一个保存网站的目录，单击“确定”按钮返回。

添加发布位置

单击“发布”按钮，即可将制作好的网站保存到本机中，发布完成后，打开保存目即可浏览设计好的网站，与上传到网上的效果是完全一样。

通过上面的实战操作，我们可以体会到WYSIWYG Web Builder使用非常简单。无须html知识，只需要点击鼠标就可以完成网站的设计，简洁高效，WYSIWYG Web Builder功能非常强大，你可以在制作中逐渐学习，越用你会越喜欢他。

1.阅后如果喜欢，不妨点赞、评论和关注一下。

2.如果喜欢玩软件，请关注本头条号阅读相关文章。

3.在学习中有什么问题，欢迎与我沟通交流，号搜索：微课传媒，我在这里等你哟！

文由ScriptEcho平台提供技术支持

项目地址：传送门

手机界面卡片功能实现

应用场景介绍

本代码片段适用于构建移动设备或网页端界面的手机卡片功能。它可以通过简单的HTML、CSS和JavaScript实现一个具有逼真视觉效果和交互功能的手机卡片。

基本功能介绍

该代码实现了以下基本功能：

创建一个带有屏幕、摄像头、小部件和应用程序图标的逼真手机卡片。
摄像头可通过CSS动画模拟呼叫过程。
小部件和应用程序图标可以自定义，以适应不同的设计需求。

功能实现步骤及关键代码分析

1. HTML结构

<div class="phoneContainer">
  <div class="screen">...</div>
</div>

phoneContainer是手机卡片的容器，它定义了卡片的尺寸和背景色。
screen是手机屏幕，它包含了所有手机元素。

2. 摄像头动画

@keyframes callTransition {
  15% {
    width: 40px;
  }
  95% {
    width: 95px;
    background-color: darkblue;
  }
}

.camera {
animation-name: callTransition;
animation-duration: 1.9s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

@keyframes callTransition定义了摄像头动画的帧。
camera类将动画应用于摄像头元素，使其在呼叫过程中变宽和变色。

3. 小部件和应用程序图标

<div class="widgets">
  <div class="one"></div>
  <div class="two"></div>
</div>
<div class="apps">
  <div class="oneApp"></div>
  <div class="oneApp"></div>
  ...
</div>

widgets包含两个小部件，它们是可点击的。
apps包含多个应用程序图标，也可以自定义。

4. 状态栏

<div class="menuBar">
  <div class="twoApp"></div>
  ...
</div>

menuBar是手机状态栏，它包含了电池、信号和时间等信息。

总结与展望

开发经验与收获

了解了如何使用CSS动画创建逼真的交互效果。
掌握了使用HTML和CSS构建自定义用户界面的技巧。

未来拓展与优化

添加更多的交互功能，例如解锁、拨号和消息。
优化代码以提高性能和响应能力。
集成外部API以获取实时数据，例如电池状态和信号强度。
更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持