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

1 界面与 *** 作

微信小程序开发工具的功能非常强大和便捷，其工具内部集成了代码编辑、开发调试及程序发布等功能，

2 编辑功能

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

但是要注意，处于编辑状态的代码只保存到工具内部，并没有写到硬盘上，

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

3 调试功能

调试工具分为七大功能模块：Console、Sources、Network、Storage、AppData、Wxml和Sensor，

4 项目功能

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

预览：指上传源码到微信服务器并成功后会生成一个二维码，开发者用最新版本的微信扫描二维码后，即可在手机上体验到最新的效果。

5 项目的目录与文件结构

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

微信小程序开发基础

全局配置

微信小程序的全局配置都要在app.JSON文件中进行。

这些配置可以决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

pages配置项

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

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

window配置项

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

tabBar配置项

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

networkTimeout配置项

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

debug配置项

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

页面配置

微信小程序除了app.json全局配置，还可以对每一个页面的.json进行单独配置。每个页面的配置比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无须写window这个键。

页面的生命周期

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

页面的数据处理

页面的数据处理分两个方面，首先是初始化数据，其次是对数据进行 *** 作。

数据的初始化

初始化数据将作为页面的第一次渲染。data会以JSON的形式由逻辑层传至视图层（也就是从.js文件传入到.wxml文件中，视图层可以通过WXML对数据进行绑定），所以其数据必须是可以转成JSON的格式的字符串、数字、布尔值、对象、数组。

页面的栈

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

注意：

· 不要尝试修改页面栈，会导致路由以及页面状态错误。

页面的路由

在微信小程序中，所有页面的路由全部由框架进行管理。

简单封装与调用

文件作用域

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

不会互相影响。

通过全局函数getApp（）可以获取全局的应用实例，如果需要全局的数据，

则可以在App（）中设置。

模块化

在日常编程过程中，一般都会把一些可以复用的代码提炼出来，放到一个公共文件中。在微信小程序中，可以将一些公共的代码抽离成为一个单独的JS文件，作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。

Flexbox布局

微信小程序通过Flexbox模型布局对组件进行排列。相比普通的布局方式，Flexbox更容易实现宽高适合屏幕的布局，使用起来更灵活，非常适合于微信小程序的布局要求。

1 基本要素

Flexbox布局的主要思想为通过设定容器（flex container即伸缩容器）与子元素（flex item即伸缩项目）的规则，使所有view组件在主轴（main axis）与侧轴（cross axis）上合理地自动分配

2 容器属性

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

3 子元素属性

子元素属性定义了伸缩项目的属性，

4 position属性

position属性用于指定一个元素在文档中的定位方式

5 边框、空隙与填充

边框很好理解，空隙指的是组件之间的距离，而填充指的是组件的内容到其边框的距离，

组件的开发应用

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

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

：1 视图容器组件

微信小程序具有丰富的用户界面组件，借助这些组件，开发者可以很方便地搭建用户界面。

2 基础内容组件

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

3 表单组件

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

4 多媒体组件

多媒体组件可以在页面中加载图片、音频、视频，并且能够控制显示方式和进程，使页面更加多元化，更具吸引力。

5 地图组件

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

6 导航组件

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

7 画布组件

画布组件，它可用于实现一些小程序控件没有提供的页面元素，

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