纯H5套壳（HBuilder）打包

一点儿
1,811 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

前言

最近公司有个项目需求是开发一个h5项目，但想要打包成安卓app，由于时间比较紧，我们直接选择了vue来开发h5，然后通过HBuilder来套个壳，但就是这个套壳的过程踩了不少的坑。

vue开发部分

这部分就是使用纯vue+vant来开发的页面，就不做多介绍了，其中比较重要的一点就是有个功能要调用手机的摄像头权限，这个功能在h5中是好的，但通过HBuilder封装后就不行了，解决方法在我之前的文章有分享，点击查看，这篇文章的解决办法在写在app.vue中，相当于每次运行程序都会去获取权限，再了解了HBuilder后发现其实也可以写在HBuilder中建立的项目中，如下图

image.png

这个文件就是新建项目自己生成的，只要在注释部分后边加上如下代码就行了

plus.android.requestPermissions(['android.permission.CAMERA'], function(e) { 
if (e.deniedAlways.length > 0) {
plus.runtime.restart() 
}

这个plus是安卓中的方法，所以之前在浏览器中运行会报错

HBuilder配置部分

如果需要获取各种权限，比如相机了，内存存储了等，可以在权限配置中选择，如下图

image.png

其中最重要的一点是开发好的h5只要把能访问的地址放在如下图的地方就可以了(index.html页面)

image.png

HBuilder中的坑

本来打包完成之后一切都是顺利的，但是当我们更新代码的时候发现打包的安卓是不会热更新的，但浏览器中直接访问h5的地址是可以的，但打包的过程其实也就相当于套了个壳，使用内置浏览器来访问h5，所以问题就定位到了打包过程中的缓存问题。

解决问题的方法分为两部分：

  • 在h5项目的index.html加上如下代码，也就是不使用缓存的意思
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

只做了这一步是不行的，还需要在HBuilder中进行配置，如下图

image.png 也就是在manifest.json中加上不使用缓存的配置，这样就可以热更新了。

avatar
文章
阅读
粉丝