HTML5+

提供调用手机硬件的API，它和H5没有任何关系。

打包过程：

一、在线创建一个项目并打包

1. 创建一个5+项目

创建一个移动WebApp的方法：

在新建中选择：项目，
选择5+APP即可。（因为我们想要测试调用硬件的一些API，所以创建“ 提供调用手机硬件 API ”的 5+ 项目）

在这里面虽然书写的也是JS代码，但是当我们运行至手机、模拟器或者是打包过后，JS会被进一步封装，因此会产生与原生JS不一样的效果（就比如alert弹窗）。

举例：这里我从H5+ API 中选择了一段调用相机的代码粘贴至index.html


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Camera Example</title><script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {console.log("plusready");
}
// 拍照
function captureImage(){var cmr = plus.camera.getCamera();var res = cmr.supportedImageResolutions[0];var fmt = cmr.supportedImageFormats[0];console.log("Resolution: "+res+", Format: "+fmt);cmr.captureImage( function( path ){alert( "Capture image success: " + path );  },function( error ) {alert( "Capture image failed: " + error.message );},{resolution:res,format:fmt});
}</script></head><body><button onclick="captureImage()">拍照</button></body>
</html>

2. 配置

下面这二者是等价的，在前面6个板块中选好的配置，在第七个板块中会自动生成对应的源码。

需要注意！

自动生成的图标文件只能选择png格式的图片，并且这个图片不能是更改后缀名的png格式图片，可以去找一些在线的更改工具，给大家推荐一个网站：JGP to PNG

这个通讯录权限记得关闭了，否则还要我们去实名认证，太麻烦。

3. 打包

打包的功能是需要我们注册账号的，所以我们需要先提前注册一下，一定要记得填邮箱和手机号，否则打包时还会提示填写并验证。

本地安装很简单，我们以稍微困难一点的云打包为例，打包完会生成一个链接，这个链接可以被不同的用户复用。

接下来，会让我们做出一些选择：

这里选择Android包，ios包需要我们注册账号，一个账号$99，emmm~有钱的主可以自由选择，
选择公共测试证书，我们仅仅进行一个简单的测试，选公共的就可以了，
可以自行选择，我们现在是简单测试用的，选择无就可以，这样一会我们在pc下载的文件拖至虚拟器就可以直接安装了，
ios端证书是需要money滴，我们直接选正式包就好了，
默认就好了。

点击打包...

然后就会显示这一行文字：

我们可以点击这里查看打包状态：

时隔两分钟，终于...

然后我们将这个链接复制到浏览器，下载完成后，就会出现一个apk文件：

然后我们直接将这个文件拖动到模拟器中即可让模拟器下载该软件，打开这个软件测试一下：发现有拍照的功能，OK！打包完成。

二、打包一个已经存在的项目

1. 借助 webpack 让项目从开发模式转变为生产模式（webpack 打包过程）

这是打包前的项目。里面一些例如.vue文件，浏览器是无法识别的。

然后输入命令：npm run build / yarn run build 进行打包。

打包完会生成一个dist文件夹

2. 选择服务器

对于一个企业来说，在打包完后，下一步就叫“ 网站的部署 ”。需要我们将dist文件夹内的所有内容放在企业服务器的根文件夹下。只有我们将这些资源放在了服务器的根目录下，才能生成一个网址。

而我们不需要这么做。

对于我们来说，生产有生产的服务器，开发由开发的服务器，只要用一个非开发的服务器将其运行起来即可。（开发的服务器都带有localhost）

这个时候我们可以选择去阿里买一个服务器，
也可以选择用node写一个服务器，
也可以用一些第三方的npm包。

下面我们以一个服务器的npm包为例：yarn global add http-server （命令行工具，所以我们需要全局安装，因此要在末尾加上-g）

如果使用的npm命令，可以使用npm root -g查看我们全局安装的包的路径，进入后来查看我们的http-server是否安装成功。
我们使用的是yarn，可以使用命令：yarn global dir

