Web前端技术分享

web前端初认识
公司项目所用到的前端技术
了解vue 和微信小程序框架

一丶Web前端初认识

1、前端是干什么的

几乎所有前端只干这么一件事：就是将数据展示给用户看，并处理用户对界面的操作。

2、Web前端开发技术核心三个要素：

HTML、CSS、JavaScript 前端技术最核心的是 HTML、CSS、和JavaScript这三种。但是这三者究竟是干嘛的？

1624332151(1).jpg

前端开发的过程就像是“建房子”

先把房子结构建好。（HTML）
建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。
最后呢，装修完了之后，我们需要一些电器，如电视、冰箱、洗衣机等（JavaScript）交互

3、前端和后端的区别

如果把前后端比喻成一辆汽车，后端就像汽车发动机、内部的零件，前端就是汽车的外表，车灯，仪表盘等等。

前后端职责

3、前端交互 AJAX

既然前端把数据渲染出来，展示给用户看，那么怎么从后端那里拿到数据呢？直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。

以前向服务器请求资源，必须对这个页面资源进行请求以获得这个信息资源（以这个页面资源为载体来携带信息资源），这必然会对页面进行刷新（因为是请求服务器后会同步返回一个页面进行刷新）。现在页面可以通过浏览器脚本编程语言调用一个隐藏请求装置（也就是XMLHttpRequest），由这个请求向服务器请求资源，然后返回一个资源载体（可能是一个页面，也可能是一个xml或json文段），然后由编程语言去处理这个信息。与此同时，页面是不会发生刷新行为的（也就是没有向服务器请求这个页面资源）。这就是异步原理了。“AJA”就是异步JavaScript的缩写，其基础就是浏览器脚本编程语言JavaScript和XMLHttpRequest对象，X就是作为信息载体的XML，不过现在多数用JSON代替。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。（虽然提供异步通讯功能的组件默认情况下都是异步的，但它们也提供了同步选项，如果你好奇把那个选项改为false的话，你的页面就会死在那里）xml只是一种数据格式，在这件事里并不重要，我们在更新一行字的时候理论上说不需要这个格式，但如果我们更新很多内容，那么格式化的数据可以使我们有条理地去实现更新。现在大部分人其实是用JSON这种格式来代替XML的，因为前者更加简洁，据说目前的解析速度也更快。多快好省，能省则省啊。总结：只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程，那么我们用的方法就可算是AJAX。

4、Web前端能做什么？

简单点说web前端开发就是做软件开发、后台管理系统、微信小程序、网页设计、网站建设、APP开发、小游戏开发这块的。

二、公司项目所用到的前端技术

1、官网

关键技术

vue、axios、element-ui、vue-lazyload

公司官网，使用第三方引入方式，vue，element-ui，vue-lazyload 懒加载。

2、智慧公园管理平台

关键技术

基于vue-element-admin框架，使用ES5、ES6、vue全家桶（vue、vuex、vue-router、vue-cli、axios）、element-ui，Echarts可视化图表

vue-element-admin框架

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

element-ui库

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是 Mint UI 。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。

echarts

echarts是百度团队开发的数据可视化库，可以流畅的运行在 PC 和移动设备上，它提供了一些直观，易用的交互方式以便于对展示数据进行挖掘.提取.修正或整合，拥有互动图形用户界面的深度数据可视化工具

3、大屏可视化

关键技术

vue全家桶、element-ui、echarts

4、全景图开发

关键技术

krpano框架

krpano为付费框架，暂使用破解版本，可满足需求，项目经理在现场拍摄 2:1 的全景图片，使用 krpano批处理文件打开，生成产物，上传到HTTP服务器进行解析，后通过链接访问即可，若页面中需要嵌入交互界面，可采用iframe嵌入H5的方式进行展示，更多API可查阅krpnao官方文档

5、导览开发

关键技术
- 礼嘉智慧公园、阳泉北山公园
```
vue全家桶、安卓webview嵌入vue
```
- 唐山北新道、站南、站西公园
```
uniapp开发，支持vue语法，
```
uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

