比较H5开发与安卓开发

已于 2024-01-12 18:04:26 修改
阅读量1k 收藏 19
点赞数 13
分类专栏： Andriod开发 文章标签： android
于 2024-01-07 23:53:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/135447126
版权

比较H5开发与安卓开发

1. 项目结构对比

H5开发项目结构：

在H5开发中，项目结构相对简单，通常包含HTML、CSS和JavaScript文件。使用Vue.js时，可能还会有一些单文件组件（.vue）。

/project
|-- /src
|   |-- index.html
|   |-- /assets
|       |-- style.css
|       |-- /images
|   |-- /components
|       |-- HelloWorld.vue
|-- package.json
Android开发项目结构：

Android项目结构相对复杂，包括了Java代码、XML布局文件、资源文件、Gradle构建文件等。

/app
|-- /src
|   |-- /main
|   |   |-- /java
|   |   |   |-- com.example.myapp
|   |   |       |-- MainActivity.java
|   |   |-- /res
|   |       |-- /drawable
|   |       |-- /layout
|   |       |-- /values
|-- /build
|-- /gradle
|-- build.gradle
|-- settings.gradle
|-- AndroidManifest.xml

2. Activity和Web页面的对比

H5开发的页面：

H5页面通常是由HTML、CSS和JavaScript构成的，它们通过浏览器呈现，用户与页面进行交互。在Vue.js中，页面结构和行为可以通过Vue组件轻松组织。

<!-- HelloWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New Message!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
Android开发的Activity：

在Android开发中，Activity是用户与应用进行交互的组件。Activity通常由Java代码编写，并在XML布局文件中定义其界面。

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = findViewById(R.id.textView);
        Button button = findViewById(R.id.button);

        textView.setText("Hello World!");

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("New Message!");
            }
        });
    }
}

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Message"
        android:layout_below="@id/textView"
        android:layout_marginTop="16dp" />
</RelativeLayout>

3. 布局和UI设计对比

H5开发的布局和UI设计：

在H5开发中，使用CSS进行页面布局和样式设计。响应式设计和Flex布局使得在不同屏幕大小和设备上呈现页面更为简单。

/* style.css */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

h1 {
  color: blue;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
Android开发的布局和UI设计：

在Android开发中，布局文件采用XML格式，使用各种布局容器和控件来定义应用的界面。适配

器和ConstraintLayout等布局方式提供了更灵活的设计选项。

<!-- fragment_my.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is my custom Fragment!"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="16dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me"
        android:background="@android:color/holo_green_dark"
        android:textColor="@android:color/white"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

4. 数据存储对比

H5开发的数据存储：

在H5开发中，数据通常存储在浏览器的本地存储（localStorage）或者通过网络请求获取。使用Vue.js的数据绑定和状态管理可轻松管理页面状态。

// Using local storage in Vue.js
export default {
  data() {
    return {
      username: localStorage.getItem('username') || 'Guest'
    };
  },
  methods: {
    updateUser(username) {
      this.username = username;
      localStorage.setItem('username', username);
    }
  }
};
Android开发的数据存储：

Android提供了多种数据存储方式，包括SharedPreferences、文件存储、SQLite数据库和Room持久化库。使用Room库可以更轻松地进行数据库操作。

// Using SharedPreferences in Android
SharedPreferences preferences = getSharedPreferences("my_preferences", Context.MODE_PRIVATE);
SharedPreferences.Editor editor = preferences.edit();
editor.putString("username", "JohnDoe");
editor.apply();

// Using Room database in Android
@Entity
public class User {
    @PrimaryKey(autoGenerate = true)
    public int id;

    @ColumnInfo(name = "username")
    public String username;
}

@Dao
public interface UserDao {
    @Insert
    void insert(User user);

    @Query("SELECT * FROM user WHERE username = :username")
    User getUserByUsername(String username);
}

5. 网络请求对比

H5开发的网络请求：

在H5开发中，网络请求通常使用JavaScript中的XMLHttpRequest对象或者更现代的fetch API。也可以使用Vue.js的生命周期函数来处理异步请求。

// Using fetch in H5
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
Android开发的网络请求：

在Android开发中，使用HttpURLConnection、OkHttp或者其他网络库进行网络请求。网络请求通常在异步任务中执行，以避免阻塞主线程。

// Using OkHttp in Android
OkHttpClient client = new OkHttpClient();

Request request = new Request.Builder()
  .url("https://api.example.com/data")
  .build();

client.newCall(request).enqueue(new Callback() {
  @Override
  public void onResponse(Call call, Response response) throws IOException {
    String responseData = response.body().string();
    Log.d("NetworkResponse", responseData);
  }

  @Override
  public void onFailure(Call call, IOException e) {
    Log.e("NetworkError", "Error: " + e.getMessage());
  }
});

6. 多线程处理对比

H5开发的多线程处理：

在H5开发中，JavaScript是单线程执行的，但通过Web Workers可以实现在后台运行脚本。Web Workers允许在独立的线程中执行脚本，以提高性能。

// Using Web Workers in H5
// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hello from main thread!');

worker.onmessage = function(event) {
  console.log('Message from worker:', event.data);
};

// worker.js
onmessage = function(event) {
  console.log('Message from main thread:', event.data);
  postMessage('Hello from worker thread!');
};
Android开发的多线程处理：

在Android开发中，多线程处理通常使用AsyncTask、Handler和Thread等类来实现。AsyncTask特别适用于在后台执行异步任务并更新UI。

// Using AsyncTask in Android
public class MyAsyncTask extends AsyncTask<Void, Void, String> {
  @Override
  protected String doInBackground(Void... params) {
    // Perform background computation
    return "Result from background computation";
  }

  @Override
  protected void onPostExecute(String result) {
    // Update UI with result
    Log.d("AsyncTaskResult", result);
  }
}

// Execute the AsyncTask
new MyAsyncTask().execute();

7. 权限管理对比

H5开发的权限管理：

在H5开发中，由于JavaScript运行在浏览器中，对于许多敏感操作（如地理位置、摄像头访问等），浏览器会弹出权限请求框，由用户手动授权。

// Request geolocation permission in H5
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    position => console.log('Location:', position),
    error => console.error('Error getting location:', error)
  );
} else {
  console.error('Geolocation is not supported in this browser.');
}
Android开发的权限管理：

