预览打包项目

hbuilderx里边新建一个项目：新建-->5+App(A)-->选择模板-->默认模板,如图：

新建完成之后，根目录下会有四个文件夹(css,js,img,unpackage)和两个文件(index.html,manifest.json)，打开index.html，会发现里边有如下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>
  <script type="text/javascript">
   	document.addEventListener('plusready', function(){
   	  //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   	});
  </script>
</head>
<body>
</body>
</html>

就像注释里说的，想使用原生方法，就需要在plusReady之后执行，现在在该方法里写一句话：

plus.webview.create("http://192.168.16.9:8891").show();

意思就是在App里边新建一个webview打开你的vue项目，地址写入你的vue访问地址。

本质上，打包类似的项目其实就是安卓壳子新建一个webview，让项目在webview上运行，webview就是一个安卓内置浏览器。

至此基座预览就好了，然后把安卓手机插上，打开USB调试等功能，现在菜单栏-->运行-->运行到手机或模拟器-->xxx，xxx就是你的手机，点击之后，看控制台就开始编译你的项目了，然后你的手机上会出现名为hbuilderx的基座App，hbuilderx编译好之后会自动打开这个基座，你就可以看下在真机上跑的情况了。如果你想使用浏览器调试你的基座App，有两种方式：

在hbuilderx中，菜单栏-->运行-->运行到手机或模拟器-->xxx的下面有一个显示webview控制台，它是个比较消耗内存的功能，可能会有点卡，不过可以用。当基座App可以运行的时候，打开webview调试，会出现下面这个图：
找到那个http://开头的，点击会出现一个Remote debug的页面，你在手机上操作任何功能，它都会同步。

调试dom，console控制台，打断点，网络请求，缓存等等，功能都可以使用。 如果这个remote debug打不开，可以重试，再不行，可以试试第二种。 2. 当基座项目跑起来之后，谷歌浏览器输入chrome://inspect/#devices，就是外置的设备连接情况，如图：

同样，点击inspect就可以调试了。 一般情况下我都是用第一种，第二种有时候会出现问题……。

打包vue项目

vue项目build好之后，找到dist文件夹，复制里边所有内容。这里注意，vue打包时，可能需要切换请求地址为线上的，也可以用本地的。

不建议使用本地的，因为本地连接的服务经常重启，如果不做正式发行包，也可以打出来当个测试版本，看看有什么问题。

打包App

新建一个hbuilderx项目，步骤同上，然后只留下unpackage文件夹和manifest.json，其它都没有用，把vue复制好的文件，全部扔到这个里边，有些注意事项先提一下：

项目请求地址，记得改（根据需求）
还记得那个plusReady方法么，index.html文件编辑一下

  window.plusready = false;
  // 离线打包需要这段代码
  // 扩展API是否准备好，如果没有则监听“plusready"事件
  if (window.plus) {
    plusReady();
  } else {
    document.addEventListener("plusready", plusReady, false);
  }
  // 扩展API准备完成后要执行的操作
  function plusReady() {
    // const ws = plus.webview.currentWebview();
    window.plusready = true;
}

类似的逻辑，写到index.html的script标签里边，如果用到原生的方法了，这一段必须要。当然，如果你的项目里边同样用到了plus.的原生方法，最好也判断一下:

if (!window.plus) {
  return;
}

如果你的项目需要使用plus原生方法，在plus加载完毕后调用，可以使用的API地址传送门。

我使用了内存，因为内存容量无限，不过也要考虑性能，毕竟只是个浏览器。

提几个可能会碰到的点：

本地图片是不可以用的，会报一个错误：Not allowed to load local resource,不管我怎么样转获取到的文件地址，反正最后都会报这个错。查到的资料是需要改一个webview的方法好像，所以还是用了input，event什么的，图片转base64，存本地，因为项目里边缓存要用，哎。
不同的手机，localStorage容量是不一样的，我用plus的存储就是因为localStorage欺骗了我，webview的localStorage内存并不是5M,我忘了资料的地址了，看到的就是localStorage容量webview只有2.5M,手机不一样，容量也不一样。

扯这么多，现在开始打包App，打包之前最后说一个东西：manifest.json，App的配置信息，不用怎么动，换个图标应该就差不多了，如果想做升级的话，记得在基础配置应用版本名称和应用版本号做好数字排序。接下来，项目右键-->发行-->原生App-云打包，填写信息，没有证书的上面有一个制作指南，参照着就可以（也可以使用DCloude，公司有证书，那就使用自有证书好了）。打包，耐心等待控制台返回下载地址，over。

现在的App，想看请求的话，就用charles等抓包工具看喽。

归根结底，它只是个webview，它只是个孩子啊！！！

更多的调用原生和app发布更新等问题，一般都可以在hbuilder网站或者DCloud论坛里找到

HBuiderX打包移动端项目详解

预览打包项目

打包vue项目

打包App