将vue项目使用5+ App套壳打包成一个APP

前言

    接到一个需求，需要将已经开发好的一个vue web项目打包成APP并上架到Google Store，千方百计调研了一下，
    最后选择用 5+ App进行套壳处理。

1、 5+ App

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。

开发环境

HBuilderX

创建应用

• 启动HBuilderX，在菜单栏中选择“文件”-> “新建”->“项目”
• 选择5+App，在应用名称中输入项目名称，选择项目目录，选择默认模板
• 点击创建

可以看到，新建的5+App项目结构是这样的：

是不是跟我们vue打包后的dist长得差不多，所以

2、 打包

vue项目build一下，我们直接把dist里的文件夹丢进来！

这里介绍一下manifest.json，这个文件是5+移动App的配置文件，用于指定应用的显示名称、图标、入口页面等信息，可通过HBuilder|HBuilderX的可视化界面视图进行配置，也可在源码视图中根据规范直接修改。

这里AppID是新建项目自行生成的，如果要改的话去源码视图改。然后应用名字和应用图标等信息按需配置一下，检查一下没问题就可以打包了，点“发行”菜单->“原生App-云打包”：

（1）：如果自己有证书的话就选使用自有证书，没有的话可以先用公共测试证书，但是如果是要上架的包就一定要用自有证书。

（2）：如果只是想自己真机调试，就选打自定义调试基座，同样自定义基座也不能用于商店上架。

3、 证书

要申请一个证书可以去dcloud的开发者中心创建一个应用，在应用菜单里选Android 云端证书可以直接生成证书和密码，再根据生成的证书信息新增一个安卓平台的应用，这样就可以用自己的证书打正式包方便上架了。（记得把新的appid在源码视图里替换了）

4、 一些问题

一、打包成的apk在真机上显示空白界面

原因： 项目文件路径引用错误，导致文件加载为404

vue打包后的文件时存在于dist目录下的，也就是说dist目录作为根目录。仔细看下面路径(index.html部分内容)

路径开头的前面全是"/",根本没有考虑,项目名dist(因为我是将整个dist包放在nginx下的,所有在 这里dist就相当于项目名)

解决方法：

在vue打包成dist文件前，修改vue.config.js配置文件，将打包文件的资源文件更改为当前目录下的绝对路径

  mudule.exports = {
  // publicPath: '/',
  publicPath: './'
  }

二、打包成的apk在真机上页面跳转有问题

vue项目中，把router里的mode注释掉或者改为hash，要让url后面显示#，否则在使用router-link to="/home"时，会改变url，

http://localhost:8080/dist/index.html   //index.html的页面路径
http://localhost:8080/home   //跳转以后,直接会跳到根路径下,将中间的项目名等去掉,导致后续跳转失败
http://localhost:8080/index.html#/home    //而将mode注解掉,后的跳转情况

解决方法：

const router = new VueRouter({
  // mode: "history",
  base: process.env.BASE_URL,
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    };
  },
  routes,
});

三、facebook登录失效

分析一下，虽然说用5+ App套壳了，但是其本质依然是一个web。在vue里面，我们调用的是facebook的 js sdk来进行授权登录，但在5+平台显然是行不通，但是好在5+ App平台有自己的第三方登录方式。

5+ App使用第三方登录的流程是：调用 plus.oauth.getServices(successCB,errorCB) 获取登录服务对象 plus.oauth.AuthService, 再调用其 login 方法进行登录认证、getUserInfo方法获取用户信息

首先，我们在manifest.json里配置一下facebook平台信息，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“Facebook登录”：

这里的appid是Facebook开发者中心申请的应用编号（AppID）

（注意一下，每次修改manifest.json，都需要重新云打包才能生效，基座也需要重新更新。）

var facebookOauth = null;
plus.oauth.getServices(function(services) {
	for (var i in services) {
		var service = services[i];
		// 获取微信登录对象 
		if (service.id == 'facebook') {
			facebookOauth = service;
			break;
		}
	}
	facebookOauth.login( function(oauth){
		// 授权成功，facebookOauth.authResult 中保存授权信息  
	}, function(err) {
    // 登录授权失败  
    // err.code是错误码
	})
}, function(err) {
	// 获取 services 失败
})

再注意一下，plus对象在vue运行出来是不生效的，需要打包出来真机调试才生效

四、vue里使用了cookie，在5+ App不生效

在vue里，我用了cookie来保存token，但是打包后，不知道为什么cookie并不生效，看了一下文档，发现5+App使用plus.navigator.getCookie( url )来获取的cookie，最后挣扎一番还是用localStorage进行紧急平替。

//Vue.cookie.get("token")
window.localStorage.getItem("token")
// this.$cookie.set("token", res.data.data.token);
window.localStorage.setItem("token", res.data.data.token);
// Vue.cookie.delete("token");
window.localStorage.removeItem("token")

五、Google Store支持的应用后缀是 .aab，HbuilderX安卓打包出来是 .apk

在打包时，渠道包勾选GooglePlay（AAB）选项，打包出来后应用就是AAB后缀了