如何快速将一个 移动web应用 生成一个 手机app [By hbuider]

移动app生成方案细节总结

选用工具

• appcan
• apicloud
• hbuider( dcloud )

工具对比

apicloud

强大的云端, 代码提交和云编译很迅速
完善的访问底层设备能力, 依靠模块的扩展来使用原生app能力
UI 层面的欠缺, 即时 原生 ui也很少

appcan

云端能力略逊于apicloud, 云编译速度 很慢(因为人多…)
底层访问设备能力不差, 与apicloud相似 以插件形式调用
移动 UI 略丰富, 组件支持拖拽设计(使用他们的IDE)

hbuider (dcloud)

工具强大, 提供云端能力但不强, 云编译速度一般
底层访问能力灵活, 使用HTML5+ 规范 , h5+ runtime实现.
ui方面有其自主开发(不晓得模仿哪里)的框架mui, 模版丰富, 组件不错

总结

建议使用hbuider , 相比appcan,apicloud 虽然云端功能并不是很强, 但支持云端打包Android和iOS足矣… 而且其调用原生app 的功能方式更优雅. 加上前端 ui框架组件及模版丰富, 文档也很规范,条理 .

单页面web应用转换app方案

以Hbuider为例 , 其他2个工具差距并不大

前提

以单页面为入口且所有跳转均不更改location.href( 即不重新发起路径上的请求) , 仅通过requirejs 加载页面及css 手动填充覆盖到原页面上, 这种web应用转换成app可以做的几乎不改代码

步骤

• 创建一个hbuider 移动app工程, 完成点击项目后, 右键–>打开文件所在目录
• 将之前写好的web代码按照规律放入对应目录, 如 html可以作为主目录 ,css 和 js 则放全局的, 不知道放哪里的文件夹可以直接粘贴过去(等于多了一个目录)
• 将页面入口覆盖index.html , 当然名字一样才是覆盖
• 修改index.html中相应的路径
• 修改其他文件中路径, 如requireJs则主要修改 paths 属性,baseUrl也处理好
• 修改好后连接手机, usb调试, 从工具条运行–> 在xx设备上运行xxx
• 观察控制台, 须知此时出现的错误和开发网页出现的错误是类似的, 本质上运行的本来就是网页,如用了requirejs, 则很大可能出现路径错误导致script error 之类的.. 查看修复, 保存重来

注意事项

单页面跳转带来的隐患

由于整个web应用其实只有一个页面作为主入口, 跳转时总是替换该页面的内容, 导致history.back()方法并不会生效, 而根据推断, appcan和apicloud的返回键处理一般都调用了这行代码, 所以当用户按下返回键时, 就要出问题.

解决方案
当跳转页面时(逻辑上) 添加代码

history.pushState({"id":id}, "", location.href);

此方法作用等于给history栈添加了一条记录,并更改页面地址为 第三个参数
第一个对象将赋给history.state对象, 可在后面取得
同时为window添加一个监听

window.onpopstate = function(e){
    if(history.state) {
        loadPage(getUrl(history.state.id));
    }
}

即当 history栈发生改变时, 触发改事件, 判断是否有state对象(有则是我们自己加的history记录), 然后根据之前存入的对象数据将页面再覆盖填充