利用HBuilder打包前端开发webapp为apk
转载
现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行。
这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料。
第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了。
第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论。
第三步,常规的开发,比如希望实现的功能等。
第四步,开发完成后需要配置项目为线上项目前的几个配置,如下:
上面主要是打包前的配置。
第五步,打包项目。
第六步,打开HBuilder开始打包为apk。文件-》打开目录,选择刚刚项目的dist目录,项目名称随便,这里就为dist
在项目上右键转成移动项目
当项目的图片上显示为a时就可以了。接下来就是设置启动的图标等信息了,直接点击json的文件就会有设置界面
然后发行为原声应用
进行相应设置就可以了
刷新一下就可以看到打包完成的 apk 文件了
打包成功后就可以将apk文件复制到手机上查看效果了。
利用HBuilder打包前端开发webapp为apk的更多相关文章
- 利用HBuilder打包Vue开发的webapp为app
众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...
- 利用connect建立前端开发服务器
利用connect建立前端开发服务器 对于前后端完全分离的系统,开发时候我们需要给前端配置服务器,当然我们可以选择Nginx之类的服务器进行配置,但我们也能使用NodeJS构建高自由度的前端开发服务器 ...
- app:利用HBuilder打包webpack项目
1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双 ...
- webApp前端开发技巧总结
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备.我相信各位童鞋应该和我一个样子, ...
- 利用HBuilder将vue项目打包成移动端app
事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...
- 20个实用的webApp前端开发技巧
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- 简单利用jQuery加tomcat,让前端开发不再依赖于后端的接口
前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,除了BUG,不知道锅在谁身上,只得陪后端耗时 ...
随机推荐
- 解决Sybase PowerDesigner 数据库设计中 Name 自动填充Code
在使用 Sybase PowerDesigner 进行数据库设计时,为了理清思路,需要将name改为中文名称,但是这个软件会自动将name填 充为code,可以通过如下配置修改: 选择tools-&g ...
- Visual Studio自动添加头部注释
VS2013 自动添加头部注释 1.找到VS2013的安装目录 下文以安装目录 C:\Program Files (x86)\Microsoft Visual Studio 12.0 为例 2.修改C ...
- 内建函数(builtins)和functools
内建函数 Build-in Function,启动python解释器,输入dir(__builtins__), 可以看到很多python解释器启动后默认加载的属性和函数,这些函数称之为内建函数, 这些 ...
- 1_Utilities__deviceQuery + 1_Utilities__deviceQueryDrv + 1_Utilities__topologyQuery
使用 Runtime API 和 Driver API 检测设备相关属性.并检测了设备之间的拓扑以及主机与设备之间的拓扑(是否支持跨设备原子操作). ▶ 源代码:Runtime API #includ ...
- Vue2.0中v-for迭代语法变化(key、index)
语法发生了变化:http://blog.csdn.net/sinat_35512245/article/details/53966788 新数组语法 value in arr (value, inde ...
- 11 python shutil 模块
shutil 模块 高级的 文件.文件夹.压缩包 处理模块 1.将文件内容拷贝到另一个文件中 import shutil f1 = open('os_模块.py','r',encoding='ut ...
- UI5-文档-4.5-Controllers
在这个步骤中,我们将文本替换为一个按钮,并在按钮被按下时显示“Hello World”消息.按钮的按下事件的处理是在视图的控制器中实现的. Preview A Say Hello button is ...
- MVC中数据传递 ViewBag的使用
ViewBag MVC3中 ViewBag.ViewData和TempData的使用和差别 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC3中保留 ...
- 常用类一一时间处理相关类一一java.util.Tomezone(java.util.Calendar , java.util.Date , java.text.DateFormat)
时间处理相关类 时间是一个一维的东东.所以,我们需要一把刻度尺来区表达和度量时间.在计算机世界,我们把1970 年 1 月 1 日 00:00:00定为基准时间,每个度量单位是毫秒(1秒的千分之一). ...
- servlet第三篇
Servlet是一个供其他Java程序(Servlet引擎)调用的Java类,它不能独立运行,它的运行完全由Servlet引擎来控制和调度. 针对客户端的多次Servlet请求,通常情况下,服务器只会 ...