小程序的开发之路③

10、微信小程序组件使用-1

网址：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

A、小程序基础组件 icon，text

Icon 图标组件

  <icon type='success' size='23'></icon>
  <icon type='success_no_circle' size='28'></icon>
  <icon type='warn' size='28'></icon>
1
2
3

1、属性：type icon 类型 可以列举的属性值有 success，success_no_circle,info,warn,waiting,cancel,download,search,clear

2、属性：size 23 默认值，单位像素

3、属性：color 颜色设定

Text 文本组件

<text>this is china</text>
1

B、小程序基础组件 button,input

C、案例演示：微商注册页面

11、微信小程序框架组件 view，swiper 的运用

01、小程序基础组件 view 和 swiper

View 组件介绍

等价于 Div

swiper 组件介绍

可以起到滑块效果
属性
1、autoplay boolean false 否 是否自动切换

2、interval number 5000 否 自动切换时间间隔

3、duration number 500 否 滑动动画时长

4、indicator-dots boolean false 否 是否显示面板指示点

5、indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色

6、current number 0 否 当前所在滑块的 index Swiper-item 格式操作

7、改变滑块视频的当前current

changeCurrent(event){
    console.log(event.detail.current);
}
1
2
3
4
5

8、纵滚动要加高度

<swiper
style="height: 200px"
vertical
current="1"
bindchange="changeCurrent"
autoplay

> </swiper>

1
2
3
4
5
6
7
8
9

icon 图标一般都存在本地
image 图片都是获取在线的资源，（在本地的图片,打开小程序时，图片占的内存比较大)

swiper: autoplay

属性 类型 默认值 必填 说明 最低版本

autoplay boolean false 否 是否自动切换 1.0.0

interval number 5000 否 自动切换时间间隔 1.0.0

duration number 500 否 滑动动画时长 1.0.0

indicator-dots boolean false 否 是否显示面板指示点 1.0.0

indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0

indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0

Current(改变图片的顺序) number 0 否 当前所在滑块的 index 1.0.0

bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source} 1.0.0

Vertical(要设置固定高度) boolean false 否 滑动方向是否为纵向 1.0.0

02、小程序制作搜狐新闻轮播图

导航标签 url 内部链接

12、微信小程序组件 scroll-view 的运用

Scroll-view 可以在部分区域内左右和上下滑动区块

小程序基础组件 scroll-view

首页可拖动导航条的制作

Scroll-view 组件的运用

基础库 1.0.0 开始支持，低版本需做兼容处理。

可滚动视图区域。使用竖向滚动时，需要给 scroll-view 一个固定高度 ，通过 WXSS 设置 height。组件属性的长度单位默认为 px，2.4.0 起支持传入单位(rpx/px)。

13、微信小程序布局框架的核心讲解

01、微信小程序布局理论

微信小程序的布局形式

PC 端布局到移动端布局的不同
PC 更侧重兼容，移动端更侧重布局
从 div+css 到 bootstrap 再到 flexbox

弹性布局是 CSS3 推出针对移动端的 又一个经典的布局形式

是 css2 布局的补充，而非取代

更好的让移动端的兼容性做的出色

flex 布局介绍(弹性布局)

它的特点是可以实现子元素的自适应屏幕大小，可以自由的分配每个 box 需要占用的空间比例。我们把父元素称作为：容器。子元素称作为：项目。容器默认存在两个轴：水平主轴（mian axis）、垂直交叉轴（cross axis）。左侧是主轴的开始点，右侧是主轴的结束点，垂直方向上顶部是交叉轴的开始位置，底部是交叉轴的结束位置。

语法

1. 块级弹性模块。

div {
    display: flex;
}
1
2
3

2. 内联弹性模块。

div {
    display: inline-flex;
}
1
2
3

容器包含属性

项目包含属性

flex-direction

弹性容器的方向 : Row | column
1

元素的排列方式

Justify-content: 弹性项目在主轴 main-axis 线上的对齐方式

flex-start | flex-end | center | space-between | space-around

align – Items 在叉差轴的对齐方式

flex-star | flex-end | center | stretch

在伸缩容器中的布局情况

定义在伸缩容器中

flex order 顺序

子元素可以通过设置 order 数值的大小来设定在页面中出现的顺序，数值小的在前，数值大的在后。

<div class="demo">
    <div class="child-1">1div>
    <div class="child-2">2div>
div>
1
2
3
4

.demo {
    display: flex;
}
.child-1 {
    flex: auto;
    order: 2;
    background: #000;
}
.child-2 {
    flex: auto;
    order: 1;
    background: rgb(255, 2, 2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

flex:grow、shrink、basis

一个左侧 150px，右侧自适应的，左右布局

<div class="demo">
    <div class="itemLeft">1div>
    <div class="itemRight">2div>
div>
1
2
3
4

.demo {
    display: flex;
}
.itemLeft {
    flex-basis: 150px;
}
.itemRight {
    flex-grow: 1;
}
1
2
3
4
5
6
7
8
9

一个左侧为 100px，右侧最大为 600px 的左右布局

.demo {
    display: flex;
}
.itemLeft {
    flex-basis: 100px;
    background: red;
    flex-shrink: 0;
}
.itemRight {
    flex-basis: 600px;
    background: yellow;
}
1
2
3
4
5
6
7
8
9
10
11
12

flex:1 是其中最常见的设置,它等价于：

.demo {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}
1
2
3
4
5

其意思就是剩余空间就扩大，而剩余空间不足就缩小，就像弹簧一样。那么这部分就可以自适应各种屏幕大小了。

经验分享

1、flex-basis 和 flex-grow 同时使用时候 flex-basis 不起作用。

2、flex 的属性 默认是 0 1 auto，它们的顺序是 flex-grow flex-shrink 和 flex-basis 即三不：有剩余空间不扩大、当空间不足时缩小、不限制尺寸。

3、flex 属性有两个快捷值 即 auto（ 1 1 auto）和 none（0 0 auto）。

4、尽量不要使用缩小，因为它的兼容性不是很好。

自动换行 flex-wrap: wrap;

Flex

display : flex

flex : 数字

注意事项

view 缺省是 block 布局

如果写上 display : flex 那么缺省是 row 布局

display: flex;

flex-direction: row;