李宥的博客

需求：通过前面的学习，我们知道微信小程序的底部标签栏可以在app.json全局配置文件中通过添加tabBar配置项的属性来实现。但是在实际开发中，底部标签栏会有不同的需求，例如需要设计更美观的样式或者需要添加更多的功能，此时就需要自定义标签栏。自定义组件在实际开发中，可能会遇到多个页面中有相同功能区域的情况。例如，多个页面中都有搜索栏。如果为每个页面复制同一份代码，会造成代码冗余，而且不利于后期代码维护。此时，开发者可以将页面内的重复部分封装成自定义组件，以便于在不同的页面中重复使用，从而有助于代码维护。

③配置导航栏。在app.json文件中配置导航栏样式。④创建其他文件。创建app.wxss文件，该文件中保存了本项目所用到的公共样式。创建images文件夹，该文件夹保存了该项目所用的素材。创建utils/shopcartAnimate.js文件，该文件保存了实现购物车中动画效果的代码。创建utils/decodeCookie.js文件，该文件保存了用于解析服务器返回的Cookie，将Cookie字符串转换成对象的代码。⑤配置标签栏。在app.json文件中添加tabBar配置项的属

腾讯地图SDK根据不同的开发场景提供了多种版本，针对微信小程序开发，应使用“微信小程序JavaScript SDK”，它可以在微信小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务。腾讯地图SDK是一套为开发者提供多种地理位置服务的工具，可以使开发者在自己的应用中加入地图相关的功能，轻松访问腾讯地图服务和数据，更好地实现微信小程序的地图功能。**实现用户登录：**在app.js文件的App({})中编写代码，实现微信小程序启动时自动执行登录操作。

scroll-view组件scroll-view组件的常用属性如下代码演示：在pages/index/index.js文件中添加scroll()事件处理函数并输出e.detail的值。通过e.detail可以获取滚动时的位置信息。scrollLeft：横向滚动条左侧到视图左边的距离。scrollTop：纵向滚动条上端到视图顶部的距离。scrollHeight：纵向滚动条在y轴上最大滚动距离。scrollWidth：横向滚动条在x轴上最大的滚动距离。deltaX：横向滚动条的滚

需求：本案例将实现“比较数字大小”微信小程序，它的功能是当用户输入两个数字后，点击“比较”按钮可以自动比较这两个数字的大小。两个输入框，可以输入数字，输入后点击“比较”按钮，按钮下方会显示比较结果。比较结果有3种情况**页面初始数据：**页面初始数据是指页面第一次渲染时所用到的数据。**页面生命周期回调函数：**在微信小程序中，页面的生命周期是指每个页面“加载→渲染→销毁”的过程，每个页面都有生命周期。如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。数据绑定概念

form组件内部可以包含若干个供用户输入或选择的表单组件，允许提交的表单组件为switch、input、checkbox、slider、radio和picker组件。如果使用本地路径，可以在项目中创建一个目录，例如images目录，并在该目录中放入图片，例如test.jpg，通过本地路径/images/test.jpg即可引用图片。需求：当一对新人即将举办婚礼时，通常会向他们的亲朋好友发送婚礼邀请函。form组件表示表单容器，没有任何样式，需要配合其他表单组件一起使用，用于提交用户输入的信息和选择的选项。

*模拟器：**模拟器可以模拟微信小程序在微信客户端的运行效果。**性能质量：**可查看项目的线上数据和本地情况，供开发者有针对性地进行优化。**调试器：**调试器类似于Chrome浏览器中的微信开发者工具。**菜单栏：**通过菜单栏可以访问微信开发者工具的大部分功能。**项目配置：**即可查看项目的域名信息和高级配置。**基本信息：**即可对项目的基本信息进行设置。**工具栏：**提供了一些常用功能的快捷按钮。**本地设置：**即可对项目进行本地设置。**编辑器：**编辑器分为左右两栏。

- Json-server 是一个`零代码快速搭建本地 RESTful API 的工具`。它使用 `JSON 文件作为数据源`，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。

- vuex 是一个 vue 的 `状态管理工具`，状态就是数据。- 大白话：vuex 是一个插件，可以帮我们`管理 vue 通用的数据 (多组件共享的数据)` 例如：购物车数据 个人信息数据

- Vue中路由：`路径` 和 `组件` 的 映射 关系

插槽- 作用：让组件内部的一些 结构 支持 自定义

- **作用：**利用 ref 和 $refs 可以用于 `获取 dom 元素`, 或 `组件实例`- **特点：**查找范围 → `当前组件内 (更精确稳定)`，用document.querySelect('.box') 获取的是整个页面中的盒子

- 组件通信, 就是指 `组件与组件` 之间的`数据传递`。 - 组件的数据是独立的，无法直接访问其他组件的数据。 - 想使用其他组件的数据，就需要组件通信

