Vue3+Uni+Node+MySQL 从零实现跨端小程序的全栈「吾爱fx」

Vue3+Uni+Node+MySQL 从零完成跨端小程序的全栈

中心代码，注释必读

// download：3w ukoou com

微信小程序中的根底语法和常用组件
微信小程序是一种根据微信平台开发的轻量级应用程序，具有自己的根底语法和常用组件。下面是微信小程序的一些根底语法和常用组件：

根底语法：

1. WXML（WeiXin Markup Language）：类似于HTML的符号言语，用于描绘小程序的页面结构。
2. WXSS（WeiXin Style Sheets）：类似于CSS的款式言语，用于描绘小程序的页面款式。
3. JavaScript：用于编写小程序的逻辑代码，完成页面的交互和功能。

常用组件：

1. 视图容器：view、scroll-view、swiper等，用于布局和展示内容。
2. 根底内容：text、icon、image等，用于显示文本、图标和图片。
3. 表单组件：button、input、checkbox、radio等，用于用户输入和挑选。
4. 列表烘托：block、template、wx:for等，用于循环烘托列表数据。
5. 事情绑定：bind、catch等，用于处理用户交互事情，如点击、滑动等。
6. 页面导航：navigator、switch-tab、navigateTo等，用于页面之间的跳转和导航。
7. API调用：wx.request、wx.showToast、wx.getLocation等，用于调用微信供给的API功能，如网络请求、音讯提示、地理位置等。

微信小程序脚本与款式和Flex布局

微信小程序中的脚本和款式分别是JavaScript和WXSS（WeiXin Style Sheets）。下面是关于微信小程序脚本和款式的一些介绍，以及如何运用Flex布局。

1. 脚本（JavaScript）：

   • 微信小程序运用JavaScript作为脚本言语，用于编写小程序的逻辑代码。
   • 能够在脚本中处理用户交互事情、调用API接口、处理数据等。
   • 支撑ES6的语法特性，如箭头函数、模板字符串、解构赋值等。
   • 能够经过Page函数定义一个页面，并在页面对象中编写对应的事情处理函数和数据处理逻辑。

2. 款式（WXSS）：

   • 微信小程序运用WXSS作为款式言语，类似于CSS，用于描绘小程序的页面款式。
   • WXSS支撑大部分CSS的语法规则，如挑选器、盒模型、布局等。
   • 能够经过类、ID、标签等挑选器来挑选页面中的元素，并为其设置款式。
   • 支撑单位：rpx（响应式像素）、px、%等，用于适配不同屏幕尺度。
   • 能够运用@import导入外部款式文件，完成款式的复用。

3. 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（页面结构）：

<view class="container">
  <view class="item">Item 1</view>
  <view class="item">Item 2</view>
  <view class="item">Item 3</view>
</view>

WXSS（款式）：

.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类来设置。