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

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

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

今天给各位分享手机端原生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://sdjcht.com/post/2078.html

分享给朋友:

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

生日快乐刻字模板打印(生日祝福刻字模板)

生日快乐刻字模板打印(生日祝福刻字模板)

今天给各位分享生日快乐刻字模板打印的知识,其中也会对生日祝福刻字模板进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、生日礼物刻字刻什么好 2、生日蛋糕上写...

教资作文素材百度网盘(高考作文素材 百度网盘)

教资作文素材百度网盘(高考作文素材 百度网盘)

本篇文章给大家谈谈教资作文素材百度网盘,以及高考作文素材 百度网盘对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、求《教师资格证作文素材》全文免费下载百度网盘资源,谢谢~...

人头三视图参考(人头五视图)

人头三视图参考(人头五视图)

今天给各位分享人头三视图参考的知识,其中也会对人头五视图进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、求几个3D人头建模参考图 三视图 2、MAYA人物...

首涂模板影视二十二(首涂第二十六套模板)

首涂模板影视二十二(首涂第二十六套模板)

本篇文章给大家谈谈首涂模板影视二十二,以及首涂第二十六套模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、克洛伊战争(木马屠城)内容简介 2、唐朝房陵公主简介,李渊第...

稻壳网(稻壳儿网官网)

稻壳网(稻壳儿网官网)

今天给各位分享稻壳网的知识,其中也会对稻壳儿网官网进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、稻壳网怎么赚钱 2、疫情居家期间有哪些比较好的线上兼职可...

做一个微信小程序需要多少钱(做一个微信小程序需要多少钱?)

做一个微信小程序需要多少钱(做一个微信小程序需要多少钱?)

今天给各位分享做一个微信小程序需要多少钱的知识,其中也会对做一个微信小程序需要多少钱?进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、开发一个微信小程序一般得...