chore: change pic to cos
This commit is contained in:
camera-2018
@@ -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包拿到数据。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user