在Android开发中，权限管理是一个重要的安全考虑因素。开发者需要在AndroidManifest.xml中声明需要的权限，并在运行时请求敏感权限。

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

// Request location permission in Android
if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION)
    != PackageManager.PERMISSION_GRANTED) {
  // Permission is not granted, request it
  ActivityCompat.requestPermissions(this,
      new String[]{Manifest.permission.ACCESS_FINE_LOCATION},
      MY_PERMISSIONS_REQUEST_LOCATION);
} else {
  // Permission already granted
  // Proceed with the operation
}

8. 数据绑定对比

H5开发的数据绑定：

在H5中，数据绑定通常通过Vue.js实现。Vue.js的响应式系统可以轻松地将页面元素与数据模型绑定，实现数据的双向绑定。

<!-- Using Vue.js for data binding in H5 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="Type something...">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
Android开发的数据绑定：

在Android开发中，数据绑定可以通过findViewById和ViewBinding来实现。ViewBinding是一种更现代的方式，通过生成绑定类，提供对视图的类型安全访问。

// Using ViewBinding for data binding in Android
// activity_main.xml
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.textView.setText("New Message!");
    }
}

9. 特殊权限对比

H5开发的特殊权限：

在H5中，对于一些特殊权限（如地理位置、摄像头、麦克风等），浏览器通常会在用户尝试访问这些资源时弹出权限请求框，由用户手动授权。

// Request camera permission in H5
if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => console.log('Camera access granted'))
    .catch(error => console.error('Error getting camera access:', error));
} else {
  console.error('MediaDevices API is not supported in this browser.');
}
Android开发的特殊权限：

在Android开发中，特殊权限需要在AndroidManifest.xml中声明，并在运行时请求。例如，使用相机需要声明CAMERA权限，并在运行时请求。

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.CAMERA" />

// Request camera permission in Android
if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
    != PackageManager.PERMISSION_GRANTED) {
  // Permission is not granted, request it
  ActivityCompat.requestPermissions(this,
      new String[]{Manifest.permission.CAMERA},
      MY_PERMISSIONS_REQUEST_CAMERA);
} else {
  // Permission already granted
  // Proceed with camera operation
}

