如何将html打包成一个app?
这里介绍一个打包工具HBuilder,可以直接将html打包成手机app,下面我介绍一下这个工具的安装和简单使用,如下:
1.下载HBuilder,这个直接到官网下载就行,地址,如下:
2.下载成功后,随便解压到一个目录下边,主要内容如下:
3.打开HBuilder,新建一个移动App应用,依次点击“文件”->“新建”->“移动App”就行,我这里创建了一个Test应用,这里需要勾选“Hello H5+”,如下:
创建成功后,Test应用主要目录结构如下:
4.为了方便测试,我这里新建了一个html文件—test.html,主要内容如下:
用浏览器打开后的效果如下:
5.下面我们就可以对这个html文件进行打包,双击打开manifest.json文件,设置test.html文件为入口文件,如下:
接着右击Test应用,选择“发行”->“云打包-打原生安装包”,这里我以打包安卓程序为例,勾选“Android”,点击打包就行,如下:
打包成功后,如下:
apk所在目录(在unpackage目录里边),如下:
至此,html就已打包成功,可以直接安装到安卓手机上,如下,成功安装后的界面:
到此,我们就完成了将一个html打包成一个手机app,就整个过程来看,其实不难,就是步骤有些繁琐,网上也有相关教程和资料,感兴趣的可以搜一下,希望以上分享的内容能对你有所帮助吧。
现在有各式各样的生成apk 或者 ipa 的方式,不过基于平台差异性,我推荐以下几种方式进行打包(都以打包Android 为例,如遇webview相关打包,IOS参考WKwebview打包方式,UIwebview有内存泄漏,慎用!):
1、ssr服务器渲染
在项目进行完毕后,肯定是用服务器在跑前端页面,这里只需要用Android studio建立一个空项目,在mainActivity里面引入webview,写一个访问地址链接就可以了直接使用了。
2、IDE打包
直接使用Dcloud 的Hbuildx 进行生成空项目,然后将自己的html 相关文件放到生成的项目中对应的目录中去,其图如下所示:
项目目录已经为我们分好了js , css ,直接将相对文件的目录放入即可:
或者嫌麻烦的话,将自己项目目录整体放入此处,然后在
index.html中配置mata跳转到你自己项目中的index.html里,这样非常方便。
3、Cordova打包
这里以vue项目做介绍,直接在config目录下的 index.js 文件如下配置:
将此进行配好后做直接build处理
打包出来的www目录直接替换掉新建立的cordova项目中的www目录
然后输入指令 "cordova platform add android" 、"cordova platform build android" 即可。
不知还有相关开发人员知道其他打包方式,如有的话,欢迎评论留言!