Hybrid设计--H5和Native,收口
Native提供容器,不要涉及太多的业务,否则就失去了通用性。
H5和Native的差异是短时间内解决不了的,React Native 超越Hydrid跨平台解决方案。
前端和 Native约定了一个规范,Native会根据规范生成你要的页面,这时布局会有一个限制,栅格化限制,由于css完整体系,总可以完成布局。看到的页面都是Native的,点击按钮的时候回调是javascript写的,这样一来的体验和Native的体验相差无几。React Native 的一般型业务的APP的,体验和Native的体验无从分辨。
weex走的是React Native的路线,由于推动方是前端,对前端更友好。
开发时,可以在浏览器中调试,再内嵌到Native中。如果直接在前端容器里调试,就是开发过程中就依赖app了,这样开发效率会打很大的折扣。像微信的小程序等,有自己的一套IDE,直接从工程层面上绕过了这一圈。如,微信公众号,直接提供了一套开发和工具。
开发团队有一套自己的东西,会极大的提升开发效率。
思维拓展:
条条大路通罗马----设计的时候让罗马只有一个入口,只有一个出口。不管路从哪里来,可以在统一的地方打一个标识。不同的出入口要有相同的规则,否则就会出问题。例如:高速路收费站,入口的时候做标识,出口的时候做标识。如此,流量的统计就会实现。收口的工作会让效率变低,但是会更有利于管理。做收口会有一些好处,坏处是面向用户会增加一些成本。生活中的收口的例子有很多,这个思想可以运用在前端甚至整个开发中。前端中的例子:ajax收口。
在业务架构层做个约定:如果在请求url时带了参数,就把参数放在commonData中。在进行ajax请求时一定会把commonData带上。创建订单时会将commonData带上,将flag的数据存在数据库。
整个这些有2个用处:1、例如这个app要去线下推广,会给很多人生成一个二维码,url => domain.com ,如果用户扫了这个二维码就会访问这个url,如果是通过这个url注册了,就会带一个flag参数。这样就知道这个人引导了多少个用户注册了账号。这样每个业务员的KPI一下就做完了。2、现在创业团队拿分红,我们有订单数据,投资人那边会质疑你的数据的真实性。订单数据中会有通用标识的数据,如:Native的app的设备号,获取的ip号。如此,数据齐全了,投资人是不会怀疑数据的真实性的。
以上是请求参数上做的处理。
ajax会返回数据,可能是城市数据,一般的一级城市二级城市基本不会改变,可以存在localstorage。这种存储localstorage的行为不需要业务开发去写,只需要一个方法做一些收口,做一些配置,城市数据就会存到localstorage中去。localstorage也应该封装出来,而不应该直接操作localstorage ,例如可以用store去操作localstorage。数据映射到store就行了。store会操作关注localstorage,什么时候过期什么时候该存。这样就是收口,收口做得好的话,重复的业务就会少很多。
Hybrid设计--H5和Native,收口的更多相关文章
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
- Hybrid设计--账号体系的建设
前后端分离:开发效率高,没有SEO 现在是重客户端设计:交互和业务逻辑是前端来写,适合做前后端分离.对前端更友好,提高了效率. 传统模式开发:整个业务逻辑是server端写,不适合做前后端分离.ser ...
- Hybrid设计--核心交互
普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现.拒绝用a和window.location.如果我想对所有跳转做一个处理,开动画或者对跳转 ...
- 【quickhybrid】H5和Native交互原理
前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前 ...
- h5和native测试时的区别
我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定 H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性稍差,似乎还没有百万级 ...
- Hybrid App 和 React Native 开发那点事
简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...
- Flutter,H5,React Native
Flutter介绍 - Flutter,H5,React Native之间的对比 Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在i ...
- 基于webview的Hybrid app和React Native及html5
基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...
- iOS之H5和Native混合开发
今天需要用到一个H5和Native 混合开发的项目,简单的写一点入门的东西,很简答: 先介绍一下简单的配置步骤: 1.新建项目:SB拖一个UIWebView 按住Ctrl 拖线delegate 设置为 ...
随机推荐
- nvidia-smi failed because it couldn't communicate with the nvidia driver
Ubuntu装好CUDA之后过段时间提示NVIDIA-SMI has failed because it couldn't communicate with the NVIDIA driver. NV ...
- centos7.2 nfs安装配置
nfs服务端 ip:192.168.1.16 1.yum -y install rpcbind nfs-utils 2.创建文件/etc/exports,内容如下 /mnt/ 192.168.1.0/ ...
- canvas 线性规划
小结: 1.线性规划 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 2015年蓝桥杯省赛A组c++第5题(回溯算法填空)
/* 1,2,3…9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. */ #include <stdio.h> void tes ...
- ida pro65
https://elinux.org/CI20_Dev_Zone#Making_a_bootable_SD_card_from_sources IDAPro65.exe: 下载地址:http://pa ...
- [skill][telnet] 用telnet获取一个网页
一直也搞不懂, telnet到底是干嘛用的. 然而, 它可以得到一个网页. /home/tong/Data/performance_test [tong@T7] [:] > telnet nyu ...
- Flash and Scalform CLIK
Flash shift + f7 打开组件检查面板 Scaleform As bit define bool Unrolling :1; // indi ...
- hdfs mapreduce hbase
参考资料:http://www.cnblogs.com/sharpxiajun/p/5585613.html 大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量 ...
- java ftp上传文件
/** * 上传文件到ftp * @param server * @param user * @param pwd * @param filenames */ public static void u ...
- Servlet (二)ServletContext
package cn.sasa.serv; import java.io.IOException; import javax.servlet.ServletContext; import javax. ...