小程序学习笔记（20—29）

• 20节 ，wxss（样式）块里

在首页添加图片的时候图片大小会随手机屏幕大小自适应的改变大小
① rpx 尺寸，可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx（就按这个成比例变化）
让内容跟随屏幕的变化等比列变化
在全局配置文件里
小程序中，不需要主动引入样式文件，就是程序会自己看哪些名字一样然后自己调用，
② 不能把像素写死，要将px改成rpx，
屏幕宽度改变后自己就会适应屏幕大小而改变

• 21节，样式导入

wxss中支持样式导入功能
使用@import语句可以导入外联样式表，只支持相对路径

可以自己写一个文件夹统一定义一种格式，保存
然后在别的页面中可以同意调用，只能用相对路径

• 22，3节，选择器

less：预编译文件，便于维护 ，不需要太去学

• 24节 组件标签

view标签，相当于div ，视图容器
text：文本标签，只可以嵌套自己，长按文字可以复制（只有该标签可以复制） 可以对文本内容进行解码
关键字：selectable（属性名）
decode &。。。。（可以隐藏）

• 25节 image图片标签

图片大小有要求，只可以用网络web图片，本例图片选好了可以打开：土豆图床 然后上传，上传后的链接才可以放在wxml中用



并且要用关键字src哦：指定路径
但是刚开始是默认的长宽高，要在wxss中来改变长宽高，
具体使用文档[具体文档]

• 26.swiper组件 轮播图

（基础，让swiper适应图片宽高）
在首页可以展示很多张图片
要放轮播项，swiper-item
1.外层容器，swiper
2.每一个轮播项swiper-item
3.存在默认样式，宽100%，高度150px
具体代码实现

对于如果图片的大小高低不一样的话，用画图3D改变像素大小，改为一致就一样大小了

swiper{
    width:100%;
    height:cal(100vw * 352 /1125);
}

image{
    width:100%;
}

<swiper>
    <swiper-item > <image mode="widthFix" src="https://ae01.alicdn.com/kf/H9a37713a996b4b89b49c54f0306295d0b.jpg" />  </swiper-item>
    <swiper-item > <image mode="widthFix" src="https://ae01.alicdn.com/kf/He3bacaa43a31409aad82b7b669288404Q.jpg" />  </swiper-item>
    <swiper-item > <image mode="widthFix" src="https://ae01.alicdn.com/kf/Ha487f3dfe63f4210b92b3fb3f3b24465e.jpg" />  </swiper-item>    
</swiper>
  

• 27.swiper常见属性

具体开发文档为：swiper组件详情

• 28.navigation-bar组件（导航栏）

具体文件组件属性

跳转页面，如果跳转的路径已经在app.json文件中的TabBar选项中注册，①跳转方法需要用wx.switchTab方法来跳转wx.switchTab具体操作
②加上属性open-type="switchTab"
如图

但是没有保留以前页面的属性，如下具体用法

如果不是在app.json中的选项则直接

<navigator url="**相对路径，不加miniprogream，然后把\都换成/，并且不加后缀名**">  汉字xxx  </navigator>

• 29.rich-text富文本标签

（将字符串解析成对应标签）富文本标签
从淘宝可以去拷贝标签样式
没咋看懂，到时候用的时候在看一遍把。
用处：电商的商业详情面