很多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体验极差。因此使用专业的打包工具或打包平台打包,还是非常有必要的。

本地H5模式写的APP体验可以比APP还好的更多相关文章

  1. 最接近原生APP体验的高性能前端框架——MUI

      前  言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...

  2. 2 weekend110的mapreduce介绍及wordcount + wordcount的编写和提交集群运行 + mr程序的本地运行模式

    把我们的简单运算逻辑,很方便地扩展到海量数据的场景下,分布式运算. Map作一些,数据的局部处理和打散工作. Reduce作一些,数据的汇总工作. 这是之前的,weekend110的hdfs输入流之源 ...

  3. 移动端本地 H5 秒开方案探索与实现

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模 ...

  4. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  5. 携程Apollo(阿波罗)配置中心本地开发模式不接入配置中心进行本地开发

    官方教程:https://github.com/ctripcorp/apollo/wiki/Java%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%BD%BF%E7%94%A8%E6%8 ...

  6. spark之scala程序开发(本地运行模式):单词出现次数统计

    准备工作: 将运行Scala-Eclipse的机器节点(CloudDeskTop)内存调整至4G,因为需要在该节点上跑本地(local)Spark程序,本地Spark程序会启动Worker进程耗用大量 ...

  7. hadoop本地运行模式调试

    一:简介 最近学习hadoop本地运行模式,在运行期间遇到一些问题,记录下来备用:以运行hadoop下wordcount为例子. hadoop程序是在集群运行还是在本地运行取决于下面两个参数的设置,第 ...

  8. 用户体验要好,App动画得这么做

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   在用户体验设计方面,App动画的设计和添加,带给设计师无限的创造空间的同时,也成为设计师群体最具 ...

  9. vue-class-component 以class的模式写vue组件

    vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...

随机推荐

  1. 经历与感想丨第15届CSUST-ACM程序大赛

    这算是我的第一次较正式的\(ACM\)团队比赛吧,真的感谢@dj.@qc两位大佬. 开局就选了最后一题(因为哈希是他们集训队的猫),但三人无啥思路,于是溜回A题(发现有不少人已经过了).dj很快进入状 ...

  2. G - Pyramid 题解(打表)

    题目链接 题目大意 t组数据,给你一个n(n<=1e9)求高度为n的等边三角形,求里面包含了多少个等边三角形 题目思路 打表找规律,然而我一直没找到规律. 看到题解恍然大悟,答案就是C(n+3, ...

  3. webgl智慧楼宇发光效果算法系列之高斯模糊

    webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇 ...

  4. 软件工程与UML第二次作业

    博客班级 https://edu.cnblogs.com/campus/fzzcxy/2018SE2/ 作业要求 https://edu.cnblogs.com/campus/fzzcxy/2018S ...

  5. Spring Boot + Sharding-JDBC 读写分离

    本文使用 Sharding-JDBC 实现读写分离,基于 CentOS 7 + MySQL 5.7 一.MySQL 安装及配置 1.1 安装 依次执行命令: sudo wget -i -c http: ...

  6. xargs--冬天里的一丝暖意

    本文为博客园作者所写: 一寸HUI,个人博客地址:https://www.cnblogs.com/zsql/ 你有批量kill作业吗?有因为删除文件夹的内容太多而报错吗?-bash: /bin/rm: ...

  7. java并发编程实战《二》java内存模型

    Java解决可见性和有序性问题:Java内存模型 什么是 Java 内存模型? Java 内存模型是个很复杂的规范,可以从不同的视角来解读,站在我们这些程序员的视角,本质上可以理解为, Java 内存 ...

  8. 转:浅谈HTTP中Get、Post、Put与Delete的区别

    1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...

  9. PyQt(Python+Qt)学习随笔:Qt Designer中Action关联menu菜单和toolBar的方法

    1.Action关联菜单 通过菜单创建的Action,已经与菜单自动关联,如果是单独创建的Action,需要与菜单挂接时,直接将Action Editor中定义好的Action对象拖拽到菜单栏上即可以 ...

  10. 图论——迪杰斯特拉算法(Dijkstra)实现,leetcode

    迪杰斯特拉算法(Dijkstra):求一点到另外一点的最短距离 两种实现方法: 邻接矩阵,时间复杂度O(n^2) 邻接表+优先队列,时间复杂度O(mlogn)(适用于稀疏图) (n:图的节点数,m:图 ...