Vue3+Uni+Node+MySQL 从零实现跨端小程序的全栈
核心代码，注释必读
// download：
3w ukoou com
微信小程序中的基础语法和常用组件 微信小程序是一种基于微信平台开发的轻量级应用程序，具有自己的基础语法和常用组件。下面是微信小程序的一些基础语法和常用组件：
基础语法：
- WXML（WeiXin Markup Language）：类似于HTML的标记语言，用于描述小程序的页面结构。
- WXSS（WeiXin Style Sheets）：类似于CSS的样式语言，用于描述小程序的页面样式。
- JavaScript：用于编写小程序的逻辑代码，实现页面的交互和功能。
常用组件：
- 视图容器：
view、scroll-view、swiper等，用于布局和展示内容。 - 基础内容：
text、icon、image等，用于显示文本、图标和图片。 - 表单组件：
button、input、checkbox、radio等，用于用户输入和选择。 - 列表渲染：
block、template、wx:for等，用于循环渲染列表数据。 - 事件绑定：
bind、catch等，用于处理用户交互事件，如点击、滑动等。 - 页面导航：
navigator、switch-tab、navigateTo等，用于页面之间的跳转和导航。 - API调用：
wx.request、wx.showToast、wx.getLocation等，用于调用微信提供的API功能，如网络请求、消息提示、地理位置等。
微信小程序脚本与样式和Flex布局
微信小程序中的脚本和样式分别是JavaScript和WXSS（WeiXin Style Sheets）。下面是关于微信小程序脚本和样式的一些介绍，以及如何使用Flex布局。
-
脚本（JavaScript）：
- 微信小程序使用JavaScript作为脚本语言，用于编写小程序的逻辑代码。
- 可以在脚本中处理用户交互事件、调用API接口、处理数据等。
- 支持ES6的语法特性，如箭头函数、模板字符串、解构赋值等。
- 可以通过
Page函数定义一个页面，并在页面对象中编写对应的事件处理函数和数据处理逻辑。
-
样式（WXSS）：
- 微信小程序使用WXSS作为样式语言，类似于CSS，用于描述小程序的页面样式。
- WXSS支持大部分CSS的语法规则，如选择器、盒模型、布局等。
- 可以通过类、ID、标签等选择器来选择页面中的元素，并为其设置样式。
- 支持单位：rpx（响应式像素）、px、%等，用于适配不同屏幕尺寸。
- 可以使用
@import导入外部样式文件，实现样式的复用。
-
Flex布局：
- Flex布局是一种弹性盒模型，用于实现页面的灵活布局。
- 在WXSS中，可以通过设置元素的
display: flex来启用Flex布局。 - 使用
flex-direction属性来指定主轴方向（row、column）。 - 使用
justify-content属性来设置主轴上的对齐方式（flex-start、center、flex-end等）。 - 使用
align-items属性来设置交叉轴上的对齐方式（flex-start、center、flex-end等）。 - 可以使用
flex属性来设置元素在主轴上的占比和分配剩余空间的方式。
WXML（页面结构）：
html
<view class="container">
<view class="item">Item 1</view>
<view class="item">Item 2</view>
<view class="item">Item 3</view>
</view>WXSS（样式）：
css
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 200rpx;
padding: 20rpx;
background-color: #f5f5f5;
}
.item {
flex: 1;
height: 100%;
background-color: #ff9900;
color: #ffffff;
text-align: center;
line-height: 200rpx;
}在上述示例中，我们创建了一个包含三个子元素的容器（.container），并使用Flex布局来排列子元素。通过设置容器的样式，我们实现了以下效果：
- 子元素在水平方向上均匀分布，使用
justify-content: space-between;实现。 - 子元素在垂直方向上居中对齐，使用
align-items: center;实现。 - 子元素的高度为父容器的高度，使用
height: 100%;实现。 - 子元素的背景颜色、文字颜色、文本居中等样式通过
.item类来设置。