web项目打包成Native App

web项目打包成Native App

好长时间没有写过博客了，闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识，最近公司的web项目都开发到收尾阶段了，也在把web项目打包成Android和IOS程序包，我所使用的打包工具是HbuilderX，Xcode也有使用，但每次配置的东西实在是有些繁琐，再一个就是我们有一个项目需要配置个推，HBuilderX集成了个推的SDK，只需要配置在个推中心申请的appid、appkey、appsecret即可，相对比较简单，因此现在多是采用HBuilderX打的程序包。

一.打包成Android(.apk)

打包成android比较简单，只需要在HBuilderX中新建一个5+App项目，然后只保留一个manifest.json文件，其余目录全部删除，再把vue打包后的dist文件夹放到项目根目录下，这样基本目录就OK了，接下来就要配置manifest.json了。

配置manifest.json最需要注意的就是基础配置中的应用入口页面地址，很多人打完了包之后，也安装到移动端了，打开app什么也没有，只是一个空白页，那么很可能就是你的入口地址没写对，我们公司的项目都是配置到公网，所以把程序包交给运维后，运维部署完会给我们一个项目入口地址，先在PC的chrome浏览器输入这个网址，看看能不能进入到项目中，如果可以，就基本没问题。

剩下的配置都相对比较简单，就不再这里一一描述了，接下来进入真机模拟（假设大家都已经配置好了manifest.json）

真正打包之前，可以先连接真机，在真机安装HBuilder基座，先行验证一下项目是否可打开
（菜单运行-运行到手机或模拟器-运行设备…）,这里相当于在真机上安装了该app的初始测试版（此时配置的图标及启动图不会生效，真正打包才生效），如果HBuilder基座安装成功，并可以启动项目，那么恭喜，接下来就可以真正进入到打包程序了

菜单发行—>原生App-云打包—>勾选Android,使用DCloud公有证书，下面的广告啥的取消勾选，点击打包，就是这么简单，接下来就是等待控制台日志显示打包成功并给你一个程序包的下载地址了，成功后下载apk安装包，此包可以交给运维部署，运维给你一个网址可以指向这个包，安卓用户就可以通过手机搜索这个网址下载程序了。

下载方式：
网址搜索下载：手机浏览器直接输入程序包网址，可直接下载
二维码扫码下载：可以将指向该程序包的网址放到草料二维码官网，去生成一个二维码，手机扫这个二维码也可以下载。

二.打包成ios(.ipa)

ios打包是有些麻烦，需要去苹果开发者中心申请ios证书（.p12文件）及一个描述文件，到处.p12文件的时候会让你设定一个密码，这个密码就是HBuilderX打包ios程序包时的证书私钥密码。
HBuilder中有个ios证书申请指南链接，里面的介绍还是蛮详细的，可以根据上面的步骤一步步来，最终会把所有文件都申请下来。具体申请不做过多介绍，下面把我遇到的坎给大家描述一下：

描述文件类型相关的坎
1.Ad Hoc
如果我们在申请描述文件时选择的是Ad Hoc类型，那么我们的app将可以直接绕过App Store的审核,用户可直接下载使用（安装包可部署到公网服务器，通过输入指向该ipa程序包的网址下载），但前提是用户设备的UDID必须添加进来。也就是说，只有指定了用户的UDID,该用户才可以下载使用，这一般会出现在对企业内部使用的场景上，即只对部分人开放，并不想对所有人开放的时候。
2.App Store
如果我们在申请描述文件时选择的是App Store类型，那么我们的程序包将不可以直接安装到手机使用（无论是输入网址下载还是直接拖拽到Itunes），只能通过上传到TestFlight或AppStore才可以下载（需要审核）

打包ios程序包需要填写四项：
Bundle ID（AppID）：这个是在苹果开发者中心申请的Identifiers，可以理解成app的唯一标识ID
证书私钥密码：苹果开发者中心导出.p12文件的时候要求你设定的密码，上文中有提及
证书profile文件：苹果开发者中心申请的Profiles
私钥证书：.p12文件

当上面四项都已具备，就可以愉快的打包了。

备注：以上文章纯属个人经验只谈，如有不对指出，欢迎指正