4. 我的第一个微信小程序-快创小站

本次课程分为两个部分。

主要讲解微信小程序的基础使用以及相关概念知识

一个基于小程序的应用，加深对微信小程序基础知识的了解。

微信小程序是腾讯于2025年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用，主要提供给企业、、媒体、其他组织或个人的者在微信平台上提供服务。

微信小程序和微信的原生功能应用在本质上是一样的——它们都是。就是一种通过5页面技术实现的，和的功能和界面几乎一样的手机形态。很多商家和企业为了节省技术人员和资金的投入，都会选择使用制作工具，免费快速制作自己的。

截止2025年3月，微信小程序用户规模突破4亿，小游戏类微信小程序占比达28%。

很多人做微信公众，而非，因为推广成本太高。这导致公众现在更像是媒体化的平台。微信的本意是要提供服务，所以推出了服务，但是服务也没达到预期。微信小程序的优势：

一是微信有海量用户，而且粘性很高，在微信里产品更容易触达用户；

二是推广或公众的成本太高。

三是适配成本低。

四是容易小规模试错，然后快速迭代。

五是跨平台。

事实上，应用并非微信首创，之前百度推出过应用，搜狐推出过快站，但腾讯将这件事情做成功的概率却是最大

1、流量成本的急剧攀升

2、互联网格局基本已定，用户主要需求场景已被巨头把持

3、面向所有产品对用户时间的竞争

查看小程序示例源码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-5-69)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(--70)(/206.)]

访问注册页面，耐心完成注册即可。

由于后期调用微信小程序的接口等功能，需要索取者的小程序中的，所以在注册成功后，可登录，然后获取。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(--70)(/54.)]

然后你的,悄悄的保存起来，不要给别人看到?。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-98-72)(/13.)]

严格来说，微信小程序支持所有的工具，但是从效率和便利性来说，推荐如下

下载地址

微信自己的下载地址

下面开始演示如何创建我的第一个微信小程序

下载好微信小程序者工具后，直接双击安装，一直点击下一步即可。安装好后，界面如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-772-73)(/58.)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(--74)(/49.)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-76-74)(/29.)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-0-76)(/29.)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-51-77)(/63.)]

工具介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(-2-78)(/85.)]

小程序框架的目标是通过尽可能简单、高效的方式让者可以在微信中具有原生体验的服务。

小程序框架提供了自己的视图层描述语言和，以及，并在视图层与逻辑层间提供了数据传输和事件系统，让者能够专注于数据与逻辑。

官网

结构传统微信小程序结构样式逻辑配置无

通过以上对比得出，传统是三层结构。而微信小程序是四层结构，多了一层配置.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(--79)(/54.)]

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的和页面自己的

注意：配置文件中不能出现注释

是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部等。普通快速启动项目里边的配置

字段的含义

字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。完整的配置信息请参考 .配置

这里的其实用来表示页面目录下的这类和小程序页面相关的配置。

者可以定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置中部分配置项的内容，页面中配置项会覆盖的中相同的配置项。

属性类型默认值描述#0导航栏背景颜色，如导航栏标题颜色，仅支持 / 导航栏标题文字内容#窗口的背景下拉的样式，仅支持 / 是否全局开启下拉刷新。详见 .50页面上拉触底事件触发时距页面底部距离，单位为。详见 .设置为则页面整体不能上下滚动；只在页面配置中有效，无法在中设置该项

（）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

8.1.1. 普通写法

8.1.2. 组件属性

8.1.3. 类型

不要直接写 =“”，其计算结果是一个字符串

8.2.1. 三元运算

8.2.2. 算数运算

8.2.3. 逻辑判断

8.2.4. 字符串运算

8.2.5. 注意

花括和引之间如果有空格，将最终被解析成为字符串

8.3.1. :

项的变量名默认为可以指定数组当前元素的变量名

下标变量名默认为可以指定数组当前下标的变量名

