小程序入门

阳光穿透心脏的1/2处 2021-09-03 09:49 331阅读 0赞

> 微信小程序来啦！！！！！！！

## 一： 小程序的目录 ##

### 1.1 目录框架 ###

![499aa311b1016ca28fd6cd6a266588cc.png][]

### 1.2 app.js 文件解析 ###

每个小程序都需要在 app.js (名称不可改)中调用 App 方法来注册小程序实例，可以说该文件是小程序的入口文件。同时该文件也是用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。定义的函数及数据都是全局共享的，其他页面可以直接使用全局函数和数据。而生命周期函数可以针对不同场景可以调用不同的生命周期函数，如onlaunch(监听小程序初始化)，onshow(监听小程序显示)，onhide(监听小程序隐藏)等。这里需要注意的是App() 必须在 app.js 中注册且只有一个 App 实例，通过 getApp 方法可以获取到全局唯一的 App 实例，但不要在 App() 函数中调用 getApp() 方法，使用 this 就可以拿到 App 实例。

![a333c33a7c8c66c40a902e3be0c6aac4.png][]

### 1.3 app.json文件 ###

该文件是一个json对象，用于对小程序进行全局配置(该文件中不能有注释)。它可以配置页面路径，窗口表现，tabBar标签导航，网络超时，debug模式，其中pages对象用来配置小程序的里面所有的页面路径(该对象是个数组且第一个是小程序的首页)，页面路径不需要写任何后缀，系统会自动去加载同名的 .json、.js、.wxml、.wxss 文件。window对象用于设置小程序的窗口表现，包括状态栏、导航条、标题、窗口背景色等。tabBar对象用于设置标签导航，就是小程序窗口底部的菜单栏，可以实现快速切换页面。

![55ed75cf6d6b807ebe7fcef53e7cb79a.png][]

### 1.4 WXML文件 ###

WXML是一套类似HTML的标签语言，是用来构建页面结构的。标签虽然与HTML有点不同但用法基本一致，同时还具备了类似Vue框架的特性，支持列表循环、条件渲染、模板引用及数据绑定等功能。一段完整的WXML语句由一个开始标签和一个结束标签组成，在标签中可以是内容也可以是其它WXML标签。这里需要注意的是WXML要求标签必需是严格闭合的，没有闭合将会导致编译错误。

![5a0940445d54734b4b4d06262f7c3825.png][]

### 1.5 WXSS文件 ###

WXSS是一套样式语言，用于描述 WXML 的组件样式。通过定义WXSS来控制页面的呈现样式的，这个跟HTML中的CSS功能差不多(WXSS 具有 CSS 大部分特性并在CSS基础上进行了扩充以及修改)。app.wxss与页面中的.wxss文件不同之处在于它的作用域是全局，而页面中的.wxss文件只能作用于当前页面。

![3ada63c25c13edada9caa00bd0d4cdc6.png][]

## 二： 逻辑层 ##

### 2.1 注册小程序 ###

每个小程序都需要在 `app.js` 中调用 `App` 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

![46460ceb7944a8e6f7efb433ce9dd056.png][]

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 `getApp` 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 `App` 上的函数。

![57df0640e6c3a9ed27079a2d765c6ded.png][]

### 2.2 注册页面 ###

对于小程序中的每个页面，都需要在页面对应的 `js` 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

#### 2.2.1 使用 Page 构造器注册页面 ####

![73ad6889210f2cbc09af321e4b441c57.png][]

#### 2.2.2 在页面中使用 behaviors ####

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

#### 2.2.3 页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。 ####

### 2.3 页面路由 ###

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

### 2.4 生命周期 ###

![ad1ecc97af613b3a347cc20e9c219f53.png][]

## 三： 视图层 ##

### 3.1 WXML 配置 ###

#### 3.1.1 数据绑定 ####

![eb0ea271b20cfa9b417a73c4a1a8c56d.png][]

#### 3.1.2 列表渲染 ####

在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 `index`，数组当前项的变量名默认为 `item`

使用 `wx:for-item` 可以指定数组当前元素的变量名，

使用 `wx:for-index` 可以指定数组当前下标的变量名：

![6d866de50dff1ade12134d2ced93aee6.png][]

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态(如 [input][] 中的输入内容，[switch][] 的选中状态)，需要使用 `wx:key` 来指定列表中项目的唯一的标识符。

![a516cfa394ce018b43e5db7467dc0ead.png][]

#### 3.1.3 条件渲染 ####

![d1b608a6f1199bd95c46b18fcda98b55.png][]

#### 3.1.4 模板 ####

![479dcfb696273c9345bd113224a5da3a.png][]

#### 3.1.5 引用 ####

WXML 提供两种文件引用方式`import`和`include`

![e389a3bd303991a4ee04f59c75dbcd35.png][]

![cc20e6192520d7d31df9a41874b30166.png][]

### 3.2 WXSS 配置 ###

![4fa7f92371adb6fa3613b9679c5ecd18.png][]

## 四： 组件开发 ##

[499aa311b1016ca28fd6cd6a266588cc.png]: /images/20210813/abc05a1eda6b47f0bfe9626e0b267b0f.png
[a333c33a7c8c66c40a902e3be0c6aac4.png]: /images/20210813/8e2db0065a1a496f81dc76d3de348c5b.png
[55ed75cf6d6b807ebe7fcef53e7cb79a.png]: /images/20210813/592f3a11054f4e0b9710ab96e42b71be.png
[5a0940445d54734b4b4d06262f7c3825.png]: /images/20210813/dd0f775929914beb949f6540612d5849.png
[3ada63c25c13edada9caa00bd0d4cdc6.png]: /images/20210813/67e1bbfe83634405b6caeaf5da3fb513.png
[46460ceb7944a8e6f7efb433ce9dd056.png]: /images/20210813/058c7cc06dbd41c8b42056ed56f9f9dc.png
[57df0640e6c3a9ed27079a2d765c6ded.png]: /images/20210813/ef6ce80198634f2dac727c213a7e51e3.png
[73ad6889210f2cbc09af321e4b441c57.png]: /images/20210813/f6def6ccf16d443bb9942b5db1ca1569.png
[ad1ecc97af613b3a347cc20e9c219f53.png]: /images/20210813/9ebe04ca161b48bf9055300a5d06e330.png
[eb0ea271b20cfa9b417a73c4a1a8c56d.png]: /images/20210813/ed85a12cd9564766886d623e43cdf5ef.png
[6d866de50dff1ade12134d2ced93aee6.png]: /images/20210813/98e07516a1ff4fdb96014772119e15fb.png
[input]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[switch]: https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
[a516cfa394ce018b43e5db7467dc0ead.png]: /images/20210813/df77e11242024955a77513e1f88929a8.png
[d1b608a6f1199bd95c46b18fcda98b55.png]: /images/20210813/ce5c627f73c54229b47cfd84b251d883.png
[479dcfb696273c9345bd113224a5da3a.png]: /images/20210813/f72db092f30f4f798ad0fe3073a57cfc.png
[e389a3bd303991a4ee04f59c75dbcd35.png]: /images/20210813/62b4c090652645f0ac5e9f612d06ed93.png
[cc20e6192520d7d31df9a41874b30166.png]: /images/20210813/c3f54988070448aaa7c28eb990887e78.png
[4fa7f92371adb6fa3613b9679c5ecd18.png]: /images/20210813/90a2faa33109415b8360b6df5ad476c0.png