10. Material Design对比

H5开发的Material Design：

在H5开发中，Material Design可以通过引入Google的Material Design库或使用一些第三方库来实现。这些库提供了Material Design规范中定义的组件和风格。

<!-- Using Materialize CSS for Material Design in H5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- A button with Material Design style -->
<a class="waves-effect waves-light btn">Click me</a>
Android开发的Material Design：

在Android开发中，Material Design是系统内置的设计语言，可以直接通过使用Android原生的控件和样式来实现。

<!-- Using Material Design in Android -->
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    style="?android:attr/borderlessButtonStyle"/>

11. 总结与学习资源

H5开发与安卓开发的总结：

  • 项目结构和语言差异： H5开发通常使用HTML、CSS、JavaScript，项目结构相对简单。而安卓开发使用Java或Kotlin，项目结构更复杂，包含Java代码、XML布局文件等。

  • 页面和UI设计： H5使用HTML、CSS进行布局和样式设计，而安卓开发使用XML和Java/Kotlin代码进行界面设计。

  • 数据存储： H5使用浏览器的本地存储或进行网络请求，而安卓提供SharedPreferences、文件存储、SQLite数据库等多种数据存储方式。

  • 网络请求： H5使用XMLHttpRequest或fetch API进行网络请求，安卓使用HttpURLConnection、OkHttp等。

  • 多线程处理： 在H5中，可以使用Web Workers实现多线程。而在安卓中，多线程处理通常使用AsyncTask、Handler和Thread等类。

  • 权限管理： H5通过浏览器自动弹出权限请求框，而安卓需要在AndroidManifest.xml中声明和在运行时请求权限。

  • 数据绑定： H5使用Vue.js等框架实现数据绑定，而安卓可以使用findViewById和ViewBinding。

  • 特殊权限： H5通过浏览器实现对特殊权限的访问，而安卓需要在AndroidManifest.xml中声明和在运行时请求。

  • Material Design： H5可以引入Material Design库，而安卓原生支持Material Design。

学习资源推荐：

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历，让大家更好学习编程，我的抖音，B站也叫极客李华。