贝塔智道小程序

关键技术

微信小程序框架

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

三、了解Vue 和微信小程序框架

1、Vue框架

Vue框架诞生于2014年，其作者为中国人————尤雨溪，也是比较容易入手的框架之一。Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

1. Vue.js 是什么？

实际上Vue框架就是一个MVVM框架，它是渐进式的框架。他是初创公司的首选框架。他是轻量级的，有很多根据vue拓展的独立的库\功能，都是根据vue辅助开发的。 Vue核心技术示例小视频（5分钟）

2、vue的MVVM设计模式是什么？

左边View代表的是视图，中间是ViewModel代表视图模型，右边是model代表模型。 MVVM的核心指的是我们只需要关注 视图 和 模型，中间的 ViewModel是Vue的核心，他的核心是DOM的监听和数据的绑定以及一些指令等等，所以我们只需要关心视图的变化和数据的变化即可。

1624345228(1).jpg

MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。

Vue的生命周期

每个Vue实例或组件从创建到显示再到废弃的过程就是Vue的生命周期。很多时候我们希望能在这个过程种执行一些操作，于是就有了生命周期钩子函数。

生命周期钩子函数允许我们在实例不同阶段执行各种操作，便于我们更好地控制和使用实例。 生命周期示例图传送门

生命周期讲解

2、微信小程序框架

微信小程序发展由来

我们先来简单讲一下微信小程序的发展历史。张小龙于2017年01月09日在微信公开课上宣布其正式上线。小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序上线以来，一直被称为便携式的 APP，关于两者之间的区别，无外乎是小程序相对轻便、开发成本低、开发周期短，收效快。

宿主环境

微信小程序的宿主环境为微信客户端，它是依赖于微信客户端上运行的，并且跟小程序基础库版本有重大关联关系

执行环境

小程序的主要开发语言是 Javascript，它与传统网页开发具有相似性但还是有一定区别：

网页开发，渲染线程和脚本是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应的原因，本质就是我们常说的JS是单线程的。
小程序，视图层和逻辑层是分开的，双线程同时运行，视图层的界面使用 webView 进行渲染，逻辑层运行在JScore种。
网页开发，主要面对各厂商的浏览器，在移动端还需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView。
小程序，主要面对两大操作系统IOS和Android的微信客户端，还有开发工具、PC端（window）、Mac。开发时候需要注意的是微信客户端的版本号和小程序API 支持的基础库版本号。微信小程序运行在多种平台上：iOS（iPhone/iPad）微信客户端、Android 微信客户端、PC 微信客户端、Mac 微信客户端和用于调试的微信开发者工具

各平台脚本执行环境以及用于渲染非原生组件的环境是各不相同的，具体区别如下：

小程序整体架构

通过上面的内容，大致了解小程序诞生的情况和所处的环境了，下面我们来聊聊小程序的整体设计架构情况。

整个小程序系统架构分成两个部分：视图层（WebView） 和 逻辑层（App Service），这两个部分分别由两个独立线程管理。

视图层：也称为渲染层，渲染层用来渲染页面结构，主要 WebView 进行渲染，一个小程序可以存在多个界面，所以渲染层可能存在多个 WebView 线程。
逻辑层：逻辑层采用 JScore 线程运行 JS 脚本。逻辑层主要用来逻辑处理、数据请求、接口调用等。

视图层和逻辑层之间的沟通则需要借助 系统层（WeixinJsBridage） 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务逻辑处理。

页面渲染大致过程为：我们把项目进行编译会把WXML转化成对应JS对象（Virtual DOM），在逻辑层发生数据变化的时候，我们会通过setData() 方法把数据从逻辑层传到视图层，视图层在接收到数据后，会在内部进行差异对比，把差异应用在原来的 DOM 树上，再正确的渲染出UI界面，完成页面的渲染过程。

微信小程序架构图

