小程序杂记（持续更新）

------------------------------------------------------------------------------------------------------------

小程序打包大小不得超过2M

------------------------------------------------------------------------------------------------------------

<text>标签相当于web中的<span>标签属于行内元素，不会换行

<view>标签相当于web中的<div>标签属于块元素，会换行

效果如图：

------------------------------------------------------------------------------------------------------------

wx:for 使用中遇到问题

<view wx:for="{{personList}}" wx:for-item="item" wx:for-index="index" wx:key="id">

<view>第{{index+1}}名学生：</view>
<view>姓名：{{item.name}},年龄：{{item.age}},性别：{{item.sex}},邮箱：{{item.email}}</view>

</view>

1: wx:key的使用（正常集合 wx:key="主键" 赋值主键，如果是普通的一个数值数组如:[1,2,3,4] wx:key="*this"）

2: 默认情况下我们不写 wx:for-item="item" wx:for-index="index" 可以直接省略

<view wx:for="{{personList}}"  wx:key="id">

<view>第{{index+1}}名学生：</view>
<view>姓名：{{item.name}},年龄：{{item.age}},性别：{{item.sex}},邮箱：{{item.email}}</view>

</view>

------------------------------------------------------------------------------------------------------------

block 和 view 区别

<view wx:for="{{personList}}" wx:key="id">
姓名:{{item.name}},年龄:{{item.age}},性别:{{item.sex}}
</view>

<block wx:for="{{personList}}" wx:key="id">
姓名:{{item.name}},年龄:{{item.age}},性别:{{item.sex}}
</block>

------------------------------------------------------------------------------------------------------------

样式：元素单位 px 和 rpx 的区别

px不会随屏幕宽度的改变而改变，设置为多少就是多少

rpx会随屏幕宽度的改变进行等比例缩放

------------------------------------------------------------------------------------------------------------

text标签解码问题

效果：

解码：decode

效果：

------------------------------------------------------------------------------------------------------------

image标签默认宽高为 320*240

mode属性

常用值

mode="aspectFit" 一般用于轮播图。缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

mode="widthFix" 宽度指定后高度按比例自动调整

------------------------------------------------------------------------------------------------------------

swiper轮播图默认宽高为宽100% 高150px

等比例计算swiper高度 = swiper高度 * 原图高度 / 原图宽度 ----- height:calc(swiper高度 * 原图高度 / 原图宽度)

例： height:calc(100vw*280/520); 或者计算出来直接 height:53.84vw;　

常用属性

autoplay --- 是否自动播放默认为false

interval --- 自动切换时间间隔默认是5000毫秒

circular --- 是否采用衔接滑动默认为false

indicator-dots --- 是否显示面板指示点默认为false

------------------------------------------------------------------------------------------------------------