小程序基本文件结构及标签组件

一 小程序基本文件结构

app.js: 小程序的主要逻辑判断
app.json:小程序的公共设置，如页面头部的样式，字体等
app.wxss:小程序的公共样式表，一些公共组件样式的配置

一个小程序的页面由四个文件组成：
1 wxml：这个文件用来编写页面的结构，相当于html文件

2 wxss：这个文件用来编写页面的样式，相当于css文件

3 json：这个文件用来编写页面的配置

4 js：这个文件用来编写页面的一些逻辑和数据，相当于js文件

二 基本组件

例如：

openAI 的 GPT 大模型的发展历程。

1 view组件

1 view组件相当于html中的div标签

以下为.wxml文件代码：

<view class="container1">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

以下为.wxss代码：

/* view标签中的css */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color:lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

运行结果：

2 scroll-view滚动组件

2滚动组件 scroll-view
属性：
scroll-y属性：允许纵向滚动
scroll-x属性：允许横向滚动

以下为.wxml文件代码：

<scroll-view class="container2" scroll-y> 
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

以下为.wxss代码：

.container2 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container2 view:nth-child(1){
  background-color:lightgreen;
}
.container2 view:nth-child(2){
  background-color: lightskyblue;
}
.container2 view:nth-child(3){
  background-color: lightcoral;
}
.container2{
  width: 200px;
  height: 130px;
  border: 1px solid red;
}

运行结果：

3 swiper和swiper-item组件

3swiper和swiper-item组件的基本使用
属性：
轮播图indicator-dots小圆点显示
小圆点激活时颜色indicator-active-color=“pink”
小圆点不激活时颜色indicator-color=“#fff”
是否自动切换图片autoplay=“true”
interval自动切换时间间隔
circular设置衔接播放

以下为.wxml文件代码：

<swiper class="swiper-container" indicator-dots indicator-color="#fff" indicator-active-color="pink" autoplay="true" interval="1000" circular>
  <swiper-item>
    <view class="item">1</view>
  </swiper-item>
  <swiper-item>
    <view class="item">2</view>
  </swiper-item>
  <swiper-item>
    <view class="item">3</view>
  </swiper-item>
</swiper>

以下为.wxss代码：

.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

运行结果：

4 text文本组件和rich-text组件

4text文本组件 和span标签一样 是一个行内元素 selectable属性设置长按支持选中
rich-text组件支持渲染标签 通过nodes属性添加标签文本
以下为.wxml文件代码：

<view>
  手机号支持长按选中效果  <text selectable>13453333274</text>
  <rich-text nodes="<h1>我可以解析标签</h1>"/>
</view>

运行结果：

5 button组件按钮

以下为.wxml文件代码：

<!-- button通过type属性指定按钮类型 -->

  <button>普通按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>

 <!-- 通过sizi=mini设置小尺寸按钮 -->

 <button size="mini">普通按钮</button>
  <button type="primary" size="mini">主色调按钮</button>
  <button type="warn" size="mini">警告按钮</button>

<!-- 通过plain设置镂空属性 有边框的按钮-->

  <button size="mini" plain>普通按钮</button>
  <button type="primary" size="mini" plain>主色调按钮</button>
  <button type="warn" size="mini" plain>警告按钮</button>

运行结果：

6image图片组件

imgage图片组件属性：
mode属性指定图片的裁剪和缩放
1 默认为scaleToFill 缩放模式 不保持纵横比缩放图片
2 aspectFit 缩放模式 保持纵横比例缩放图片 只保证图片的长边可以正常显示出来
3 aspectFill 缩放模式保持纵横比例缩放图片 只保证图像的短边可以显示出来
4 widthFix 宽度不变 高度自动变化 保证原图宽高比不变
5 heightFix 高度不变 宽度自动变化 保持原图宽高比不变

以下为.wxml文件代码：

 <image src="../../images/1.png" mode="aspectFit"/>

以下为.wxss文件代码：

 image{
  border: 1px solid pink;
}

运行结果：