极客李华
关注
  • 13
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于HTML5的Android开发
10-30
基于HTML5的Android开发，如何适配多分辨率的Android设备
移动端产品iOS, Android, 小程序, H5, 混合开发优劣对比
AI架构师易筋
04-24 3097
移动端产品优劣对比 移动端产品包括小程序（本文特指微信小程序）、APP（安卓、iOS）、H5页面。其中： 小程序是一种不需要下载安装就可以使用的应用，可以在微信APP中直接打开使用（目前限制只适用于中国市场）； APP则是基于安卓和iOS手机操作系统开发的，能安装在智能手机上运行的的手机软件；App嵌入H5的混合开发，比如Reactnative，Vue.js，这会比完全Native开发成本大大降...
h5移动端开发框架，，写给程序员的Flutter详细教程
最新发布
Y1567409的博客
03-13 863
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
安卓Android与H5（JS）交互（双向）
09-03
安卓Android与H5（JS）交互（双向）开发Demo, 1,提示H5调用 2,安卓原生调用H5 3,JS反向调用安卓原生方法
【安卓（Android）原生与H5开发区别】
CH_Y的博客
03-01 823
Android原生语言开发，指的是使用Java或Kotlin等编程语言对Android应用程序的用户界面部分进行开发。Android编程语言可以直接调用底层系统的API与功能。H5开发是指使用HTML、CSS和JavaScript等前端技术进行开发，通过浏览器来运行应用程序。
App中3种开发方式：原生、混合和H5异同
晴天的博客
07-21 2214
原生应用开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如android是利用java、eclipse、Android studio，IOS是利用Objective-C 和Xcode进行开发。原生应用由于利用的是官方提供的语言和工具并且能够直接操控硬件设备（比如多点触控、NFC、读取短信等），在应用性能上和交互体验上应该是最好的，但是原生应用的可移植性比较差，特别是一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套。 原生a
H5基本开发1——（H5简单概述）
m0_59749255的博客
11-16 5063
HTML是用来描述网页的一种语言HTML指的是超文本标记语言，是一种用于创建网页的标准标记语言标记语言是一套标记标签HTML使用标记标签来描述网页HTML文档的后缀名：.html或者.htm，两种后缀名没有区别，都可以使用HTML5是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定HTML5的设计目的是为了在移动设备上支持多媒体http协议：超文本传输协议—tcp。
一站式解决：H5开发全攻略，看这篇让你省时又省力
u012384510的博客
07-16 701
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信lxchuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北|河南籍前端群，可加我微信进群。公众号回复【相亲】关键词可以获取男生、女生的菜单~❝在腾讯做的是H5开发相关的项目，也就是做了很久...
移动端H5网页开发必备知识
苏纯的博客
11-16 5641
工欲善其事必先利其器，今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。后面笔者还会再出移动端常见问题汇总。 像素 像素即一个小方块，它具有特定的位置和颜色。图片、电
如何用H5的方式开发App,Vue开发App
qq_37550440的博客
01-23 956
如何以H5的方式开发app Vue开发一个app
android原生组件与h5混合开发
12-12
android原生组件与h5混合开发
Android+H5混合开发，扫条码识别商品信息
08-24
Android+H5互调，H5调原生Android代码扫码设别商品信息返回到H5页面 开发工具：Android studio4.0，项目是最新的Androidx，开发时间：2020/07/28 代码最后优化于：2020/08/24 演示地址：...
H5混合开发app如何升级的方法
09-27
本篇文章主要介绍了H5混合开发app如何升级的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android混合开发之H5调用系统相机和相册
01-03
曾经接触一个项目，需要利用H5显示页面，于是自然而然想到了WebView。又由于Android系统自带的WebView被人吐槽过多，所以决定使用腾讯封装的X5内核的WebView，使用和方法上和系统的相差不大。 第一步：在布局中使用...
android 混合开发 webview java 和 h5
03-03
android 混合开发 webview java 和 h5 博客介绍地址：https://blog.csdn.net/weixin_42749765/article/details/88086273
Android原生内嵌H5开发小结
易寻资料的博客
01-21 4279
自用笔记 外包公司，为了节约成本，采用Android内嵌H5模式开发，便于在安卓移动端上直接复用页面， 从而提高开发效率。同时改动时候只需改动H5页面，无需改动客户端。 实现的原理： 本质是：Java代码和Javascript调用 H5页面，只是Html的扩展，Javascript用来处理页面的逻辑 Android和H5互调案例: 一.java调用js 1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方
Android——最简单的 Android H5 混合开发
GSLS
10-16 3143
Android——最简单的 JS H5 交互
Android 原生开发、H5、React-Native使用利弊和场景技术分享
热门推荐
zhangxinjin的博客
06-28 1万+
最近工作中接触到React-Native框架，对其进行一些技术分析，结合之前了解的H5的一部分，加上自己做了很久的原生开发（十几个android app、sdk，包括2个ios）, 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围，作为个人知识的记录，也作作为公司内部互相学习的分享。 一、原生开发          原生开发是系统自带的app开发方式，也是大部分人最熟
adnroid开发 h5播放音频
02-02
Android开发中，可以使用H5播放音频，具体可以通过WebView来实现。WebView是Android提供的一个控件，可以加载和显示网页内容，包括H5页面。 首先，在Android的布局文件中添加一个WebView控件，用于显示H5页面。然后，通过代码获取到WebView的实例，并设置WebView的设置，使其支持JavaScript和音频播放功能。 接下来，加载H5页面，可以通过WebView的loadUrl()方法加载一个具体的网址，或者用loadData()方法加载一个Html的字符串。 在H5页面中，可以通过HTML的audio标签来播放音频。你可以在H5页面中添加一个音频元素，并设置音频文件的路径，并通过JavaScript代码来控制音频的播放、暂停等操作。 在Android开发中，可以通过WebView的addJavascriptInterface()方法来将Android的原生方法暴露给H5页面。这样，H5页面就可以调用Android的方法来控制音频的播放。 在Android中，可以使用MediaPlayer类来实现音频的播放功能。可以在Android中定义一个MediaPlayer对象，并在H5页面中调用该对象的方法来控制音频的播放。 当需要控制音频播放时，可以在H5页面中调用Android的方法，通过MediaPlayer对象来播放音频。 以上就是在Android开发中，通过使用WebView和H5技术来实现音频播放的基本步骤。具体的实现还需要根据具体的需求和情况来进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值