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

赞 (0)

相关推荐

  • HBuilder打包App方法(图文教程)

    HBuilder打包App方法(图文教程)

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

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

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

    现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功

  • vue-cli或vue项目利用HBuilder打包成移动端app操作

    一.测试项目是否可以正确运行 指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

  • 利用Angularjs和Bootstrap前端开发案例实战

    利用Angularjs和Bootstrap前端开发案例实战

    我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点:  1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用.  2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识.  3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller.  4.初步了解Angula

  • 手机/移动前端开发需要注意的20个要点

    1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-ap

  • 完美利用Yii2微信后台开发的系列总结

    网上有很多关于YII2.0微信开发教程,但是太过复杂凌乱,所以今天在这里给大家整理总结利用Yii2微信后台开发的系列了,给需要的小伙伴们参考. 一:接入微信 Yii2后台配置 1.在app/config/params.php中配置token参数 return [ //微信接入 'wechat' =>[ 'token' => 'your token', ], ]; 2.在app/config/main.php中配置路由 因为接口模块使用的RESTful API,所以需要定义路由规则. 'urlM

  • 详解webpack4.x之搭建前端开发环境

    webpack是一个现代JavaScript应用程序的静态模块打包器,借用官网的一张图,它能够将一些预处理语言,js的最新语法转换成浏览器识别的内容.现在一般的前端框架都有比较成熟的脚手架,大多数对webpack都有个较好的集成,我们只需要敲一些简单的命令就能生成一个通用的项目模板,比较便捷,但是要知其然知其所以然,所以今天就尝试着从零开始搭建一个前端开发环境. 项目源码: https://github.com/gerryli0214/webpack-demo webpack的四个核心概念: 1

  • webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法

    批处理 前端现在在做项目的时候大多数遇到的都是单页面应用,但有时需要做多页面的时候,会把单页拿过来修改成多页面,如果代码多了,对单页或多页的配置可能会混乱,那么有没有更好的方式能把单页面和多页面不同的配置代码分开,能更清楚的分辩他们的区别,这里是利用 批处理 对前端构建进行部署 git地址目录分为三块 single //单页代码 share // 共用代码 many //多页代码 只需要用到 批处理 对其中两者进行合并就能生成想要的单页或多页应用,提示需要安装国内的 npm淘宝镜像 如果未安装的

随机推荐