众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持;那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的,三端运行即web端,安卓端和IOS端 ;先别急着说实现不了和不可能,利用HBulder来试试;

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。  HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。 HBuilder其实只是一款编辑器,拥有较为丰富的语法库,对Vue的支持比较友好,工具轻量且功能强大;

官网地址:https://www.dcloud.io/

首先我们做一下准备工作:

下载HBuilder并安装完成
将开发完的webapp利用webpack打包完成
下载360手机助手,打包完成后方便安装到手机上运行看效果

1.首先我们拿到我们的webapp并运行起来,确认没有异常之后利用webpack打包,webpack打包后将会产生 dist/目录(命名根据webpack来,内含index.html和static/目录)

2.打开HBuilder,然后点击文件--新建--移动App,创建一个空白模板的移动App;

3.创建好了空白的移动App模板之后,我们可以看到我们的文件夹路径变为这样(可以删除css、js、img等文件夹)

4.将npm run build(打包后)生成的index.html内容全部复制进Hbuilder的index.html里面去,并将产生的static/目录复制到HBuilder本项目目录下,此时我们的目录结构是这样的:

5.打开index.html里面的对static的引用,将=后面的'/'去掉

6.点击一下浏览器运行,看是否有异常,如果没有异常,我们接着往下走;HBuilder支持云端打包和离线打包,本文暂且只讲述云端打包

7.项目文件夹中右键--发行--点击云打包-打原生安装包,根据所需要的版本(安卓和IOS)进行打包

8.提示信息不管,直接点击确认没有缺少权限,继续打包

9.提交到云端之后,直接点确定,等制作安装包,这里可能需要等个两三分钟,请耐心等待打包完成

10.点击手动下载就可以下载到我们打包好的apk了

11.这里我们可以使用手机模拟器来安装apk应用,也可以用360手机助手来安装,我们来讲讲360手机助手安装:管理我的手机--安装本地应用--选择需要安装的apk,然后即可安装;其实360助手只是一个手段,重点是apk,当然可以通过微信助手发送apk手机安装;

12.这就是我们打包完之后的app,运行的速度还比较流畅,占用内存大小也还好,打包完之后只用了30+M;功能都正常,只是布局方面跟webapp相比部分略微大一点点,几乎可以忽略不计(图片效果是因为是截图,所以有点挤压,打包完之后看效果是正常的)

HBuilder打包的webapp和原生app的区别:

  1、原生app开发的成本高,体验好,相对来说webapp的体验相对要差一点,但是成本低;

  2、HBuilder打包的webapp点击物理回退键会直接退出程序,而原生app不会;

  3、HBuilder打包的webapp一般都很难在App Store上上线,因为苹果商店现在的审核很严格;

利用HBuilder打包Vue开发的webapp为app的更多相关文章

  1. 利用HBuilder打包前端开发webapp为apk

    转载 标签: apk / 打包 / vue 现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动 ...

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

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

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

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

  4. 使用hbuilder打包vue项目容易出现的坑点

    1.打包后手机打开"该app专为旧版本安卓"问题解决(在hbuilder中设置) 打开manifest.json 然后 2.打包后app打开显示白屏. 路径问题:在webpack中 ...

  5. HBuilder打包vue项目app后空白,并请求不到数据

    (解决空白问题)在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,否则会出现空白,如图   修改前 assetsPublicPath= '/',. ...

  6. 利用MVC编程模式-开发一个简易记事本app

    学了极客学院一个开发记事本的课程,利用自己对MVC编程模式的简单理解重写了一遍该app. github地址:https://github.com/morningsky/MyNote MVC即,模型(m ...

  7. 利用阿里云如何开发一款直播app?

    在开发的过程中应该注意些什么?下面让小编告诉你: 随着互联网的发展,越来越多的人已经加入互联网的行列.而且很多的人也开始直播,和众多的网友分享自己身边事情.互联网还在加速发展,从PC互联网,到移动互联 ...

  8. 利用问答机器人API开发制作聊天类App

    缘起 很久没写项目了,所以单纯的想练练手,正好看到有问答机器人的接口,想到之前也做过聊天项目,为什么不实验一下呢.当然也是简单调用接口的项目,并没有真正的完成问答的算法等等.业余项目,功能不齐全,只实 ...

  9. hbuilder打包app基本流程

    声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载 ...

随机推荐

  1. 关于Linux的简单介绍

    Linux: 诞生日期:1991年 开发者:林纳斯·托瓦茨 特点:免费,开源    发行版本:centos|red Hat|Ubuntu|红旗等    思想:一切都是文件 重要文件目录 bin:二进制 ...

  2. 【KakaJSON手册】01_JSON转Model_01_基本用法

    在iOS开发中,后台返回的数据大多是JSON格式,对应地会被网络框架层解析成Swift中的Dictionary.Array.由于数据类型的复杂.字段的繁多,直接使用Dictionary.Array会比 ...

  3. js动态添加<tr><td>

    <form id="addNewsFormData" name="addNewsFormData" isCheck="true" ac ...

  4. 8.7 day28 网络编程 socket套接字 半连接池 通信循环 粘包问题 struct模块

    前置知识:不同计算机程序之间的数据传输 应用程序中的数据都是从程序所在计算机内存中读取的. 内存中的数据是从硬盘读取或者网络传输过来的 不同计算机程序数据传输需要经过七层协议物理连接介质才能到达目标程 ...

  5. Day4 chart基本属性分析

    属性设置是基于chart实例的,所以我们必须先获取一个chart画板实例,获取方式: G2.Chart.创建 Chart 的方式如下: new G2.Chart({ container: {strin ...

  6. 如何添加JWT生成的token在请求头中

    前言 在我们使用JWT来做用户的验证时,我们登陆生成对应的token,并加入到请求的参数中发送到后台提供相关的权限校验.这个时候我们需要使用到传递请求头参数传递的问题,下面是两种方式. 1.ajax提 ...

  7. spring data jpa 的使用

    使用spring data jpa 开发时,发现国内对spring boot jpa全面介绍的文章比较少案例也比较零碎,因此写文章总结一下. spring data jpa介绍 首先了解JPA是什么? ...

  8. 使用springboot+layim+websocket实现webim

    使用springboot+layim+websocket实现webim 小白技术社   项目介绍 采用springboot和layim构建webim,使用websocket作为通讯协议,目前已经能够正 ...

  9. HMM学习

    参看博客: 1.https://www.cnblogs.com/skyme/p/4651331.html 2.https://blog.csdn.net/continueoo/article/deta ...

  10. 一文搞懂Python中的所有数组数据类型

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...