小程序的宿主环境
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