小程序开发（二）

小程序的宿主环境

1.小程序启动过程

2.组件

常用视图容器类组件

view——快速布局

scroll-view——滚动列表效果

 swiper和swiper-item

——轮播图容器组件和轮播图item组件/首页轮播图

eg.view组件的使用

实现flex横向布局效果

wxml写结构  wxssx写样式

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:lightgreen ——背景颜色

}

.container1 view:nth-child(2){

  background-color: lightskyblue;

}

.container1 view:nth-child(3){

  background-color:lightpink ;

}

.container1{

  display: flex; ——横向并排

  justify-content: space-around;——空间间隔

}

eg2:滚动列表组件scroll-view

scroll-y是x轴滚动  要实现滚动必须加一个固定容器

 

 eg3 swpier 和swiper-item组件实现轮播图

wxss:

 

 .item 全面需要空格

轮播图组件的常用属性

基础内容组件： 

 1.用户输入手机号长按选中，复制，必须使用 text selectable属性 view不支持

2. rich-text组件的nodes属性节点，吧HTML字符串渲染为对应的UI结构

 其他组件

 按钮组件

 图片组件属性

<image></image>

<image src="/images/1.jpg"></image>

 小程序API