当前位置:首页 > 网站模板 > 正文内容

手机端原生h5页面(手机版h5)

网站模板2年前 (2023-01-26)582

今天给各位分享手机端原生h5页面的知识,其中也会对手机版h5进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

如何判断一个APP页面是原生的还是H5页面

如今最火的APP开发模式是Hybrid APP开发(即混合模式,半原生半H5页面)。

把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。

显示404或者错误页面的是html页面。

可以打开 开发者选项中的显示布局边界,页面元素很多的情况下布局是一整块的是h5的,布局密密麻麻的是原生控件。页面有布局的是原生的否则为h5页面。(仅针对安卓手机适用)如下图所示:

这个需要你通过对比才能得出结果,比如是文章资讯页面可以长按页面试试,如果出现文字选择、粘贴功能的是H5页面,否则是native原生的页面。

有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。

这个在支付宝APP、蚂蚁聚宝都是可以判断的。

如果在打开新页面导航栏下面有一条加载的线的话,这个页面就是H5页面,如果没有就是原生的。微信里面打开我们的H5页面常见的有个绿色的 加载线条。如下图红框里面所示:

如下图所示:

希望可以帮到大家,以便更加容易区分原生APP页面和H5页面。

H5页面与原生App(安卓,IOS)交互

       在客户端项目中,同一个app会开发成两个版本,一个是安卓版本,一个IOS版本,公司必须有两个开发团队(一个安卓团队,一个IOS团队)来进行开发,这样一来,开发成本非常之高。所以,往往在实际项目-中,会嵌套很多H5页面,一个H5页面同时兼容安卓和IOS两个系统 ,这样一来,大大减少了开发成本,前端开发页面就必须和原生进行交互。

1. 页面开发      —— 前端开发人员将所有的页面按照移动webappp进行开发,做好不同屏幕的适配(宽度100%,视口为移动端视口 (快捷方式meta:vp  tap),字体适配rem单位,设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize,去除移动端高亮显示;小图标要善于使用字体图标(常用的字体图标库有阿里巴巴矢量图),改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标,就可以做成自己想要的图标效果)

2.前端页面部署 —— 设置好入口文件(原生一进来就进入的页面,命名为index.html),部署到对应的服务器上,通过网址就能够访问到页面,将网址给app客户端开发人员,他们将app配置好环境后讲页面嵌套在app中。

3.进行数据对接:两种对接方式(1).前端页面自己通过ajax去后台拉数据,然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号,加密方式,请求数据所需要的各种参数通过回调函数传递给H5页面,H5页面拿到这些数据后直接调后台的借口、获取到数据。(2).前端页面不用自己去后台拉取数据,而是通过回调函数,获取到原生app拉取的数据,前端页面将这些数据处理后又通过回调函数交给app,再又app发送给后台。两种调用的优劣比较:如果H5页面及数据不是很多,使用第二种方式比较合理,不用H5页面请求数据(不用封装请求,不用加密数据),不使用框架,大大减少了页面的大小,提高性能及用户体验。如果涉及到的前端页面非常多,数据交互比较复杂的话,就必须使用第一种对接方式了,app只需要将设备号,加密规则,参数传递给H5,H5根据页面需求自己向后台拉去和请求数据,直接交互,不再通过app进行转接,减小复杂程度。

H5端与原生混合开发遇到的一些问题

在与原生安卓/IOS实现混合开发时,会遇到一些问题,在此做下记录(以下是目前遇到的或之前有记录到的一些问题,后续如果有遇到新的问题或整理过程中发现其他的一些问题再补上):

1.H5页面拨打电话问题

(1)在移动端页面实现时,只需使用a标签,a href="tel:1234567"即可实现。

(2)与原生混合开发时,安卓端嵌入我们的H5页面,采用以上方式却无法实现,(IOS端是没有问题的),因此需要调用原生本地的拨打电话方法。

2.IOS时间的一个兼容性问题

H5页面实现过程中遇到了时间处理的问题。使用new Date(time).getDay()的时候,正常返回应该的是0-6,对应每周的星期日到星期一,但在IOS上,例如:我们使用的是(2018-6-4)的话,它会返回undefined。因此我们在这里应该对这个时间格式进行处理,将其改为(2018/6/4)的格式去获取。

即:new Date("2018-06-04").replace(/-/g ,"/");

关于手机端原生h5页面和手机版h5的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫描二维码推送至手机访问。

版权声明:本文由我的模板布,如需转载请注明出处。


本文链接:http://390c.top/post/2078.html

分享给朋友:

“手机端原生h5页面(手机版h5)” 的相关文章

广东省劳动合同书电子版免费下载(广东劳动合同打印版本下载)

广东省劳动合同书电子版免费下载(广东劳动合同打印版本下载)

本篇文章给大家谈谈广东省劳动合同书电子版免费下载,以及广东劳动合同打印版本下载对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、2022年广东省劳动合同模板 2、如何下载...

阿里巴巴宝贝详情尺寸(阿里产品图片尺寸)

阿里巴巴宝贝详情尺寸(阿里产品图片尺寸)

今天给各位分享阿里巴巴宝贝详情尺寸的知识,其中也会对阿里产品图片尺寸进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、阿里巴巴里上传产品图片的尺寸多大最合适?...

会员购物金怎么退(会员购定金怎么退款)

会员购物金怎么退(会员购定金怎么退款)

今天给各位分享会员购物金怎么退的知识,其中也会对会员购定金怎么退款进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、淘宝充值的购物金可以退吗 2、没用完的购...

HTML静态网页设计(html静态网页设计总结)

HTML静态网页设计(html静态网页设计总结)

本篇文章给大家谈谈HTML静态网页设计,以及html静态网页设计总结对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、怎样制作简单的静态的网页设计 2、html静态网页怎...

携程网页HTML源代码(携程网页html源代码在哪)

携程网页HTML源代码(携程网页html源代码在哪)

今天给各位分享携程网页HTML源代码的知识,其中也会对携程网页html源代码在哪进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、携程的股票代码 2、酒店如...

双方自愿离婚协议书模板免费(双方自愿离婚协议书模板免费复印)

双方自愿离婚协议书模板免费(双方自愿离婚协议书模板免费复印)

今天给各位分享双方自愿离婚协议书模板免费的知识,其中也会对双方自愿离婚协议书模板免费复印进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、两人自愿离婚的离婚协议...