当前位置:首页 > 日记 > 正文

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

利用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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

微信小程序 获取session_key和open

微信小程序 获取session_key和open

实例,程序,电脑软件,微信小,openid,微信小程序 获取session_key和openid的实例说说获取session_key和openid的条件 1.AppID(小程序ID); 2.AppSecret(小程序密钥); 3.登录时获取code;注意:即使获取到了appid,未通过打款验证,也是不能拿到cod…

excel2007 拆分单元格的方法

excel2007 拆分单元格的方法

方法,拆分,单元格,电脑软件,  在Excel中录入数据时经常需要拆分单元格,拆分单元格在Excel中最为常见也是最为普通的一个功能,如果有朋友不太懂如何拆分单元格的朋友,不妨我们一起来学习探讨吧。下面是由小编分享的excel2007 拆分单元格的方…

PPT幻灯片中的Flash文字效果怎么设

PPT幻灯片中的Flash文字效果怎么设

设置,文字,幻灯,片中,文字效果,  在PPT幻灯片中,有时候需要进行一些特效的设置,使得整个ppt看起来会更加的有活力,一把情况下我们会进行背景还有图片的设置。以下是小编为您带来的关于PPT幻灯片中的Flash文字设置,希望对您有所帮助。PPT幻灯…

微信小程序 chooseImage选择或者拍

微信小程序 chooseImage选择或者拍

选择,程序,电脑软件,微信小,chooseImage,微信小程序 chooseImage选择图片或者拍照一、使用API wx.chooseImage(OBJECT)var util = require('../../utils/util.js')Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(…

PS怎么绘制一个倾斜的矩形? ps矩形

PS怎么绘制一个倾斜的矩形? ps矩形

教程,绘制,矩形,电脑软件,PS,我们使用ps中绘制矩形想要倾斜,该怎么制作倾斜的矩形呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先,我们打开PS软件,新建一个文件(Ctrl…

Vue如何从1.0迁移到2.0

Vue如何从1.0迁移到2.0

电脑软件,Vue,使用vue-route路由到新的页面是,会刷新当前页面的dom,el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。1.0 是使用ready钩子函数2.0使用mounted钩子函数代替总结以上所述是小编给大家介绍的Vue如何从1.0迁移到2.0,希…

php生成毫秒时间戳的实例讲解

php生成毫秒时间戳的实例讲解

时间戳,实例,电脑软件,php,php时间函数time()生成当前时间的秒数,但是在一些情况下我们需要获取当前服务器时间和GMT(格林威治时间)1970年1月0时0分0秒的毫秒数,与Java中的currentTimeMilis()函数一样。例子:public function getCurrentMilis(…

ps怎么设计一组按钮开关以及按下时

ps怎么设计一组按钮开关以及按下时

状态,按下,按钮开关,电脑软件,ps,之前我们介绍过绘制单一按钮的方法,今天我们就来看看使用ps设计一组按钮的教程,请看下文详细介绍。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-04新建文件,创建径向渐变…

Word怎么制做折线图Word制做折线图

Word怎么制做折线图Word制做折线图

折线图,步骤,方法,文字,绘制,  折线图是我们经常要用到的一种分析类图表。比如用X轴坐标来表示一个月的天数,用Y轴坐标来表示某一数值,统计数据后描点绘图,得到折线图,可以很直观的看出一个月内的数据起伏情况。下面小编就教你怎么在word中制…

老生常谈文本文件和二进制文件的区

老生常谈文本文件和二进制文件的区

文本文件,二进制文件,老生常谈,区别,电脑软件,从文件编码的方式来看,文件可分为ASCII码文件和二进制码文件两种。ASCII文件也称为文本文件,这种文件在磁盘中存放时每个字符对应一个字节,用于存放对应的ASCII码。例如,数5678的存储形式为:ASC码: …

vue.js 1.x与2.0中js实时监听input

vue.js 1.x与2.0中js实时监听input

实时,电脑软件,js,vue,input,一、vuejs 2.0中js实时监听input在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component …

JS基础教程——正则表达式示例 |

JS基础教程——正则表达式示例 |

推荐,正则表达式,示例,基础教程,电脑软件,正则表达式的() [] {}有不同的意思。() 是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。(\s*)表示连续空格的字符串。[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位…