3. 配置manifest.json文件

这个文件我们可以复制过来，可以在开发阶段将其创建在public文件夹，这样在打包时，就会自动创建进dist目录中。配置过程和上面相同。

然后就打包完成了，一定要注意，如果是用的http-server这个服务器，我们发的请求是无法获取的。所以想要测试我们所有的功能，还是需要我们有一个自己写的服务器。

移动端项目总结 - DCloud-HBuilder打包相关推荐

VUE项目如何使用HBuilder打包成app
1.配置好vue.config.js 文件在项目根目录下新建一个vue.config.js文件,并配置如下代码 module.exports = {lintOnSave: false, // 关闭格 ...
怎么将vue的移动端项目打包成手机的app软件apk格式的。hbuilderx 云打包。
献丑了第一步注册hbuilderx账号需要实名认证,要不然获取appid会获取不了. hbuilder 下载 https://www.dcloud.io/hbuilderx.html vue项目np ...
vue项目使用Hbuilder打包苹果IOS-App详细教程
本文主要记录一下本人使用vue开发的移动端App使用Hbuilder打包成苹果IOS-App的详细步骤,仅供参考,如有不足,请指教. 打包苹果IOSapp首先需要准备以下几项东西: 1.已经编写好的v ...
用hbuilder打包php项目,hbuilder打包人人商城app教程方法支持支付宝微信原生支付...
使用hbuilder打包人人商城app 方法支持微信支付宝原生支付介绍人人商城打包使用hbuilder打包app需要的文件,目前支持微信原生支付,支付宝原生支付,原生退出app ,还没有写分享和原 ...
Hbuilder打包web项目为app时，下载文件失效，下载出现问题解决
问题描述:我是将我的web项目使用hbuilder打包成apk安装在手机上,然后使用下载功能的时候,跳转到报错页面,但是在pc端浏览器和手机浏览器上没有问题,报错页面如下: 其实这是因为使用a链接发送 ...
h5builder android,将已有H5项目用Hbuilder打包生成Android原生安装包
首先新建一个移动app项目,填写应用名称和存储位置,选择模版,完成android 将其自带的文件以及文件夹删除,只保留manifest.json文件算法删除后json 将已有的h5项目粘贴到test ...
关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案
关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案参考文章: (1)关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案 (2)https://www.cn ...
React的移动端项目打包成手机的app软件apk格式
前提准备: 1.React项目npm run build打包打包前配置在项目打包之前需要在package.json文件中添加 "homepage": "./" ...
vue的移动端项目打包成手机的app软件apk格式
目录前提准备: 1.vue项目npm run build打包成dist文件夹 2.注册hbuilderx账号,获取appid 步骤一.创建h5+app空模版二. 将打包完成生成dist文件目录复 ...
vue开发app项目，涉及原生接口调用，用hbuilder打包
使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例. 这里使用的是hbuilder打包. 第一步: 定义一个vue组件,代码如下: <template>&l ...

移动端项目总结 - DCloud-HBuilder打包

HTML5+

打包过程：

一、在线创建一个项目并打包

1. 创建一个5+项目

2. 配置

3. 打包

二、打包一个已经存在的项目

1. 借助 webpack 让项目从开发模式转变为生产模式（webpack 打包过程）

2. 选择服务器

3. 配置manifest.json文件

移动端项目总结 - DCloud-HBuilder打包相关推荐

最新文章

热门文章

移动端项目总结 - DCloud-HBuilder打包

HTML5+

打包过程：

一、在线创建一个项目并打包

1. 创建一个5+项目

2. 配置

3. 打包

二、打包一个已经存在的项目

1. 借助 webpack 让项目从开发模式转变为生产模式 （webpack 打包过程）

2. 选择服务器

3. 配置manifest.json文件

移动端项目总结 - DCloud-HBuilder打包相关推荐

最新文章

热门文章

1. 借助 webpack 让项目从开发模式转变为生产模式（webpack 打包过程）