导航:首页 > 软件资讯 > h5与app如何兼容

h5与app如何兼容

发布时间:2023-08-28 12:58:04

⑴ 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与app如何兼容相关的资料

热点内容
androidgridview表格 浏览:602
压缩怎么eq闪 浏览:740
流密码算法openssl 浏览:262
怎么数黄豆个数python 浏览:799
混沌序列加密的结论 浏览:224
最新脱单app哪个好 浏览:638
如何用自己电脑做服务器做网页 浏览:140
服务器安全配置要考什么证书 浏览:633
ipadpro可以编程 浏览:541
外国的程序员和中国的程序员 浏览:151
抖音小店app如何联系客服 浏览:975
linux打开多个终端 浏览:500
linux中的命令 浏览:580
优化小米6相机算法 浏览:259
ak47pdf 浏览:150
人与文化pdf 浏览:640
原子币app在哪里注册的 浏览:530
php数组保存文件 浏览:227
无理的命令 浏览:512
问道手游解压失败是什么原因 浏览:778