WEB前端系列课程-微信小程序实战教程讲解-WEB哔哩

微信小程序，简称Mini ，英文名称为Mini。 如今，几乎每部智能手机都安装了微信应用程序，用户遍布全球。 微信小程序实现微信内部无需下载安装，用户扫一扫或搜索即可打开应用。

WEB前端系列课程-微信小程序实战教程讲解_WEB前端食疗工作坊实战项目讲解_WEB前端小程序开发必备知识点_WEB前端小程序开发实战教程_哔哩哔哩

1 界面与操作

微信小程序开发工具的功能非常强大和方便。 该工具集代码编辑、开发调试、程序发布等功能于一体。

2 编辑功能

编辑区分为两部分。 在右边的编辑区，可以对当前项目进行写入、增删文件、重命名等基本操作。 在左侧的模拟器区域，可以实时预览编辑后的情况。 编辑器还提供了比较完善的自动补全和自动保存功能。 编写代码后，该工具会自动帮助用户将当前代码保存为已编辑状态。 如果直接关闭工具或切换项目，当前代码的编辑状态不会丢失。

但需要注意的是，编辑状态下的代码只是保存在工具内部，并没有写入硬盘。

只有手动保存文件后，修改后的内容才会写入硬盘并触发实时预览。

3 调试功能

调试工具分为七个功能模块：,,,,, Wxml 和,

4 项目功能

编辑器项目选项卡主要用于显示和设置项目信息，包括图标、AppID、本地开发目录、最新更新时间、最新上传时间、代码包大小。 ·

预览：将源码上传至微信服务器并成功生成二维码后，开发者用最新版微信扫描二维码即可在手机端体验最新效果。

5 项目目录及文件结构

在创建小程序项目时，小程序开发工具默认会生成一些文件，这些文件就是小程序的基本结构。 另外，在开发过程中，可以根据产品需求定制小程序的目录和文件。

微信小程序开发基础

全局配置

微信小程序的全局配置必须在app.json文件中进行。

这些配置可以决定页面文件的路径、窗口性能、设置网络超时、设置多个标签页等。

页面配置项

pages 接受一个数组值，每一项都是一个字符串，用于指定小程序由哪些页面组成。

每一项代表对应页面的【路径+文件名】信息。

配置项

接受对象值，用于设置小程序的状态栏、导航栏、窗口页面等对象的基本样式属性。

配置项

接受一个数组值，用于设置标签底部标签栏的样式，以及标签切换时显示的对应页面。

配置项

对象值，用于设置各种网络请求对象的超时时间。 超时单位为毫秒，默认为60000。

调试配置项

debug 接受一个值，用于设置打开开发者工具的调试模式。 默认为假。 启用后，在开发者工具的控制台面板中，调试信息以info的形式给出。 这些信息包括页面注册、页面路由、数据更新和事件触发。 这可以帮助开发者快速定位一些常见的问题，但正式发布时应该关闭这个配置项。

页面配置

除了全局配置app.json，微信小程序还可以单独配置每个页面的.json。 每个页面的配置比app.json的全局配置要简单的多。 它只是设置app.json中配置项的内容，页面中的配置项会覆盖app.json中相同的配置项。 页面的.json只能设置相关的配置项来决定这个页面的窗口性能，所以不需要写这个key。

页面生命周期

每个微信小程序应用都有自己的生命周期，微信小程序应用的每个页面也有自己的生命周期。

页面数据处理

页面的数据处理分为两个方面，第一是对数据进行初始化，第二是对数据进行操作。

数据初始化

初始化数据将用作页面的第一次呈现。 数据会以JSON的形式从逻辑层传递到视图层（即从.js文件传递到.wxml文件，视图层可以通过WXML绑定数据），所以数据必须是转换成 JSON 格式的字符串、数字、布尔值、对象、数组。

一堆书页

微信小程序提供的框架以栈的形式维护所有页面。

注意：

· 不要试图修改页面堆栈，这会导致路由和页面状态错误。

页面路由

在微信小程序中，所有页面的路由都是由框架管理的。

简单的封装和调用

文件范围

在 .js 文件中声明的变量和函数仅在该文件中有效； 可以在不同的文件中声明同名的变量和函数，

不会互相影响。

全局应用实例可以通过全局函数()获取，如果需要全局数据，

然后就可以在App()中设置了。

模块化的

在日常的编程过程中，通常会提取一些可重用的代码，放到一个公共文件中。 在微信小程序中，可以将一些常用的代码提取到一个单独的JS文件中，作为一个模块。 模块只能通过.or暴露接口。

布局

微信小程序按模型布局排列组件。 相比普通的布局方式，更容易实现宽高适配屏幕的布局，使用起来也更灵活，非常适合微信小程序的布局需求。

1 基本要素

布局的主要思想是通过设置容器（flex即柔性容器）和子元素的规则，使所有视图组件合理自动分配在主轴（main axis）和交叉轴（cross axis）上（flex item就是灵活的项目）

2 容器属性

容器属性指的是包裹子元素的容器（flex）属性

3个子元素属性

子元素属性定义弹性项目的属性，

4个属性

属性用于指定元素在文档中的位置

5 边框、间隙和填充

边界很好理解。 gap是指组件之间的距离，是指组件内容到其边框的距离。

组件开发与应用

组件是视图层的基本元素，是构建页面的基础。

每个组件都有自定义属性，可以修改功能样式，但只支持以下七种数据类型

:1 查看容器组件

微信小程序拥有丰富的界面组件，借助这些组件，开发者可以轻松构建界面。

2 基本内容组件

基础内容组件用于在界面中显示图标、文字、滚动条信息等。

3 表单组件

表单组件用于构建与用户交互的表单。

4 多媒体组件

多媒体组件可以在页面中加载图片、音频、视频，并可以控制显示方式和过程，使页面更加多样化和美观。

5 地图组件

地图组件，微信小程序提供地图导航功能，使用地图组件和地图定位API可以方便快捷的实现地图定位和导航。

6 导航组件

导航组件，是微信小程序中用来控制所有页面顺序的组件。 可以帮助我们实现页面的路由和跳转，使用起来还是比较方便的。

7 画布组件

组件，可以用来实现一些小程序控件没有提供的页面元素，

开发者可以自由使用画布绘制出想要的页面效果。