上面的分析提到了一个系统层（WeixinJsBridage），一般简称为JSBridge，它起到了一个中间桥梁的作用，非常重要。它不仅让视图层与逻辑层两个单独线程进行通信，而且也架起上层开发与系统底层功能（Naticve）的桥梁，始得小程序可以通过调用API使用原生功能，且部分组件用原生组件实现，从而有良好的体验。

逻辑层还有一个重要的操作。发起网络请求，它也是由系统层转发的。

运行机制

小程序启动运行两种情况：

冷启动（重新开始）：用户首次打开或者小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即为冷启动。
热启动：用户已经打开过小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需要将后台的小程序切换到前台，这个过程就是热启动。

需要注意的是：
1. 小程序没有重启的概念。
2. 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后会被微信主动销毁。
3. 短时间内收到系统两次以上内存警告，也会对小程序进行销毁，这也就是为什么一旦页面内容溢出，页面会崩溃的本质原因了。

更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的包，并同时会先用客户端本地的旧包进行启动，等下次冷启动才会应用上。如果需要马上应用最新版本，可以用wx.getUpdateManagerAPI进行处理

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

数据通信机制

前面讲到小程序是基于双线程的，那就意味着任何在视图层和逻辑层之间的数据传递都是线程间的通信，也就是会有一定的延时。这不像传统 Web 一样，当页面要更新时调用API就能同步渲染出来，在小程序架构里面，这一切成了异步操作。

异步会使得各部分的运行时序变得复杂一些。比如在渲染首屏的时候，逻辑层与渲染层会同时开始初始化工作，但是渲染层需要有逻辑层的数据才能把界面渲染出来，如果渲染层初始化工作较快完成，就要等逻辑层的指令才能进行下一步工作。因此逻辑层与渲染层需要有一定的机制保证时序正确，在每个小程序页面的生命周期中，存在着若干次页面数据通信。

知道视图层与逻辑层的具体通信过程后，我们也稍微了解一下视图层和逻辑层的数据传输大致是如何的，我们知道这两者通信是借助了系统层的作用，而实际上是通过两边提供的evaluateJavaScript所实现的。即用户传输的数据，需要将其转为为字符串形式传递，同时把转换后的数据内容拼接成一份JS脚本，再通过执行JS脚本的形式传递到两边独立环境。

关于evaluateJavascript：Native 调用 JS，一般就是直接 JS 代码字符串，有点类似我们调用 JS 中的 eval 去执行一串代码。它一般有 loadUrl、evaluateJavascript 等几种方法。这里就不做过多的介绍了，你只要记住，它是用来调用执行 JS 字符串，是一种 Native 用来识别 JS 代码的方式的就行啦。

登录机制

图中过程主要是为了获得微信用户的唯一 openid 与 session_key, 之后开发者服务器可以根据用户标识来生成自定义登录状态，用于后续业务逻辑种前后端交互时识别用户身份。

调用wx.login() 获取临时登录凭证code,并回传到开发者服务器。
调用auth.code2Session接口，换取用户唯一标识openid、用户在微信开放平台账号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台账号)和会话密钥session_key。

UnionID机制说明

UnionID是微信新增的一个性质，获取方式和openId差不多，作用也差不多，都是指用户唯一标识，但它的范围广一点。

官方解释：如果开发者拥有多个移动应用、网站应用、和公众账号（包括小程序），可以通过UnionID来区分用户的唯一性，因为只要是同一个微信开放平台账号下的移动应用，网站应用和公众账号（包括小程序），用户的UnionID是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

就是把小程序绑定微信开放平台帐号后，可与该帐号下绑定的的其他移动应用、网站应用及公众号打通。例如：同个用户在PC端的扫描登录、微信公众号开发的页面授权登录、微信小程序授权登录，这些场景中都能识别出是同一个用户，获取到的 UnionID 相同的。传送门

开发一个微信小程序的流程

小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序

注册微信小程序账号 进入：微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。
下载开发工具 有了账号后，我们就可以使用这个账号进行开发了，开发用的IDE是腾讯出品的微信开发者工具，进入：小程序开发工具，下载对应的版本安装即可。
开始进入小程序前端开发 打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。