@@ -69,7 +69,7 @@
它是基于WebView渲染, 通过JS Bridge 把一部分系统能力开放给JS调用。


WebView容器的工作原理是基于Web技术来实现界面和功能, 通过将原生的接口封装、暴露给JavaScript调用, JavaScript编写的页面可以运行在系统自带的WebView中。这样做的优势是, 对于前端开发者比较友好, 可以很快地实现页面跨端, 同时保留调用**原生的能力**,通过搭建桥接层和原生能力打通。但这种设计,跨端的能力受限于桥接层,当调用之前没有的原生能力时,就需要增加桥。另外,浏览器内核的渲染独立于系统组件,无法保证原生体验,**渲染的效果会差不少**。
@@ -80,7 +80,7 @@ WebView容器的工作原理是基于Web技术来实现界面和功能, 通过
浏览器提供了一个容器,屏蔽了底层差异,提供了统一的 api( dom api) , 这样就可以实现同一份代码跑在不同平台的统一的容器里。这个容器叫做浏览器引擎, 由 js 引擎、渲染引擎等构成。


#### PWA
尽管PWA的出现不是为了“跨端”, 但他们对于“跨端”的天然支持, 能够让一套代码运行在PC、移动两端, 就再一次产生了跨端设计实施的可能性。
@@ -107,7 +107,7 @@ PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018
#### Electron


Electron 是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用程序的框架,可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。
@@ -123,7 +123,7 @@ Electron 的跨端原理并不难理解:它通过集成浏览器内核,使
#### React Native
React Native 是一个由 Facebook 于2015年9月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。


React Native 的思路是最大化地复用前端的生态和 Native 的生态,和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染,转而**使用自己的 DSL 生成中间格式**,然后映射到对应的平台,**渲染成平台的组件**。相对 WebView 容器,体验会有一定的提升。不过,渲染时需要 JavaScript 和原生之间通信, 在有些场景可能会导致卡顿。另外就是, 渲染还是在Native层, 要求开发人员对Native有一定的熟悉度。
@@ -150,7 +150,7 @@ Flutter与上述Recat Native、WebView容器本质上都是不同的, 它没有
微信小程序的渲染层与逻辑层分别由两个线程管理,渲染层的界面使用 webview 进行渲染;逻辑层采用 JSCore运行JavaScript代码。


## 类前端开发:拿过来吧你
@@ -166,7 +166,7 @@ Flutter与上述Recat Native、WebView容器本质上都是不同的, 它没有
JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言, 页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式, 可以让开发者避免编写UI状态切换的代码, 视图配置信息更加直观。


## 跨端不只是跨端:爱你的全世界
@@ -174,9 +174,9 @@ JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式
## 什么样的场景可以跨端?
跨端应用能够真正推进下去, 除了有技术保障外, 还需要合适的需求场景, 使用PC端的功能型产品主要是需要大屏带来的“效率”( 办公、个人管理、教育) 与“沉浸”( 数据、金融、游戏、影视) 体验。




依赖PC、移动双端进行经营管理的电商场景, 也有很多内容适合跨端。
@@ -185,25 +185,25 @@ JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式
1. 双端基础组件设计规则对齐( 对前端来说是同类组件API、属性对齐以及组件功能形态映射)


Select对应Picker
1. 布局响应规则(行列变化,聚合变化等);


卡片布局的一种聚合变化
1. 交互形态响应规则(导航、交互模式等);


表单型弹窗对应新页面
1. 不同场景的跨端策略, 例如Dashboard页面的跨端应保证用户在首屏快速获取关键信息, 下图的Bootstrap模板是一个错误示例, 移动端的布局方式浪费首屏空间, 降低用户获取关键信息的效率。


Mobile first 不是唯一准则。进行具体场景的跨端设计时, 我们会从两端场景出发重新对比分析用户的需求差异, 明确体验的增强点与折损点。特别是电商中后台场景中: 有些业务中用户的主阵地并不是在移动端, 而是PC端, 比如用户运营策略的设置; 有些是两端分别承载不同的场景需求, 比如任务的处理。
@@ -217,7 +217,7 @@ Mobile first 不是唯一准则。进行具体场景的跨端设计时,我们
Serverless字面意思是无服务, 但并不代表再也不需要服务器了, 而是指开发者不需要过多的考虑服务器的问题, 计算资源作为服务出现而不是服务器的概念出现。 那么Serverlss, 是对全部底层资源和操作的封装, 让开发者专注于业务逻辑。


Serverless = Faas (Function as a service) + Baas (Backend as a service)
@@ -254,7 +254,7 @@ Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前
- 无需在代码内考虑高并发高可靠性,可以专注于业务
- 通过云函数实例的高并发能力,实现业务高并发


#### 自动弹性压缩
@@ -281,7 +281,7 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
- 在Android平台, 将.uts文件编译为kotlin代码
- 在iOS平台, 将.uts文件编译为swift代码


1. 区分页面和组件的区别:页面和组件的生命周期
2. 云函数、云数据库
@@ -298,12 +298,12 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
1. Frameless: 桌面端不仅仅只有方框矩形, 而是想你所想。


## 参考作业
尝试使用某种跨端框架和云函数, 实现一个查看课表应用, 形式不限。推荐使用hdu-lis包拿到数据。

