利用HBuilder打包前端开发webapp为apk的方法

现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行。

这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料。

第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了。

第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论。

第三步,常规的开发,比如希望实现的功能等。

第四步,开发完成后需要配置项目为线上项目前的几个配置,如下:

上面主要是打包前的配置。

第五步,打包项目。

第六步,打开HBuilder开始打包为apk。文件-》打开目录,选择刚刚项目的dist目录,项目名称随便,这里就为dist

在项目上右键转成移动项目

当项目的图片上显示为a时就可以了。接下来就是设置启动的图标等信息了,直接点击json的文件就会有设置界面

然后发行为原声应用

进行相应设置就可以了

打包成功后就可以将apk文件反正到手机上查看效果了。

以上这篇利用HBuilder打包前端开发webapp为apk的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-11-12

HBuilder打包App方法(图文教程)

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

WebStorm安装配置方法图文教程

本文为大家分享了WebStorm安装配置方法图文教程,供大家参考 ★★★ 特别推荐:最新WebStorm2020.2注册码永久激活(激活到2089年) 一.简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编辑器"."最智能的JavaScript IDE"等. 二.安装 官网地址:http://www.jetbrains.com/websto

mysql 5.7.13 安装配置方法图文教程(win10 64位)

本文实例为大家分享了mysql 5.7.13 winx64安装配置方法图文教程,供大家参考,具体内容如下 (1) 下载MySQL程序,您可以从MySQL官网上下载,或者点击这里下载 (2) 解压mysql-5.7.13-winx64.zip文件到你想安装的目录,我的例子是 D:\program\mysql-5.7.13-winx64.其中的目录结构如下: 文件夹:bin docs include lib share 文件: COPYING README my-default.ini (3) 拷贝

Tomcat安装配置方法图文教程

用来进行web开发的工具有很多,Tomcat是其中一个开源的且免费的java Web服务器,是Apache软件基金会的项目.电脑上安装配置Tomcat的方法和java有些相同,不过首先需要配置好java的环境才行,点击此文查看:java环境变量如何配置. 接下来安装配置Tomcat: 1.下载Tomcat文件,文件是一个exe的安装文件,下载后直接安装即可. 下载地址在百度输入Tomcat进入官网即可找到下载文件.安装文件没有什么技巧,一直点击下一步即可. 2.同样安装时注意安装目录,因为一会要

Eclipse中导出码云上的项目方法(图文教程)

1.菜单栏File里的import. 2.Git 3.输入码云上的地址 4.选择本地创库位置 5.再次引入本地maven项目 6.选择本地存在的创库位置,勾选上add set 以上这篇Eclipse中导出码云上的项目方法(图文教程)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

Windows Sever 2012下Oracle 12c安装配置方法图文教程

分享Oracle 12c安装配置方法图文教程,具体内容如下 1.我们开启虚拟机 2.Windows Sever 2012启动中. 3.看到Windows Sever 2012的桌面. 4.我们解压缩两个文件,winx64_12c_database_1of2.zip,winx64_12c_database_2of2.zip.也就是oracle的安装文件. 5.这个时候我们可以看到服务器启动以后的仪表板. 6.然后我们合并两个解压缩以后文件夹的内容,进行合并.可以查看大小2G多. 7.我们可以看到合

mysql 5.7.15 安装配置方法图文教程(windows)

因本人需要需要安装MySQL,现将安装过程记录如下,在自己记录的同时,希望对有疑问的人有所帮助. 一.下载软件 1. 进入mysql官网,登陆自己的oracle账号(没有账号的自己注册一个),下载Mysql-5.7.15,下载地址:http://dev.mysql.com/downloads/mysql/ 2.将下载好的文件解压到指定目录,笔者解压在D:\mysql-5.7.15-winx64 二. 安装过程 1.首先配置环境变量path,将D:\mysql-5.7.15-winx64\bin配

mysql 5.7.17 winx64.zip安装配置方法图文教程

前言:重装win10顺带整理文件,然而装个MySQL用了我一下午,真是不值,所以写这篇来帮助大家. 参考链接:mysql 5.7.11 winx64.zip安装配置方法图文教程: 里面有些步骤在我这弄完,一直是错的,我会适当点出,希望对你有帮助. 一.下载 https://dev.mysql.com/downloads/mysql/ 二.解压缩zip包 三.配置环境变量 (1)配置Path (2)修改mysql-default.ini配置文件原先的: # These are commonly s

mysql 5.7.13 winx64安装配置方法图文教程(win10)

本文实例为大家分享了mysql 5.7.13 winx64安装配置方法图文教程,供大家参考,具体内容如下 下载 地址:http://dev.mysql.com/downloads/file/?id=463242 安装 1.解压下载好的mysql-5.7.13-winx64.zip到你需要安转的目录(eg:D:\mysql): 2.配置解压目录下的my_default.ini中命名为my.ini 作相关的配置如下: # These are commonly set, remove the # an