- 基本介绍： - Vue CLI 是Vue官方提供的一个`全局命令工具` - 可以帮助我们`快速创建`一个开发Vue项目的`标准化基础架子`。【集成了webpack配置】- 好处： - 开箱即用，零配置 - 内置babel等工具 - 标准化的webpack配置

- Vue生命周期：一个Vue实例从 `创建` 到 `销毁` 的整个过程。- 生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 - 创建阶段：创建响应式数据 - 挂载阶段：渲染模板 - 更新阶段：修改数据，更新视图 - 销毁阶段：销毁Vue实例

- 基于**现有的数据**，计算出来的**新属性**。 **依赖**的数据变化，**自动**重新计算。- 计算属性会对计算出来的**结果缓存**，再次使用直接读取缓存，只有**依赖项变化**了才会自动**重新计算**，并**再次缓存**

- **概念：**指令（Directives）是 Vue 提供的带有 **v- 前缀** 的 特殊 标签**属性**。Vue 会根据不同的【指令】，针对标签实现不同的【功能】。- **为啥要学：**提高程序员操作 DOM 的效率。- **vue指令分类：** - 内容渲染指令（v-html、v-text） - 条件渲染指令（v-show、v-if、v-else、v-else-if） - 事件绑定指令（v-on） - 属性绑定指令 （v-bind） - 列表渲染指令（v-for）

- **概念：**Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的 **渐进式** **框架**- **官网：**[https://v2.cn.vuejs.org/](https://v2.cn.vuejs.org/)

- 静态模块打包工具- 官网：[https://webpack.docschina.org/](https://webpack.docschina.org/)- 官网文档：https://webpack.docschina.org/concepts/

Yarn是一个用于管理JavaScript包依赖关系的工具。它是由Facebook开发并开源的，旨在解决npm（Node Package Manager）的一些性能和安全性问题。

- PM2 是一个`守护进程管理器`，它将帮助您管理和保持您的应用程序在线。- PM2 入门很简单，它以简单直观的 CLI 形式提供，可通过 NPM 安装。- 官网地址：[https://pm2.keymetrics.io/](https://pm2.keymetrics.io/)

- `身份认证`（Authentication）又称“身份验证”、“鉴权”，是指`通过一定的手段，完成对用户身份的确认`。- 在 Web 开发中，也涉及到用户身份的认证，例如：各大网站的`手机验证码登录、邮箱密码登录、二维码登录`等。

- 安装操作 MySQL 数据库的第三方模块（mysql）- 通过 mysql 模块连接到 MySQL 数据库- 通过 mysql 模块执行 SQL 语句

- 官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 - 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 - **Express 的本质**：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

- Node.js 中的`第三方模块`又叫做`包`。就像`电脑`和`计算机`指的是相同的东西，`第三方模块`和`包`指的是同一个概念，只不过`叫法不同`。

- `模块化`是指解决一个`复杂问题`时，自顶向下逐层`把系统划分成若干模块`的过程。对于整个系统来说，`模块是可组合、分解和更换的单元`。

- `fs 模块`是 Node.js 官方提供的、用来`操作文件`的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。

- `Node.js` 是一个基于 Chrome V8 引擎的 `JavaScript 运行环境`。

- `同源`指的是两个 URL 的协议、域名、端口一致，`反之`，则是`跨域`。- 出现跨域的根本原因：`浏览器的同源策略`不允许非同源的 URL 之间进行资源的交互。- 浏览器对跨域请求的拦截：浏览器`允许发起跨域请求`，但是，跨域请求回来的数据，`会被浏览器拦截`，无法被页面获取到！

- `XMLHttpRequest`（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以`请求服务器上的数据资源`。- `jQuery` 中的 `Ajax` 函数，就是基于 `xhr` 对象封装出来的。

- 表单在网页中主要负责数据采集功能。HTML中的``标签，就是用于采集用户输入的信息的，并通过``标签的提交操作，把采集到的信息提交到服务器端进行处理。- 表单由三个基本部分组成：表单标签（form），表单域（input），表单按钮（button）。

- `Ajax` 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。- `Ajax`：在网页中利用 `XMLHttpRequest` 对象和服务器进行数据交互的方式。- `Ajax` 技术可以在`不刷新整个页面`的情况下，通过异步请求来获取服务器数据并`更新部分页面内容`。这种异步请求将 XML 或 JSON 数据格式发送到服务器，然后在页面上使用 JavaScript 更新数据，并进行相应 UI 的更新。

1、深浅拷贝，2、异常处理，3、处理this，4、性能优化

**面向对象**：把事务分解成为一个个对象，然后由对象之间分工与合作。

**构造函数 ：**是一种特殊的函数，主要用来`快速初始化`类似的`对象`

**函数作用域：**在函数内部声明的变量所在作用域。

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

- ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

jQuery 拷贝对象，多库共存，jQuery 插件

事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等