[toc]
整理说明
本文介绍了基于 HBuilderX, 将自主开发的 H5 网站, 使用云打包 App 的方法, 以及打包 App 过程中, 遇到的问题和解决方法.
在 HBuilderX 中开发的应用, 或者第三方的 h5 应用, 可以创建项目, 提交到云端打包生成 apk(Android 平台)和 ipa(iOS 平台). 如果本地配置好对应的原生开发环境, 也可以使用本地打包.
HBuilder 介绍
HBuilder 是 DCloud(数字天堂)推出的一款支持 html5 的 web 开发 IDE. HBuilder 的编写用到了 Java,C,Web 和 Ruby.HBuilder 本身主体是由 Java 编写. 它基于 Eclipse, 所以顺其自然地兼容了 Eclipse 的插件.
官方网站:
http://www.dcloud.io/
很多用户关心 HBuilderX 和 HBuilder 的对比, 如下:
HX 的优势:
HX 性能更强, 启动速度, 大文档打开速度, 代码提示速度均极为流畅.
HX 的 vue 语法提示, ES6 语法提示支持更强大, 应该是最强悍的 vue 提示工具.
HX 有内置终端, 对于现代编译型语言的开发提供更强的支持.
HX 支持 uni-App, 小程序开发, 快应用开发
HX 的 Markdown,JSON 方面秒杀其他开发工具.
HX 新增了智能双击, 更完善的多光标处理, 可为极客提供更高效的操作.
HBuilder 也有 HBuilder 的优势, 如果开发者使用 jQuery,PHP 等技术栈, 目前还是建议使用 HBuilder.HBuilderX 对这 2 块技术的支持不如 HBuilder.
当然开发者也可以多工具并用, 在使用 HBuilder 有优势的场景时切回 HBuilder.
本文介绍的打包 App, 使用的是 HBuilderX.
打包方法
假设我们打包 App 项目地址为: http://www.h5net.com/
创建项目
xj.PNG
xj1.PNG
image.PNG
image.PNG
配置项目
将做好的项目往里面扔
image.PNG
或者在 Index.HTML 里面添加自动跳转, 这样一打开 App 就会直接跳到你的项目.
image.PNG
image.PNG
根据应用, 对 App 进行基础配置, 包括: 基础配置, 图标配置, 启动图配置等, 对于 sdk 和模块权限配置等, 没有用到可以不进行配置.
至此就差打包啦~
打包方法
image.PNG
image.PNG
image.PNG
image.PNG
至此, 已经完成 h5, 加壳打包 App 的工作.
证书配置说明
image.PNG
iOS:
首先要成为苹果开发者(需要收费, 免费的开发者使用受限), 申请苹果开发者证书和发布证书. 开发者证书的证书描述文件要配置授权的设备的 UDID, 发布证书用于发布到 apple store 使用.
参考: iOS 证书申请指南
Android:
可以直接使用, dcloud 的公有证书即可.
问题解决
网络不好出错误页
当 Webview 窗口加载错误地址 (如本地页面不存在) 或者访问网络资源失败 (如无法访问网络) 时会自动显示默认错误页面:
image
可以通过以下方法自定义 Webview 的 404 等错误页面.
设置应用全局默认错误页面
5+App 和 wap2app
在应用的 manifest.JSON 文件的 "plus"->"error" 节点的 url 属性可配置自定义错误页面替换默认的错误页面.
打开 manifest.JSON 文件, 切换到代码视图, 添加以下数据:
- "plus": {
- "error": {
- "url": "error.html"
- },
- //..
- },
- //..
其中 url 地址推荐使用本地地址, 相对于应用根目录. 设置为 "none" 则关闭跳转到错误页面功能, 此时页面显示 Webview 默认的错误页面内容.
错误页面中监听事件
在定义的 error.HTML 页面中可以通过监听 "error" 事件获取更多错误信息:
- // 获取错误信息
- document.addEventListener("error",function(e){
- var url = e.url; // 错误页面的 url 地址
- var href = e.href; // 错误页面的完整路径(包括完整的协议头)
- },false);
参考:
- https://ask.dcloud.net.cn/article/73
- https://blog.csdn.net/qq_34400736/article/details/90267920
QQ 第三方登录, 回不了 App.
H5 支付无法返回 App 的问题. 解决思路是使用 App 配置 urlscheme 调起 App, 参考:
https://ask.dcloud.net.cn/article/409.
开始想通过给 QQ 回调地址配置 urlscheme 来实现, 在 h5 中监听 urlscheme 调用参数, 实现登录处理. 但是 QQ 客户端不能调起 App, 只是使用浏览器调起了处理后的 urlshceme 地址. 后来改成在 qq 回调地址里, 通过 urlscheme 调起 h5 App, 中间会调转浏览器, 再回 App. 这个实现目前的问题: 会经过中间浏览器窗口, 而且浏览器会弹出打开 App 的弹窗, 效果不是很好, 但是可以实现整体功能. 这里有更好的解决欢迎一起探讨.
5+ App 中处理 urlscheme 启动传递的参数:
在其它应用中通过 href 调用 Url Scheme 传递过来的值, 可以通过 plus.runtime.arguments 获取
其值为完整的 urlscheme 字符串, 如上面 href 的值启动应用后获取的 plus.runtime.arguments 值为 "test://abc"
代码示例如下:
- document.addEventListener('plusready',function(){
- checkArguments();
- },false);
- // 判断启动方式
- function checkArguments(){
- console.log("plus.runtime.launcher:"+plus.runtime.launcher);
- var args= plus.runtime.arguments;
- if(args){
- // 处理 args 参数, 如直达到某新页面等
- }
- }
- // 处理从后台恢复
- document.addEventListener('newintent',function(){
- console.log("addEventListener: newintent");
- checkArguments();
- },false);
参考:
- https://www.jianshu.com/p/475b398a117d
- https://ask.dcloud.net.cn/article/409
状态栏问题
由于沉浸式延伸的问题, 不使用状态兰透明, 参考:
https://www.cnblogs.com/green-jcx/p/8945872.html
返回键退出应用的问题
解决打包成 App 后, 单击 手机返回键退出应用的 bug.
- document.addEventListener('plusready', function() {
- var webview = plus.webview.currentWebview();
- var first = null;
- plus.key.addEventListener('backbutton', function() {
- webview.canBack(function(e) {
- if (e.canBack) {
- webview.back();
- } else {
- //webview.close(); //hide,quit
- //plus.runtime.quit();
- // 首页返回键处理
- // 处理逻辑: 1 秒内, 连续两次按返回键, 则退出应用;
- // 首次按键, 提示'再按一次退出应用'
- if (!first) {
- first = new Date().getTime();
- // toast('双击返回键退出应用'); // 调用自己写的吐丝提示 函数
- console.log('再按一次退出应用');
- plus.nativeUI.toast("双击退出", {
- duration: 'short'
- }); // 通过 H5+ API 调用 Android 上的 toast 提示框
- setTimeout(function() {
- first = null;
- }, 1000);
- } else {
- if (new Date().getTime() - first < 1400) {
- plus.runtime.quit();
- }
- }
- }
- })
- }, false);
- /* 沉浸式延伸的问题: 状态栏的高度被忽略 */
- // plus.webview.currentWebview().setStyle({
- // statusbar:{background:'#ff0000'},top:0,bottom: 0
- // });
- });
注意: 需要在项目的 h5 页面都添加这个方法, 可以考虑添加到公共模块里面.
上面这段代码: 我参考的文章和文档链接:
https://blog.csdn.net/qq_25252769/article/details/76913083
这个是 H5+ API 的 (通过 JS 调取 Android 等平台的原生方法) 学习链接: http://ask.dcloud.net.cn/docs/
其它
参考
- http://www.dcloud.io/
- https://blog.csdn.net/hrf368246980/article/details/81202345
- https://www.cnblogs.com/taohuaya/p/10263519.html
- https://www.jianshu.com/p/c1973aacc774
来源: http://www.jianshu.com/p/26c84a6aec57