把前端的网页打包成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文件给你放到一个文件夹下
发送到手机打开就好了
完成!
