小程序学习Day1

目录

常用视图容器类组件

①view

②scroll-view

③swiper和swiper-item

常用基础内容组件

①text

②rich-text

其他常用组件

①button

②image

③navigator（后续补充）

 小程序API分为三大类

①时间监听API

②同步API

③异步API

协同工作

---

常用视图容器类组件

①view

●普通视图区域

●类似于HTML中的div，是块级元素

text-align:center;  文本横向居中

line-height 行高

display:flex 横向布局

justify-content:space-around; 分散对齐

nth-child(x) 选择器

.wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.wxss

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: rgb(219, 163, 90);
}
.container1{
  display: flex;
  justify-content: space-around;

}

②scroll-view

●可滚动的视图区域

●实现滚动列表

scroll-y属性，允许纵向滚动

scroll-x属性，允许横向滚动

设置纵向，必须给scroll-view一个固定高度

.wxml

scroll-y：纵向滚动

<scroll-view class="container2" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.wxss

.container2 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container2 view:nth-child(1){
  background-color: aquamarine;
}
.container2 view:nth-child(2){
  background-color: lightskyblue;
}
.container2 view:nth-child(3){
  background-color: rgb(219, 163, 90);
}
.container2{
  border: 1px solid red;
  /* 给scroll-view一个固定高度 */
  height: 120px;
  width: 100px;
}

③swiper和swiper-item

●轮播图容器组件和轮播图item组件

swiper-item:nth-child(1).item是设置每个item

.wxml

<swiper class="swiper-container" indicator-dots>

<!-- 第一个轮播图 -->

<swiper-item>

  <view class="item">A</view>

</swiper-item>

<!-- 第二个轮播图 -->

<swiper-item>

  <view class="item">B</view>

</swiper-item>

<!-- 第三个轮播图 -->

<swiper-item>

  <view class="item">C</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: greenyellow;

}

swiper-item:nth-child(2) .item{

  background-color: palevioletred;

}

swiper-item:nth-child(3) .item{

  background-color: royalblue;

}

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000">

常用基础内容组件

①text

●文本组件

●类似于HTML中的span，是一个行内元素

通过text组件中的selectable属性，实现长按选中文本内容的效果

<view>

长按选中文本效果

<text selectable>13810234</text>

</view>

②rich-text

●富文本组件

●支持把HTML字符串渲染为WXML结构

通过nodes属性节点，把HTML字符串渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

其他常用组件

①button

●按钮组件

●功能比HTML中的button按钮丰富

<!-- 通过type属性指定按钮颜色2 -->
<button>普通按钮</button>
<button type="default">默认按钮default</button>
<button type="primary">主色调primary</button>
<button type="warn">警告按钮warn</button>
<!--  size="mini" 小尺寸按钮 -->
<button type="default" size="mini">默认按钮default</button>
<button type="primary" size="mini">主色调primary</button>
<button type="warn" size="mini">警告按钮warn</button>
<!-- plain 镂空按钮 -->
<button plain>普通按钮</button>
<button type="primary" plain>主色调primary</button>
<button type="warn" plain>警告按钮warn</button>

②image

●图片组件

●默认宽300px，高度240px

默认情况下图片比例不对导致图片变形，是由于mode属性导致。一般使用aspectFill和aspectFit

.wxml

<image></image>
<image src="/images/t01b34858521ec46b23(1).jpg" mode="widthFix"></image>

.wxss

image {
  border: 1px solid red;
}

③navigator（后续补充）

●页面导航组件

●类似于HTML中的a标签

 小程序API分为三大类

①时间监听API

●以on开头，用来监听某些事件的触发

●如wx.onWindowResize(function callback)监听窗口尺寸变化

②同步API

●以Sync结尾的API都是同步API

●同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

●举例：wx.setStorageSync('key','valye')向本地存储中写入内容

③异步API

●特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果

●举例：wx.request()发起网络数据请求，通过success回调函数接收数据

协同工作

小程序开发流程