如果你是一名 Web开发者,想把自己开发的页面打包编译成 App在手机运行,但是你对 Java 和 Android 一窍不通,那么本文章将指引你如何将Web项目走向安卓平台,去除任何浮躁,跟着本文操作起来吧1.参考文档
- HbuilderCloud
- HBuilderX安卓离线打包教程全一览——5+app
- DCLOUD社区
2.材料准备
- AndroidStudio
- HBuilderX
- SDK (网盘提取码:neqx,最新请访问: https://nativesupport.dcloud.net.cn/AppDocs/download/android)
3.打包Web项目项目打包将 Vue 或者 React 使用的webpack把代码项目进行打包 如果没玩过 MVVM框架随便什么hello world的html项目也可以,不一定非要打包只要网页能打开就行, 这里以Vue+Webpack为例:打包之后生成 index.html 和 dist目录
我这里的项目浏览器打开之后是移动端的html5页面,如下图:
注意这里只是页面,不是APP,移动端页面,接下来的任务就是要把这个html开发的页面打包成安卓AppHbuilderX打包打包好之后,打开 HbuilderX, 创建5+App项目
创建后,将左侧默认文件除了 manifest其他都删掉,然后把刚刚打包好的 (我的是index.html 和 build)放到项目目录下
4.Manifest配置点击 manifest.json 进行配置
AppidAppid需要去Dcloud申请一下,注册一个账号就行,申请地址如下,免费的https://dev.dcloud.net.cn/app/index?type=0应用是否全屏这里的全屏是类似玩王者荣耀那样,直接占据整个屏幕,电源时间状态栏都没有的那种,这里我不勾选,接下来配置沉浸式体验,就是顶部时间电源状态栏弄成透明的那种,看起来会比较舒服图标配置图标配置可以自动生成,也可以先不生成,后面我们可以用IDE创建自定义图标
启动配置配置如下图
模块配置我们这里简单点,全部模块都不用,下来大家可以自己尝试勾选玩一下
权限配置按照默认的选项来即可
App其他设置按照默认来源码视图这里添加一个沉浸式体验全屏
5.在线云打包和离线打包这里我们首先体验一下云打包App,选择云打包
配置参考如下图,取消广告,勾选公测证书
然后代码会上传到云进行打包,等待一会会跳出下载App地址
下载apk传到手机安装App就可以在手机上以App的方式运行我们写的web界面了
虽然在线打包已经满足了我们将web应用搬运到安卓的需求,但是这里是需要上传代码,复杂一点的功能还要实名认证 另外每次云打包都要等待一段时间后,才会返回只能下载5次的链接,非常不方便我们进行开发调试, 所以下面演示如何使用 Android Studio 自行离线打包。首先我们在 HbuilderX 上把我们的代码打包成 App需要的src源码资源
控制台会输出打包后资源的目录,后续的步骤会用到,这里先放着
然后可能通过虾分发xiafenfa.com app分发平台 下载测试自己的app了
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.