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,收口的更多相关文章

  1. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  2. Hybrid设计--账号体系的建设

    前后端分离:开发效率高,没有SEO 现在是重客户端设计:交互和业务逻辑是前端来写,适合做前后端分离.对前端更友好,提高了效率. 传统模式开发:整个业务逻辑是server端写,不适合做前后端分离.ser ...

  3. Hybrid设计--核心交互

    普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现.拒绝用a和window.location.如果我想对所有跳转做一个处理,开动画或者对跳转 ...

  4. 【quickhybrid】H5和Native交互原理

    前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前 ...

  5. h5和native测试时的区别

    我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定 H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性稍差,似乎还没有百万级 ...

  6. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  7. Flutter,H5,React Native

    Flutter介绍 - Flutter,H5,React Native之间的对比   Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在i ...

  8. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  9. iOS之H5和Native混合开发

    今天需要用到一个H5和Native 混合开发的项目,简单的写一点入门的东西,很简答: 先介绍一下简单的配置步骤: 1.新建项目:SB拖一个UIWebView 按住Ctrl 拖线delegate 设置为 ...

随机推荐

  1. 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 ...

  2. centos7.2 nfs安装配置

    nfs服务端 ip:192.168.1.16 1.yum -y install rpcbind nfs-utils 2.创建文件/etc/exports,内容如下 /mnt/ 192.168.1.0/ ...

  3. canvas 线性规划

    小结: 1.线性规划 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  4. 2015年蓝桥杯省赛A组c++第5题(回溯算法填空)

    /* 1,2,3…9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. */ #include <stdio.h> void tes ...

  5. ida pro65

    https://elinux.org/CI20_Dev_Zone#Making_a_bootable_SD_card_from_sources IDAPro65.exe: 下载地址:http://pa ...

  6. [skill][telnet] 用telnet获取一个网页

    一直也搞不懂, telnet到底是干嘛用的. 然而, 它可以得到一个网页. /home/tong/Data/performance_test [tong@T7] [:] > telnet nyu ...

  7. Flash and Scalform CLIK

    Flash shift + f7 打开组件检查面板 Scaleform As bit define bool                Unrolling       :1;    // indi ...

  8. hdfs mapreduce hbase

    参考资料:http://www.cnblogs.com/sharpxiajun/p/5585613.html 大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量 ...

  9. java ftp上传文件

    /** * 上传文件到ftp * @param server * @param user * @param pwd * @param filenames */ public static void u ...

  10. Servlet (二)ServletContext

    package cn.sasa.serv; import java.io.IOException; import javax.servlet.ServletContext; import javax. ...