基本使用
相关文档
微信开发者官方地址：
小程序注册：
小程序注册使用邮箱作为注册，一个微信号可对应多个小程序。
https://mp.weixin.qq.com/wxopen/waregister?action=step1
小程序文档地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/
基本项目结构文件说明：
组件（标签）：
https://developers.weixin.qq.com/miniprogram/dev/component/
开发工具下载：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
使用
注册小程序后，在开发与服务-开发管理中，可以看到AppID，这是小程序唯一的ID，很多地方会用到。
安装开发工具后，打开工具可以看到：
注意，尽量不使用游客模式，不然会发现AppID无法修改，固定为touristappid。
扫描登录后，可以看到对应微信下面的小程序，并选择对应的AppID，demo使用JS基本版即可。
创建完成后，可以看到基本的项目目录，参考上面的微信的基本项目结构文件说明链接：
基本认知
小程序使用的标签是自己的，与HTML标签无关，开发中不使用HTML标签。样式设计与CSS基本一致。控制使用JS，这与传统的网页开发一致。
小程序增加的新的尺寸单位rpx（responsive pixel 响应式像素），可以根据屏幕宽度进行自适应，基本开发中都使用该单位表示组件的高宽和其他相关尺寸大小。
小程序为了方便一些功能开发，自带了一些封装好的方法（微信文档中称为做API），比如网络请求，录音等，可以在官网文档中查询。
小程序的设计采取了双线程模型， AppService（处理业务逻辑） 和 WebView （处理显示渲染），此外，在 WebView 渲染之外新增了一个渲染引擎 Skyline。在我们查看组件的时候，会发现微信说明文档中会说明该组件是否支持Skyline / WebView。
小程序原生支持对直播推拉流的处理，使用live-pusher和live-player可以进行rtmp等流的处理。
小程序支持生成原生应用android / ios。
在高级用法中，我们可以实现自定义组件，开发插件，与硬件通信，3D（xr-frame）等功能。
语法
说明
微信小程序的语句，基本由WXML，WXSS，WXS，JS构成。
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。页面的结构使用wxml来编写，其对应的是传统网页开发的html。语法类似，但是在标签的功能上不相同，传统网页的html标签在wxml中也是不支持的，wxml有自己的一些功能标签（组件），详细见官方文档。
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 传统网页开发的CSS 大部分特性。WXSS 对 CSS 进行了扩充以及修改，增加了尺寸单位，样式导入等，详细见官方文档。
WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。从语法上看， WXS 类似于有少量限制的 JavaScript 。
WXML和HTML标签对应关系参考：
组件
view
视图容器，可存放任意组件，view 容器内的多个组件的显示顺序遵循文档流，即从上到下进行布局，是否换行，需要看其子组件属于什么元素，如text组件则不会自动换行，button组件会自动换行。
view跟传统div标签一样，可以设置为Flex布局。
经验
在小程序中，本地图片名称不要用中文，在小程序中正常，但是生成原生应用（安卓），就不会正常显示。
在使用wx:for时flex布局不生效，设置方向无用，将wx:for写在内层即可。
参考：https://blog.csdn.net/qwe122343/article/details/117435582
HTML基本语法
元素类型
任意一个组件，会被设计属于什么类型的元素，决定其功能和定位：
块级元素的特点包括：
占据整行空间，即宽度会自动扩展以填满其父容器。
在垂直方向上，一个块级元素会紧跟在前一个块级元素下面。
可以设置宽度、高度、内边距（padding）、外边距（margin）等属性。
可以包含其他块级元素或内联元素（inline elements）。
内联块级元素（Inline-Block Elements）：
内联块级元素兼具内联元素和块级元素的特点，它们可以设置宽度和高度，同时也可以与其他元素在同一行显示。
在CSS中，可以通过设置 display: inline-block; 来将元素设置为内联块级元素。
微信小程序中的某些组件可能具有内联块级的行为，具体取决于它们的默认样式和布局属性。
表格元素（Table Elements）：
表格元素用于创建表格结构，包括 <table>, <tr>, <td> 等。
在微信小程序中，可以使用 wx:for 控制属性结合 view 组件来模拟表格布局。
替换元素（Replaced Elements）：
替换元素通常是指那些内容不受CSS样式影响的元素，例如 <img> 元素。
在微信小程序中，可以使用 image 组件来显示图片，它就是一种替换元素。
格式化元素（Formatting Elements）：
格式化元素用于对文本进行格式化，例如 <b>, <i>, <strong>, <em> 等。
在微信小程序中，可以使用 text 组件的 selectable, space, decode 等属性来实现文本格式化。
匿名行内盒子（Anonymous Inline Boxes）：
这是一种特殊的行内元素，它不与特定的HTML元素关联，通常是由文本内容直接生成的
改变定位
另外，可以通过一些配置改变元素的本身或其子组件的定位方式：
定位（Positioning）：如果使用了绝对定位（position: absolute;）或固定定位（position: fixed;），则组件的显示顺序可能会受到 z-index 属性的影响。具有更高 z-index 值的组件会显示在具有更低 z-index 值的组件之上。
以下是一些影响组件排序显示的因素：
源代码顺序：在没有使用定位覆盖的情况下，组件的显示顺序通常与它们在 WXML 中的定义顺序一致。
CSS 属性：CSS 中的 display、float、flex、grid 等属性可以改变组件的布局和显示顺序。
Flexbox 布局：如果 view 容器使用了 Flexbox 布局（通过设置 display: flex;），则子组件的排序可以由 order 属性控制。order 值越小的组件越排在前面。
z-index：当使用定位属性时，z-index 可以用来控制组件的堆叠顺序。z-index 值越大，组件越在顶层。
定位方式
静态定位（Static Positioning）:
功能：静态定位是默认的定位方式，不使用任何定位属性（如 position: static;），元素按照正常文档流进行布局。
特点：静态定位的元素不会受到 top、right、bottom、left 和 z-index 属性的影响。
相对定位（Relative Positioning）:
功能：相对定位元素相对于其正常位置进行移动（使用 position: relative;）。
特点：元素仍然占据在文档流中的原始空间，可以通过 top、right、bottom、left 属性来设置偏移量。
如果绝对定位的元素的所有祖先元素都没有设置定位（即它们的 position 属性都不是 relative, absolute, fixed, 或 sticky），那么这个绝对定位的元素会相对于初始包含块（initial containing block）进行定位。
初始包含块通常等同于视口（viewport），即浏览器窗口或者 <html> 元素（在规范中，初始包含块被定义为视口，但在实际浏览器实现中，它通常是 <html> 元素）。因此，如果没有已定位的祖先元素，绝对定位的元素会相对于浏览器窗口进行定位，就像固定定位（fixed）的元素一样，但是它不会随着页面的滚动而移动。
绝对定位（Absolute Positioning）:
功能：绝对定位元素相对于最近的已定位祖先元素进行定位（使用 position: absolute;）。
特点：元素脱离正常文档流，不占据空间，可以通过 top、right、bottom、left 属性来定位，如果没有已定位的祖先元素，则相对于 <html> 元素定位。
固定定位（Fixed Positioning）:
功能：固定定位元素相对于浏览器窗口进行定位（使用 position: fixed;）。
特点：即使页面滚动，元素也会保持在相同的位置，同样是通过 top、right、bottom、left 属性来定位。
粘性定位（Sticky Positioning）:
功能：粘性定位是相对定位和固定定位的混合体（使用 position: sticky;）。
特点：元素在滚动到特定位置之前表现为相对定位，达到特定位置后则表现为固定定位。
文档流
文档流（Document Flow）是指HTML页面中元素按照其在文档中的位置顺序自然排列的一种布局方式。它是网页布局的基础，决定了元素在页面上的默认位置和显示顺序。以下是关于文档流的一些关键点：
块级元素（Block-level Elements）：
块级元素会占据其父元素的全部宽度，并且通常会在垂直方向上一个接一个地排列。
常见的块级元素包括 <div>、<h1> 到 <h6>、<p>、<form> 等。
内联元素（Inline Elements）：
内联元素只占据必要的宽度，并且会在水平方向上一个接一个地排列，直到行宽不足以容纳下一个元素，此时它会换行。
常见的内联元素包括 <span>、<a>、<img>、<input> 等。
正常文档流的特点：
元素按照它们在HTML文档中的顺序显示。
块级元素从上到下依次排列，内联元素从左到右排列。
元素的高度和宽度通常由其内容决定，除非显式地设置了宽度和高度。
元素之间的垂直间距通常由元素的 margin、padding 和 border 决定。
脱离文档流：
当使用绝对定位（position: absolute;）或固定定位（position: fixed;）时，元素会脱离正常文档流，这意味着它们不再占据文档流中的空间，也不会影响其他元素的布局。
使用浮动（float）属性也可以使元素脱离文档流的垂直排列，但它们仍然会影响文档流的水平布局。
理解文档流对于进行有效的网页布局和定位非常重要，因为它决定了元素如何在没有额外样式干预的情况下在页面上排列。
居中问题
水平居中
内联元素（Inline Elements）：
使用 text-align: center; 在父元素上可以使得所有内联元素水平居中，需要注意的是对定位的元素是无效的。
块级元素（Block-level Elements）：
设置元素的 margin: 0 auto; 可以使其水平居中，但这要求元素有固定的宽度。
Flexbox：
在父元素上设置 display: flex; 和 justify-content: center; 可以轻松实现子元素的水平居中。
Grid：
在父元素上设置 display: grid; 和 place-items: center; 或 justify-content: center; 可以实现子元素的水平居中。
垂直居中
单行内联元素：
设置父元素的 line-height 等于其 height 可以使内联元素垂直居中。
Flexbox：
在父元素上设置 display: flex; 和 align-items: center; 可以实现子元素的垂直居中。
Grid：
在父元素上设置 display: grid; 和 place-items: center; 可以实现子元素的垂直居中。
绝对定位与负边距：
对于已知高度的元素，可以使用绝对定位，并将 top 和 bottom 设置为 0，然后通过 margin: auto; 来垂直居中。
绝对定位与transform：
使用绝对定位将元素的 top 设置为 50%，然后使用 transform: translateY(-50%); 来垂直居中。
水平垂直同时居中
Flexbox：
在父元素上设置 display: flex;，然后使用 justify-content: center; 和 align-items: center; 可以同时实现水平和垂直居中。
Grid：
在父元素上设置 display: grid;，然后使用 place-items: center; 可以同时实现水平和垂直居中。
绝对定位与transform：
使用绝对定位将元素的 top 和 left 都设置为 50%，然后使用 transform: translate(-50%, -50%); 来同时实现水平和垂直居中。
Flexbox布局
说明
父容器使用Flexbox布局后，其子组件的行为会与传统的文档流（normal flow）有所不同，组件将按照Flexbox 的规则进行布局，而不是按照标准文档流。
在Flex中，组件分为两个概念：
Flex Container（弹性容器）：
使用 display: flex; 或 display: inline-flex; 属性声明的元素。
子元素称为 Flex Items（弹性项目）。
Flex Items（弹性项目）：
弹性容器的直接子元素自动成为弹性项目。
在Flex中，子组件的排列布局方式将按照父容器设定的主轴（与之对应的是交叉轴）方向进行排序，主轴方向可以配置，详见下面的语法。另外，当Flex布局中子组件过多换行后，相当于存在多个主轴（也对应存在多个交叉轴），每个主轴都可以独立地根据 justify-content 属性来对齐其上的子组件，而不同的行（即不同的主轴）之间则可以通过 align-content 属性来设置它们在交叉轴上的对齐方式。
语法
参考
https://blog.csdn.net/Oxford1151/article/details/141531279
flex
设置容器为Flex布局，主轴方式默认为row，即从左到右。
<view style="display: flex;"></view>flex-direction
设置主轴的方向，决定组件的排列方式，有四种取值：
row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。
<view style="display: flex;flex-direction: column;"></view>flex-wrap
默认情况下，项目都排在一主轴线上，如果父容器的宽度或高度不够，子组件是不会自动换行的，会强制撑开。
利用flex-wrap属性，我们可以配置父容器空间不够的情况下，子组件的换行效果，有三种取值：
nowrap（默认）：不换行。
wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。
<view style="display: flex;flex-wrap: wrap;"></view>flex-flow
flex-direction和flex-wrap的结合。
<view style="display: flex;flex-flow: <flex-direction> <flex-wrap>;"></view>justify-content
定义了项目在主轴上的对齐方式（主轴对应的方向需要有确定长度才有效），如果存在多个主轴，对多个主轴都有效，有五种取值：
flex-start（默认）：与主轴的起点对齐。
flex-end：与主轴的终点对齐。
center：与主轴的中点对齐。
space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
<view style="display: flex;justify-content: flex-start;"></view>align-items
定义了项目在交叉轴上的对齐方式（纵向交叉轴始终自上而下，横向交叉轴始终自左而右）（交叉轴对应的方向需要有确定长度才有效），如果存在多个交叉轴，对多个交叉轴都有效，有五种取值：
flex-start：交叉轴的起点（交叉轴方向上）对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。
<view style="display: flex;align-items: flex-start;"></view>align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。有六种取值：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：主轴线占满整个交叉轴。
<view style="display: flex;align-content: flex-start;"></view>flex-grow
flex-grow 是一个 CSS 属性，用于设置 Flexbox 布局中的 flex 容器（flex container）内 flex 项（flex item）的放大比例。当 flex 容器有可用空间时，flex-grow 属性决定了 flex 项如何相对于其他 flex 项增长以填充额外的空间。该属性也可用于让某个项填充从容器剩下的长度空间。
注意在如果内容长于容器宽度，容器宽度会被撑开，而不是保持比例。
//高度上1:2的高度
<view style="display: flex;height: 300rpx;flex-direction: column;">
<view style="flex-grow: 1;background-color: aqua;"></view>
<view style="flex-grow: 2;background-color: bisque;"></view>
</view>//宽度上1:2的宽度
<view style="display: flex;">
<view style="flex-grow: 1;height: 100rpx;background-color: aqua;"></view>
<view style="flex-grow: 2;height: 100rpx;background-color: bisque;"></view>
</view>//填充剩余空间
<view style="display: flex;">
<view style="width: 100rpx; height: 100rpx;background-color: aqua;"></view>
<view style="flex-grow: 1;height: 100rpx;background-color: bisque;"></view>
</view>//支持flex-grow下再flex-grow
<view style="display: flex;">
<view style="flex-grow: 2;height: 100rpx;background-color: aqua;display: flex;flex-direction: column;">
<view style="flex-grow: 1;background-color: rgb(24, 187, 78);">
</view>
<view style="flex-grow: 3;background-color: rgb(107, 13, 126);">
</view>
</view>
<view style="flex-grow: 1;height: 100rpx;background-color: bisque;"></view>
</view>