本地H5模式写的APP体验可以比APP还好
阅读原文时间:2023年07月09日阅读:1

很多APP使用H5编写,但APP链接的是远程的url的模式,导致了APP的用户体验极差,因为当你使用远程的H5 url的时候,打开H5页面的速度由网络决定,而不是由手机性能决定,假如用户在没有网络的地方打开APP,甚至出现迟迟打不开APP界面,出现白色空白页的情况,造成用户一直在等待。

其实APP使用H5,不应该使用远程的H5 url,而是应该使用file://本地路径的方法打开本地的H5页面,而不是使用http://远程路径的方式打开H5页面,这样APP的打开速度就可以跟原生相比,因为这样打开速度就不会跟网络速度相关,速度可以跟原生一样秒开。而且界面打开后,加载数据的时候使用ajax异步加载,先让界面出现,提示用户等待,而不使用同步加载,这也是提高H5体验的关键。这样APP界面的打开速度就跟手机的性能相关,而不是跟网络速度相关。

为什么我说用H5开发的APP体验可以比APP还好呢?因为这来自于成熟的CSS标准和成熟的js Ui框架技术,因为一种很炫的界面,使用css实现起来非常简单,甚至可以下载到非常炫的css样式,假如使用原生自己来编写同样的UI,实现起来可能会非常麻烦。因此,目前很多公司使用本地H5来渲染界面做出来的界面,反而非常好看,但却因为使用了错误的远程URL模式却又影响了用户体验。

  本地H5模式+H5热更新+支持ajax跨域,才是使用H5的最佳解决方案。为什么要跨域呢?因为我们打开本地H5的时候使用的是file://本地路径的方法打开的,因此假如我们使用http或https访问外部api的时候,是需要跨域支持的。幸运的是,安卓的webview和ios的UIwebview组件是可以设置支持跨域的。不过假如自己打包APP,要实现所有这些,还要兼容所有手机,也是门槛比较高的,甚至比开发原生APP的门槛还高。因此,为了用户体验,还是需要使用专业的打包工具进行打包,还是不要自己去打包H5 app。

使用什么工具打包呢?可以使用hbuilder进行打包,但是hbuilder不能实现自动的热更新。在这里我推荐一个非常优秀的在线打包本地H5的工具,我使用过,非常好用。
      https://www.yunedit.com

这个工具能打包本地H5模式的app,还能在后台热更新H5代码,还能支持跨域访问ajax,还有yeui js框架调用原生功能。

总结下,其实用H5开发体验不好,还是因为程序员水平的问题,APP打包工程师的水平问题,导致了无论前端H5工程师写的代码无论多出色,最后都因为网络问题使得APP体验极差。因此使用专业的打包工具或打包平台打包,还是非常有必要的。