8.3.2. :

渲染一个包含多节点的结构块最终不会变成真正的元素

8.3.3. :

提高效率使用的

8.4.1. :

在框架中，使用来判断是否需要渲染该代码块：

8.4.2.

类似

频繁切换用

不常使用用

( )是一套样式语言，用于描述的组件样式。

与相比，扩展的特性有：

尺寸单位样式导入

（）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750。如在 6 上，屏幕宽度为375，共有750个物理像素，则750 = 375 = 750物理像素，1 = 0.5 = 1物理像素。

设备换算 (屏幕宽度/750)换算 (750/屏幕宽度)51 = 0.421 = 2.3461 = 0.51 = 26 1 = 0.5521 = 1.81

建议：微信小程序时设计师可以用 6 作为视觉稿的标准。

注意：在较小的屏幕上不可避免的会有一些毛刺，请在时尽量避免这种情况。

使用语句可以导入外联样式表，后跟需要导入的外联样式表的相对路径，用表示语句结束。

示例代码：

框架组件上支持使用、属性来控制组件的样式。

：静态的样式统一写到中。接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进中，以免影响渲染速度。

：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的，样式类名不需要带上，样式类名之间用空格分隔。

目前支持的选择器有：

选择器样例样例描述.选择所有拥有 =“” 的组件#选择拥有 =“” 的组件选择所有组件, 选择所有文档的组件和所有的组件::在组件后边插入内容::在组件前边插入内容

定义在 . 中的样式为全局样式，作用于每一个页面。在的文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 . 中相同的选择器。

小程序提供了常用的标签组件用于构建页面

组件

类似

属性名类型默认值说明-指定按下去的样式类。当时，没有点击态效果

10.1.1. 代码

显示普通的文本只能嵌套

属性名类型默认值说明文本是否可选是否解码

10.2.1. 代码

图片标签，组件默认宽度320、高度240

注意：该标签其实是中的图片标签和背景图片的结合！！！并且不支持以前的中的背景图片的写法！！！

属性名类型默认值说明图片资源地址，支持云文件（2.2.3起）‘’图片裁剪、缩放的模式-图片懒加载。只针对与-下的有效

有效值：

有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式值说明缩放不保持纵横比缩放图片，使图片的宽高完全拉伸至填满元素缩放保持纵横比缩放图片，使图片的长边能完全显示出来。缩放保持纵横比缩放图片，只保证图片的短边能完全显示出来。缩放宽度不变，高度自动变化，保持原图宽高比不变裁剪不缩放图片，只显示图片的顶部区域裁剪不缩放图片，只显示图片的底部区域裁剪不缩放图片，只显示图片的中间区域裁剪不缩放图片，只显示图片的左边区域裁剪不缩放图片，只显示图片的右边区域裁剪不缩放图片，只显示图片的左上边区域裁剪不缩放图片，只显示图片的右上边区域裁剪不缩放图片，只显示图片的左下边区域裁剪不缩放图片，只显示图片的右下边区域

微信内置有轮播图组件

默认宽度 100% 高度 150

属性名类型默认值说明-是否显示面板指示点-(0, 0, 0, .3)指示点颜色--#0当前选中的指示点颜色是否自动切换5000自动切换时间间隔是否采用衔接滑动

10.4.1.

滑块视图容器。

10.4.2. -

滑块

默认宽度和高度都是100%

导航组件类似超链接标签

属性名类型默认值说明在哪个目标上发生跳转，默认当前小程序，可选值/当前小程序内的跳转链接-跳转方式

- 有效值：

值说明保留当前页面，跳转到应用内的某个页面，但是不能跳到页面关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到页面。跳转到页面，并关闭其他所有非页面关闭所有页面，打开到应用内的某个页面关闭当前页面，返回上一页面或多级页面。可通过 () 获取当前的页面栈，决定需要返回几层退出小程序，=""时生效