Hbuilder将vue项目打包成移动端app

Hbuilder将vue项目打包成移动端app

• HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP
• HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。
• 下载地址： 官网下载地址：http://www.dcloud.io/
• 下载完成之后，需要先进行注册，不注册也可以打开，但是打包生成手机APP的时候，appid会报错，注册非常简单，直接用邮箱注册并登录即可：
  
• 步骤

1. 事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目
2. 执行npm run build之后生成dist文件夹
3. 打开HBuilder，文件->打开目录，如下图
   
   选择刚才生成的dist目录，输入项目名称，点击完成
4. 此时会看到HBuilder项目下多了一个W标识（表示web项目）的myApp项目
   
   右键菜单选择‘转换成移动‘转换成移动App’，然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了，
   随后就可以利用HBuilder连接真机运行或者发行成为原生app。

注意：如果真机运行或模拟器运行报如下错误
Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser

可参考：http://www.jianshu.com/p/3e3b171179f8
5. 以下为以android apk为例的发行为原生app的步骤
点击manifest.json 文件，配置基本信息
HBuilder打开manifest.json文件后默认显示“可视化视图”，可配置应用的基本信息

点击窗口底部的“代码视图”可切换到代码视图：

（1）应用信息：包括应用的名称、入口页面地址、版本信息等。

• 应用名称：App打包后在手机上桌面的快捷方式名称；
• appid：HBuilder appid（应用标识），在创建时分配的、以后不可改的标识。如用户手动修改ID打包时会提示参数错误；
• 版本号：应用的版本号，用户可通过plus API（plus.runtime.version）获取应用的版本号，需提交App云端打包后才能生效；
• 入口页面：应用启动后自动打开的第一个HTML页面，可填写本地html文件地址（相对于应用根目录）或网络地址（以http://或https://开头）

（2）重力感应：配置应用运行时支持的显示方向

可通过点击表示设备方向的按钮来选择设备支持重力感应旋转方向。
重力选择按钮可选择一个或多个，选择多个方向后，应用可按照指定方向显示应用页面，如只选中一个按钮，表示终端只支持一个方向显示页面内容。

通过plus->distribute->orientation字段值进行控制：

• “portrait-primary”：竖屏正方向；
• “portrait-secondary”：竖屏反方向；
• “landscape-primary”：横屏正方向；
• “landscape-secondary”：横屏反方向。

注意：需要提交App云端打包后才生效。

（3）图标配置

选择图标配置这一项，即我们下载App后所看到的图标。这里我们可以自行进行设置。选择一个256*256的图标图片，系统会自动生成其他比例的图标，来适应不同分辨率的手机屏幕。
（4）SDK配置
在开发App时，我们尽可能得使用一些比较稳定的第三方服务，这样能节约成本，同时缩短开发周期，在准确性上也有保证
这里的SDK配置有地图、登录授权、分享、统计、支付、推送
这里基本都是需要填写Appid 和Appkey
Appkey的获取通过第三方服务的授权可以获得

（5）模块权限配置：配置App需要用到的权限，用不到的都删除

这里的代码视图是对前面的配置的代码显示，也可以在代码视图中直接对各项配置进行修改

基本配置已配完。
最后打包：点击发行-发行为原生安装包，就好了。会打包成一个安装包，就可以安装到手机上了。