创建您的第一个小程序
前言：读研究生期间每天靠国家低保+课题组补贴生活有点困难，所以想学着开发一个小程序，赚点外快。学习资料主要参考的是黑马程序员小程序课程的文档。如果你懂html、css、js、vue的话，你会学得更快，但如果你不会，也没关系。在学习过程中我遇到了很多问题和陷阱。我将在文章中分享它们。让我们下次开始我们的小程序开发之旅吧！
在第一天，您将学习以下内容：
① 能够了解如何创建小程序项目
⚫ 如何使用和获取微信开发者工具
② 能够了解小程序项目的基本结构
⚫ app.js、app.json、app.wxss、文件夹
③ 能够知道小程序页面由几部分组成
⚫ wxml、wxss、json、js
④ 能够了解小程序中常用组件的使用
⚫ 视图、文本、
⑤ 懂得如何协同开发和发布小程序
⚫ 会员管理、发布小程序、查看运营数据
1.小程序介绍
小程序是一种无需下载安装的应用程序。它实现了即时搜索和使用应用程序的概念。小程序具有以下特点：
无需下载安装：用户在微信、支付宝、百度等平台搜索或扫描小程序码即可打开使用，无需在手机上安装额外的应用程序。触手可及：小程序能够快速触达用户，满足用户即时需求。用完即走：使用小程序后，用户无需担心占用手机存储空间，并可以随时关闭。功能丰富：小程序可提供消息通知、离线扫码、分享转发等功能，满足不同场景的需求。开发成本更低：与传统APP相比，小程序的开发周期更短，成本更低。跨平台兼容性：小程序可以运行在微信、支付宝、百度等多个平台，覆盖广泛的用户群体。
2.第一个小程序：注册一个小程序开发账号
温馨提示：一张身份证最多只能注册5个小程序账号，请谨慎使用身份证。注册满后会提示：该身份证已注册5次。请使用其他身份证件完成用户信息注册。
个人小程序不支持微信认证、微信支付及高级接口能力
小程序的（ID）是小程序在特定平台上的唯一标识符。每个小程序在注册时都会被分配一个，这是小程序开发者开发、调试和发布的关键凭证之一。以下是小程序的一些详细信息：
获取： 使用： 功能： 保密性：
小程序非常重要，会在以后的开发中用到。
3. 第一个小程序：安装开发者工具 3.1 了解微信开发者工具
3.2 下载并安装
3.3 扫码登录
4.创建小程序项目
5、小程序代码的组成
5.配置文件
page存储当前小程序所有页面的路径。您不需要主动添加它们。您可以直接在目录中右键单击创建新页面。页面会自动注册并添加页面的路径。
5. 模板
1.什么是WXML
WXML()是小程序框架设计的一套标签语言。用于构建小程序页面的结构。其功能类似于Web开发中的HTML。
2.WXML和HTML的区别
① 标签名称不同
⚫ HTML（div、span、img、a）
⚫ WXML（视图、文本、、）
② 属性节点不同
③ 提供类似Vue的模板语法
⚫ 数据绑定
⚫ 列表渲染
⚫ 条件渲染
5. 风格
WXSS（）是一组用于描述WXML组件样式的样式语言，类似于Web开发中的CSS。
WXSS 和 CSS 的区别
① 新增rpx大小单位
⚫ 需要手动转换CSS中的像素单位，如rem
⚫ WXSS底层支持新的尺寸单位rpx，小程序会在不同尺寸的屏幕上自动转换。
② 提供全局样式和局部样式
⚫ 项目根目录下的app.wxss将应用于所有小程序页面
⚫ 本地页面的.wxss样式仅在当前页面生效
③ WXSS仅支持部分CSS选择器
⚫ .和#id
⚫
⚫ 联合选择器、后代选择器
⚫ :: 和 :: 以及其他伪类选择器
5.4JS逻辑交互
一个项目仅仅提供界面展示是不够的。在小程序中，我们通过.js文件来处理用户操作。例如：响应用户点击、获取用户位置等。
小程序中的JS文件分为三大类，分别是：
① 应用程序.js
⚫ 是整个小程序项目的入口文件。整个小程序是通过调用App()函数来启动的。
② 页面的.js文件
⚫ 是页面的入口文件。通过调用 Page() 函数来创建并运行页面。
③ 普通.js文件
⚫ 是一个普通的功能模块文件，用于封装公共功能或属性以供页面使用。
6. 主机环境介绍
7. 组件
1.小程序中组件的分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速构建出漂亮的页面结构。官方将小程序的组件分为9类，分别是：
① 查看容器
② 基本内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ 地图地图组件
⑦ 画布组件
⑧ 能力开放
⑨ 无障碍设施
2.常用视图容器组件
①视图
⚫ 普通视图区域
⚫ 类似于HTML中的div，是块级元素
⚫ 常用于实现页面布局效果
②-视图
⚫ 可滚动视图区域
⚫ 常用于实现滚动列表效果
③ 与项
⚫ 轮播容器组件和轮播项目组件
右下角第4段代码解释：
。
这 。这里表示选择器是类选择器。是类名，这意味着该样式规则将应用于具有该类的所有 HTML 元素。
：弯曲；：
当一个元素设置为：flex;时，其直接子元素将按照flex盒模型（）的布局进行排列。是一种一维布局方法，用于在容器内分配和对齐子元素。
-：-
- 属性用于设置Flex容器中的Flex项目在主轴上的对齐方式。
- 表示弹性项目将均匀分布在主轴上，每个项目两侧的空间相等
8. 协同工作
9. 在线发布
提示：投稿审核阶段有一些需要注意的事项。一是小程序最大代码限制为2M。如果有分包的话，可以有更大的容量。如果需要与后端交互，建议将相关图片全部放到服务器上。另一方面，在注册小程序之前，需要检查小程序的标识和名称是否已被注册，是否被他人注册为商标。
如何获取代码、课件和视频资源：