一.下载Hbuilder 稳定版 APP开发版 并安装 下载地址:https://www.dcloud.io/hbuilderx.html
参考官方安装注意事项:
- windows: https://hx.dcloud.net.cn/Tutorial/install/windows
- macosx: https://hx.dcloud.net.cn/Tutorial/install/macosx
二.安装成功后 注册hbuilderx用户
三. windows需额外下载360手机助手连接安卓手机 mac需确认系统iTunes版本可以正常连接自己ios手机;
四.clone DWF3.0代码到本地 注意:此处只是为了给测试人员本地真机测试 打包自己服务器环境的步骤 线上除了第三步路由的修改 还使用jekins脚本即可
- 使用任一代码开发工具 打开DWF3.0项目;
- 修改app-mobile工程下 public文件夹下 config.js文件内 下图圈中区域的服务器地址 为自己测试服务器地址;
- 修改app-mobile工程下 src文件夹下 main.js文件内 下图圈中区域的路由模式 由 'history' 改为 'hash' 此处线上打包也需注意;
- 修改app-mobile工程下 vue.config.js 下图圈中区域的公共路径 由'/app-mobile' 改为 './' 此处线上打包也需注意;
- 确认完成上面两步修改后 任务管理器进入到克隆下来代码文件DWF3.0位置 执行以下两行命令完成打包操作;
- cd app-mobile
- npm install
- npm run build
五.打包成功后 打开我们已经注册用户并为登录状态的HbuilderX;
- 选择文件 => 新建 => 项目
- 选择5+APP => 填写APP英文名 => 选择默认模板 => 点击创建
- 创建项目成功后 点击项目工程下manifest.json 基础配置下 确保应用标识获取到 应用名称可以和标识不同 但建议相同 版本名称 版本号参考截图 或自己定义有效值 首页地址按默认提供无需修改;
- 选择模块配置 定位勾选百度定位 地图勾选百度地图 勾选视频播放 (地图配置秘钥 DpWBtMpHLbMNaCncXlGFciGOHQG1hLu8);
- 选择权限配置 除去默认已勾选的配置 将含有camera CAMERA LOCATION NETWORK WIFI VOICE VOICEMAIL AUDIO VIDEO的权限进行勾选(太分散了 截不动图);
- 选择源码视图 将以下配置加入plugins属性中;
"audio": {
"mp3": {
"description": "Android平台录音支持MP3格式文件"
}
}
六.Hbuilderx项目及基本配置准备好后 打开DWF3.0下 app-mobile下 的dist文件夹;
- 将dist文件夹下的全部文件选中拷贝到HbuilderX 我们上面新建的dwfapp项目中 重复名的文件夹选择覆盖即可;
打开拷贝过来的index.html 将文件内 '/app-mobile' 全部修改替换为 '.' 并保存;- 打开拷贝过来的index.html 将文件内所有静态资源引入地址前加上 './' 并保存;
- 通过电脑连接数据线链接手机 安卓打开360手机助手 ios打开iTunes 在手机弹出usb调试弹窗后选择信任 (iOS系统手机在选择信任后 进入手机设置 => 通用 => 设备管理 => 对Digital Heaven企业级app选择信任);
- HbuilderX选中我们的dwfapp项目 选择运行 => 运行到手机或模拟器 => 运行设备xxx手机(若此处没有显示当前通过数据线链接的手机,请重新确认手机是否已对usb调试进行允许信任 可重复上一步操作);
- 以上步骤都成功后 在hbuilderx的终端提示运行结束后 即可在手机看到HbuilderLogo图标的一个App 进入即可真机进行测试;
七.安卓系统apk打包 确保以上配置和index.html文件都正确修改;
- 修改打包后app的图标 (无需修改APP图标的可忽略此步骤);
点击项目工程下manifest.json 进入图标配置 点击浏览上传1024 * 1024的png格式图片 然后勾选上不替换手动设置的图标 点击自动生成所有图标并替换;
- 点击发行 选择原生App-云打包 弹窗内点击右下角的打包按钮 初次云打包 会提示需要安装打包插件 使用公共证书 确认即可;
打包命令执行成功 下方终端会有进度提示 请耐心等待 按照官方建议 一次打包没完成之前 不要反复打包;