chore: turn cos to cdn

This commit is contained in:
camera-2018
2023-07-25 02:23:45 +08:00
parent e81e23ef85
commit 3716e9f77c
98 changed files with 522 additions and 522 deletions

View File

@@ -43,13 +43,13 @@
设计稿如下:
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnVR5z4U8YlXZbc8beDNEHXc.jpg)
![](https://cdn.xyxsw.site/boxcnVR5z4U8YlXZbc8beDNEHXc.jpg)
#### 可能需要用到的图片资源
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnbigxAK5SbxiWuDHr1Ashne.png)
![](https://cdn.xyxsw.site/boxcnbigxAK5SbxiWuDHr1Ashne.png)
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnrqddPFusKhe0vZuzXJOosg.png)
![](https://cdn.xyxsw.site/boxcnrqddPFusKhe0vZuzXJOosg.png)
#### 基本要求
@@ -91,9 +91,9 @@
### 🎫TodoList
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnikdFX5WNml7sgtPMOJQiGh.png)
![](https://cdn.xyxsw.site/boxcnikdFX5WNml7sgtPMOJQiGh.png)
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnFZwQVTUWkfsbNxYfJkgPDg.png)
![](https://cdn.xyxsw.site/boxcnFZwQVTUWkfsbNxYfJkgPDg.png)
<center>一些参考</center>
@@ -119,7 +119,7 @@
- 实现不同设备屏幕尺寸的自适应
- 添加任务热力图(可以参考一下 GitHub 个人主页哦 🤔)
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcncVQswB7ziUoV4LvEs35DAe.png)
![](https://cdn.xyxsw.site/boxcncVQswB7ziUoV4LvEs35DAe.png)
#### 可能涉及的知识点

View File

@@ -10,11 +10,11 @@
如果你曾经用过助手的小程序,你可能会在首页看到这样的天气卡片:
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnTNJhtqw6Km24fKgAnjZtBS.png)
![](https://cdn.xyxsw.site/boxcnTNJhtqw6Km24fKgAnjZtBS.png)
当然了,平时大家也会用到各种天气 APP
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnUuqMoTjiOH9NSdYx4GCGme.png)
![](https://cdn.xyxsw.site/boxcnUuqMoTjiOH9NSdYx4GCGme.png)
那么,让我们动手实现一个天气卡片吧~
@@ -63,9 +63,9 @@
## 🎶 音乐播放器
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnRaBolh8i2FkoIJW69a5g3e.png)
![](https://cdn.xyxsw.site/boxcnRaBolh8i2FkoIJW69a5g3e.png)
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnJ13CDzxp9lwEtGivTuJ4nh.png)
![](https://cdn.xyxsw.site/boxcnJ13CDzxp9lwEtGivTuJ4nh.png)
相信你平时或多或少都会听音乐,那么你是喜欢用网易云还是 QQ 音乐呢?或者是系统自带的音乐播放器?不过,其实你也可以自己做一个音乐播放器,来满足你对听音乐这件事的所有幻想,听起来是不是很酷呢 😎~那么,来试试看吧!

View File

@@ -69,7 +69,7 @@
它是基于WebView渲染通过JS Bridge 把一部分系统能力开放给JS调用。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/235436487dsfhtwuytjyfj.png)
![](https://cdn.xyxsw.site/235436487dsfhtwuytjyfj.png)
WebView容器的工作原理是基于Web技术来实现界面和功能通过将原生的接口封装、暴露给JavaScript调用JavaScript编写的页面可以运行在系统自带的WebView中。这样做的优势是对于前端开发者比较友好可以很快地实现页面跨端同时保留调用**原生的能力**,通过搭建桥接层和原生能力打通。但这种设计,跨端的能力受限于桥接层,当调用之前没有的原生能力时,就需要增加桥。另外,浏览器内核的渲染独立于系统组件,无法保证原生体验,**渲染的效果会差不少**。
@@ -80,7 +80,7 @@ WebView容器的工作原理是基于Web技术来实现界面和功能通过
浏览器提供了一个容器,屏蔽了底层差异,提供了统一的 apidom api这样就可以实现同一份代码跑在不同平台的统一的容器里。这个容器叫做浏览器引擎由 js 引擎、渲染引擎等构成。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/fdegetyjyrj.png)
![](https://cdn.xyxsw.site/fdegetyjyrj.png)
#### PWA
尽管PWA的出现不是为了“跨端”但他们对于“跨端”的天然支持能够让一套代码运行在PC、移动两端就再一次产生了跨端设计实施的可能性。
@@ -107,7 +107,7 @@ PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018
#### Electron
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/wettrjryju.png)
![](https://cdn.xyxsw.site/wettrjryju.png)
Electron 是使用 JavaScriptHTML 和 CSS 构建跨平台的桌面应用程序的框架,可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。
@@ -123,7 +123,7 @@ Electron 的跨端原理并不难理解:它通过集成浏览器内核,使
#### React Native
React Native 是一个由 Facebook 于2015年9月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/eryyjyuj.png)
![](https://cdn.xyxsw.site/eryyjyuj.png)
React Native 的思路是最大化地复用前端的生态和 Native 的生态,和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染,转而**使用自己的 DSL 生成中间格式**,然后映射到对应的平台,**渲染成平台的组件**。相对 WebView 容器,体验会有一定的提升。不过,渲染时需要 JavaScript 和原生之间通信在有些场景可能会导致卡顿。另外就是渲染还是在Native层要求开发人员对Native有一定的熟悉度。
@@ -150,7 +150,7 @@ Flutter与上述Recat Native、WebView容器本质上都是不同的它没有
微信小程序的渲染层与逻辑层分别由两个线程管理,渲染层的界面使用 webview 进行渲染;逻辑层采用 JSCore运行JavaScript代码。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/rtjyujyu.png)
![](https://cdn.xyxsw.site/rtjyujyu.png)
## 类前端开发:拿过来吧你
@@ -166,7 +166,7 @@ Flutter与上述Recat Native、WebView容器本质上都是不同的它没有
JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式可以让开发者避免编写UI状态切换的代码视图配置信息更加直观。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/3465ytyjyjy.png)
![](https://cdn.xyxsw.site/3465ytyjyjy.png)
## 跨端不只是跨端:爱你的全世界
@@ -174,9 +174,9 @@ JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式
## 什么样的场景可以跨端?
跨端应用能够真正推进下去除了有技术保障外还需要合适的需求场景使用PC端的功能型产品主要是需要大屏带来的“效率”办公、个人管理、教育与“沉浸”数据、金融、游戏、影视体验。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/ertehry.png)
![](https://cdn.xyxsw.site/ertehry.png)
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/ertjyunyunm.png)
![](https://cdn.xyxsw.site/ertjyunyunm.png)
依赖PC、移动双端进行经营管理的电商场景也有很多内容适合跨端。
@@ -185,25 +185,25 @@ JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式
1. 双端基础组件设计规则对齐对前端来说是同类组件API、属性对齐以及组件功能形态映射
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/ewttrhjy.png)
![](https://cdn.xyxsw.site/ewttrhjy.png)
Select对应Picker
1. 布局响应规则(行列变化,聚合变化等);
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/20191118PGkkRz.jpg)
![](https://cdn.xyxsw.site/20191118PGkkRz.jpg)
卡片布局的一种聚合变化
1. 交互形态响应规则(导航、交互模式等);
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/20191118aoefIO.jpg)
![](https://cdn.xyxsw.site/20191118aoefIO.jpg)
表单型弹窗对应新页面
1. 不同场景的跨端策略例如Dashboard页面的跨端应保证用户在首屏快速获取关键信息下图的Bootstrap模板是一个错误示例移动端的布局方式浪费首屏空间降低用户获取关键信息的效率。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/20191118BrYZzg.jpg)
![](https://cdn.xyxsw.site/20191118BrYZzg.jpg)
Mobile first 不是唯一准则。进行具体场景的跨端设计时我们会从两端场景出发重新对比分析用户的需求差异明确体验的增强点与折损点。特别是电商中后台场景中有些业务中用户的主阵地并不是在移动端而是PC端比如用户运营策略的设置有些是两端分别承载不同的场景需求比如任务的处理。
@@ -217,7 +217,7 @@ Mobile first 不是唯一准则。进行具体场景的跨端设计时,我们
Serverless字面意思是无服务但并不代表再也不需要服务器了而是指开发者不需要过多的考虑服务器的问题计算资源作为服务出现而不是服务器的概念出现。 那么Serverlss是对全部底层资源和操作的封装让开发者专注于业务逻辑。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/gfhuewgfuiwe.png)
![](https://cdn.xyxsw.site/gfhuewgfuiwe.png)
Serverless = Faas (Function as a service) + Baas (Backend as a service)
@@ -254,7 +254,7 @@ Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前
- 无需在代码内考虑高并发高可靠性,可以专注于业务
- 通过云函数实例的高并发能力,实现业务高并发
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/fhuieufsiofhei.png)
![](https://cdn.xyxsw.site/fhuieufsiofhei.png)
#### 自动弹性压缩
@@ -281,7 +281,7 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
- 在Android平台将.uts文件编译为kotlin代码
- 在iOS平台将.uts文件编译为swift代码
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/uni-function-diagram.png)
![](https://cdn.xyxsw.site/uni-function-diagram.png)
1. 区分页面和组件的区别:页面和组件的生命周期
2. 云函数、云数据库
@@ -298,12 +298,12 @@ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编
1. Frameless桌面端不仅仅只有方框矩形而是想你所想。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/df77f01037fc4ceb8d4aa8f06168fc95~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif)
![](https://cdn.xyxsw.site/df77f01037fc4ceb8d4aa8f06168fc95~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif)
## 参考作业
尝试使用某种跨端框架和云函数实现一个查看课表应用形式不限。推荐使用hdu-lis包拿到数据。
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/Snipaste_2023-04-22_18-57-44.png)
![](https://cdn.xyxsw.site/Snipaste_2023-04-22_18-57-44.png)

View File

@@ -107,7 +107,7 @@ A理论上可以。但一般不会这么做除了一些实时的网络聊
登登登,后端登场!
![](https://pic-hdu-cs-wiki-1307923872.cos.ap-shanghai.myqcloud.com/boxcnorsQ6py7AU0LsCtn4f5LSd.png)
![](https://cdn.xyxsw.site/boxcnorsQ6py7AU0LsCtn4f5LSd.png)
解释一下: