转载

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

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

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

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

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

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

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

第五步,打包项目。

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

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

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

然后发行为原声应用

进行相应设置就可以了

刷新一下就可以看到打包完成的 apk 文件了

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

利用HBuilder打包前端开发webapp为apk的更多相关文章

  1. 利用HBuilder打包Vue开发的webapp为app

    众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...

  2. 利用connect建立前端开发服务器

    利用connect建立前端开发服务器 对于前后端完全分离的系统,开发时候我们需要给前端配置服务器,当然我们可以选择Nginx之类的服务器进行配置,但我们也能使用NodeJS构建高自由度的前端开发服务器 ...

  3. app:利用HBuilder打包webpack项目

    1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双 ...

  4. webApp前端开发技巧总结

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备.我相信各位童鞋应该和我一个样子, ...

  5. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  6. 20个实用的webApp前端开发技巧

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...

  7. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

  8. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  9. 简单利用jQuery加tomcat,让前端开发不再依赖于后端的接口

    前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,除了BUG,不知道锅在谁身上,只得陪后端耗时 ...

随机推荐

  1. vb 读取指定路径文件名

    Private Sub ExportCostSheetData() InsertRow("") InsertRow("Run 2:Export CostingSheet= ...

  2. angularjs 整合 bootstrap

    第一步 :下载 bootstrap  jquery  ppper.js npm install bootstrap@4.0.0-beta.2 jquery popper.js --save 第二步: ...

  3. javaScript日期

    日历 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <t ...

  4. 边框(border)宽度样式颜色 和基本属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. UI5-文档-4.23-Custom Formatters

    如果希望对数据模型的属性进行更复杂的格式化逻辑,还可以编写自定义格式化函数.现在我们将使用自定义格式化程序添加本地化状态,因为数据模型中的状态是一种相当技术性的格式. Preview A status ...

  6. 使用java代码执行linux命令

    前提: java代码是在windows下面写的,要打包放到linux下面运行,并且执行某个脚本. java代码: try { // 起作用的代码其实就下面这一行, 参数是linux中要执行的代码 Ru ...

  7. Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...

  8. NUMA体系结构介绍

    为什么会有NUMA? 在NUMA架构出现前,CPU欢快的朝着频率越来越高的方向发展.受到物理极限的挑战,又转为核数越来越多的方向发展.如果每个core的工作性质都是share-nothing(类似于m ...

  9. iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks

    视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人. 客户端和服务端之间相互通信,传递的数据 ...

  10. delphi实现两个目录路径的链接

    filepath := PathJoin(['C:', 'path1', 'path2\', 'a.doc']); // filepath = 'C:\path1\path2\a.doc' 代码: f ...