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这个服务器，我们发的请求是无法获取的。所以想要测试我们所有的功能，还是需要我们有一个自己写的服务器。
扫一扫
9866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
