转载

现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用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. 深入分析Java Web技术内幕 修订版 pdf

    百度网盘:http://pan.baidu.com/s/1slHCCw9

  2. c++官方文档-指针

    #include<stdio.h> #include<iostream> #include<queue> #include<map> #include& ...

  3. C# WebBrowser

    WebBrowser中的按钮调用WinForm中的事件: private void Form1_Load(object sender, EventArgs e) { this.webBrowser1. ...

  4. spring 注解 @NotBlank and BingResult

    @NotEmpty用在集合类上面 @NotBlank 用在String上面 @NotNull 用在基本类型上 在 user对象中需要

  5. 1.Log4j入门

    转自:https://blog.csdn.net/luohai859/article/details/52250807 日志是应用软件中不可缺少的部分, .Apache的开源项目log4j是一个功能强 ...

  6. 用FireDAC获取 SQL SERVER错误文本信息

    SQL SERVER获取错误文本信息,BDE.adoquery一直取不到,FDQuery可以了 Some DBMS, like SQL Server, return messages as an ad ...

  7. webstorm使用

    1. 打开toolbar 2. 安装vue.js 3. 设置new vue file模板 <template> <div> <header-component/> ...

  8. time 时间内置模块3种形态的转化

    import time print(time.time())  #获得时间戳 1526998642.877814 print(time.sleep(2))  #停止2秒 print(time.gmti ...

  9. 5.15 python 面向对象的软件开发&领域模型

    1.面向对象的软件开发 参考地址::http://www.cnblogs.com/linhaifeng/articles/6182264.html#_label14 面向对象的软件工程包括下面几个部: ...

  10. attr 修改IMG src

    jQuery修改img的src的方法:$("#img_id").attr("src","new_src"); 定义和用法 attr() 方法 ...