Android开发者快速上手Web前端开发

发表于 |

前言

我们都知道Web前端主要由HTML CSS 和JS三部分语言组成, 其中HTML和CSS负责界面, JS负责事件逻辑

任何一个应用, 无非就是界面和事件两大块组成, 本文主要介绍如何快速上手界面的编写

控件对比

Android应用界面的编写主要通过控件的排列组合, 常用的控件有TextView, EditText, ImageView, 那么在Web前端中也有类似于Android中的控件,只不过在前端中不叫控件, 而叫标签, 部分对比如下:

Html标签 Android控件
img标签 ImageView
input标签和textarea标签 EditText
button标签 Button
h系列标签,p标签,span标签 类似于TextView
div标签 类似于水平方向的LinearLayout

容器标签和文本标签以及叶子标签的区别:

  • 容器标签: 里面可以嵌套其他标签, 比如div标签
  • 文本标签: 里面可以填充文本显示, 比如p标签
  • 叶子标签:里面既不可以嵌套标签也不可以嵌套文本, 比如img标签

当然, 有些标签既是容器标签又是文本标签:

标签 容器标签 文本标签 叶子标签
div √ √ ×
p × √ ×
span √ √ ×
h系列 √ √ ×
button √ √ x
img × × √
audio × × √
video × × √

除此之外, 有的标签本身自带换行符:

标签 开头自带换行符 结尾自带换行符
div √ √
h系列 √ √
button x x
p √ ×
ul √ √
span × ×
img × ×
audio × ×
video × ×

关于控件的宽高显示:

样式属性 Android宽高属性
display:block android:layout_width=”match_parent”
display:inline android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
display:inline-block android:layout_width=”自定义”
android:layout_height=”自定义”

关于元素的位置定位:

标签 Android控件
position:absolute
元素的位置以浏览器窗口为参照摆放		 相当于设置成为Framelayout的子控件
position:relative
元素位置以邻近元素为参照摆放		 相当于设置成为LinearLayout的子控件
position:fixed
元素的位置以浏览器窗口为参照摆放, 但是不随滚动条移动		 相当于在ScrollView上层增加一个固定控件
position: sticky
粘性定位, 元素滚动超出页面时切换为fixed模式		 和Android中粘性控件一样
position: static
默认状态,此时top left right bottom等属性均无效

也就是说, top left right bottom这几个属性需要和position配合使用

关于自定义控件(标签)

在Android中除了官方提供的原生控件外, 我们还可以自定义控件, 那么Web前端可以吗?

如果放在以前肯定不行, 只能使用官方提供的html标签, 现在nodejs环境下可以实现自定义标签, 比如vue中:

image-20210806111608395

在Android中我们可以对控件设置相应的属性, 并且把共同的属性抽取到style文件中

那么Web前端也一样, 只不过属性和样式分开处理,抽取出来样式放置在style标签下, 如果单独放到一个文件中, 那么这个文件的后缀必须为.css, 所以我们又称之为CSS样式表 或者CSS语言

事实上, 我们会发现, Android的界面编写方式很多都是参考的Web前端

小练习:

  1. 写一个左侧带图标的文本:

    image-20210806122728724

    只要一个img标签和一个span标签够了:

    1
    <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>

    效果如下:

    成墨文档

    接下来需要给内容增加一个超链接, 所以在最外层包裹一个a标签

    1
    <a><img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span></a>

    效果如下:

    成墨文档

    考虑到这个内容属于网站的网站标题, 为了利于seo 因此最外层再包裹一个h1标签, 此时文本也变大

    1
    2
    3
    4
    5
    <h1>
      <a class="navbar-brand" href="/web/homepage/index">
      <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>
      </a>
      </h1>

    效果如下:

    成墨文档

  2. 写一个网站导航条:

    image-20210806154307953

    html代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div  id="navbar">
       
       <h1>
        <a class="navbar-brand" href="/web/homepage/index">
        <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>
        </a>
        </h1>
          
            <ul >
    <li><a href="/web/homepage/index">首页</a></li>
    <li><a target="_blank" href="https://www.xxx.com/pricing">价格</a></li>
    <li><a href="http://blog.xxx.com/">博客</a></li>
    <li><a href="https://docs.xxx.com/#/">帮助文档</a></li>
    <li><a href="/web/homepage/apidoc">API</a></li>
    <li class="long-li nav-item"><a href="/web/signup/sign_up" id="btn-register">免费注册</a></li>
    <li class="short-li nav-item"><a href="/web/login">登录</a></li>
    </ul>
    </div>

    效果如下:

成墨文档 

<ul >
   <li><a href="/web/homepage/index">首页</a></li>
<li><a target="_blank" href="https://www.xxx.com/pricing">价格</a></li>
<li><a href="http://blog.xxx.com/">博客</a></li>
<li><a href="https://docs.xxx.com/#/">帮助文档</a></li>
<li><a href="/web/homepage/apidoc">API</a></li>
<li class="long-li nav-item"><a href="/web/signup/sign_up" id="btn-register">免费注册</a></li>
<li class="short-li nav-item"><a href="/web/login">登录</a></li>
</ul>

我们需要给其添加相应的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style >
   #navbar{
 /*固定在顶部*/
   position: fixed;
   top:0px;
   left:0px;
   width:100%;
   height:64px;
   background-color:#AAAAAA;
   padding-left:50px;
   padding-right:20px;
   display:flex;
       align-items:center;/*指定垂直居中*/
   }
ul{

  display: inline-block;
     /*列表向右浮动*/
			float: right;
}
h1{
  display:inline;
}
li{
  /*去除列表中的原点样式*/
  list-style: none; 
  
 
   /*列表从左向右浮动*/
			float: left;
    margin-left: 40px;
} 

a{
  /*取消超链接下划线*/	
  text-decoration: none;

}
</style>

以上是比较基础的练习, 熟悉的差不多了后, 我们开始进入到使用vue的开发阶段

Vue快速上手

环境配置:

vue项目创建:

第一步 安装vue:

1
npm install -g @vue/cli-service-global

第二步 创建脚手架(模板工程)

1
2
3
4
vue create hello-world

#或者直接使用图形化界面创建
vue ui

这里直接使用图形化创建:

image-20210806115245063

创建后自动生成相应的文件和目录, 目录结构如下:

image-20210806115856398

image-20210806162357285

image-20210806170246960

大部分和原生相比差别不大, 但是开发上更加高效,具体参考:

Vue入门基础语法

为什么选择vue

vue只是一个开发框架 或者理解为一个中间人, 它借助于nodejs环境, 使得我们可以采用MVVM的模型, 同时集成第三方各种插件, 方便而又快速地组件化开发, 相比原生而言整体的架构也更加清晰, 后期维护也得心应手

当然, 你也可以使用其他前端框架, 比如Facebook的React框架, 或者Google推出的Angular框架, 未来也可能出现新的框架, 但有一点是不会变的, 不管是什么框架, 它编译出来最终文件还是html css和js, 因为 目前浏览器只识别这三种文件

本文为作者原创 转载时请注明出处 谢谢

img

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%