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