将Html网页或者是Aue项目打包成App

admin管理员组

文章数量:1530018

把前端的网页打包成App

一. 前言

​ 首先,在学前端的时候,我们接触到了Html,css,js,你只需要有这些,即可打包成一个App,当然肯定需要一些打包的软件,然后你如果学习到了Vue框架,用脚手架来搭建项目,你可以通过npm run build指令来编译出html,css,js 文件.

Vue脚手架编译常见的问题(传送门) — 不出现问题可以直接跳过了

二. 要开始啦! 先准备一个项目

它大概长下面这样子,也可以只是一个html文件,也可以是你编译好的项目,一切随你心意就好.

为了方便演示,那就请出大名鼎鼎的Hello World吧.我简单写一下先.大概是下面这个页面

接下来我们就要把这个页面,给打包成APP

三. 准备一个打包软件

我用的是这个HBuilder-X 点击可以跳转到官网

下载位置在这里:

安装自不必说,无脑下一步即可,如果你下载的zip包,解压完直接打开HBuilderX.exe即可

打开后是这样子的,我选的是黑色主题,大家可能都不太一样没关系,点击新建项目

然后选择 5+App

项目名称随意啦, 但是HBuilder 账号最好注册一下,后边需要一个什么什么码,需要填

起好名字后直接点创建:

然后直接用你写的项目覆盖掉它即可.

点击manifest.json文件 这里是 APP的相关配置, 图标啦什么的

那个账号需要实名,不实名也可以,就是打包的时候APP不能勾选通讯录权限,这里的配置按你的喜好来就好,然后直接点击 发行-> 云打包 , 好处是不用自己搭建环境了

刚开始用云打包应该是需要下载这个插件的,下载就好了,但是可能会出现安装失败了什么问题,网络问题的话,就切换网络试试,比如链接手机热点,其他奇奇怪怪问题的话, 只能百度百度了

点击云打包后出现一下界面,选择公共测试证书,其他配置可不填或者看你情况而定

直接点击打包即可

因为我没有实名,所以会报一个这样的错误

我也是小白嘛,处理方法就是删权限,但是我忘了删的哪个了, 首先用记事本打开manifest.json

相关的权限配置改成这样

"permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]

如果还是不管用,要么重启,要么找到manifest.json中有一个用中文写的,什么通讯录的权限,把它删了

果然还是实名更简单些

之后操作完后,静静的等待打包成功就好, 打包好后,他会自动把.apk文件给你放到一个文件夹下

发送到手机打开就好了

完成!

本文标签： 或者是网页项目htmlAue