微信小程序：view/text/image

微信小程序：view/text/image

eg:

<!--.WXML内书写-->
 
<view> rpx </view>

/* pages/demo2/demo2.wxss */

/* 
1 小程序中 不需要主动来引入样式文件
2 需要把页面中某些元素的单位 由px改为rpx
  1 设计稿 750px = 750 rpx
    1 px = 1 rpx
  2 把屏幕宽度改成375px 
    375px = 750 px
    1 px = 2 rpx 
    1 rpx = 0.5 px
  3 存在一个设计稿 宽度414 或者 未知page
    1 设计稿 page 存在一个元素 宽度 100px
    2 拿以上的需求 去实现 不同的宽度的页面适配
  4 利用 一个属性 calc属性 css和wxss都支持的一个属性
    1 750 和 rpx 中间不要留空格
    2 运算符的两边也不要留空格

    Page px = 750 rpx
    100 px = 750 rpx * 100 /page
    */

view{
    /* width: 200px; */
    height:200px;
    font-size:40px;
    background-color:aqua;

    /* 以下代码写法是错误的 */
    /* width:750 rpx * 100 / 375 ;  */
    width: calc(750rpx*100/375);
    }

view与text标签

• view代替原来的div标签

<view hover-class="h-class">
    点击我试一试~
    </view>

• text

1. 文本标签
2. 只能嵌套txt
3. 长按文本可以复制（只有该标签有这个功能）
4. 可以对空格 回车 进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<!--.WXML内书写-->
 
<!-- 
1. 长按文本复制selectable
2. 对文本内容 进行解码
 -->
 <text selectable decode>
 text
 &nbsp;
 123
</text>

image标签

1.图片标签，image组件默认宽度320px、高度240px

2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode有效值：

mode有13种模式，其中4种是缩放模式，9种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFit	保持纵横比缩放图片，使图片的肠功能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

举个栗子：

<!-- 
    image 图片标签
1 src 要指定加载文件的路径
  图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100

2 mode 决定的是图片内容：如何和图片标签的宽高做适配
   
   mode内标签介绍：

  1 scaleToFill 默认值  不保持纵横缩放比，缩放图片，使图片的宽高完全拉伸至填满image元素
  2 aspectFit 保持宽高比 确保图片的长边显示出来 首页轮播图常用
  3 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。较为少用
  4 widthFix 以前web图片的宽度指定了之后，高度会按照自己的比例进行调整。常用
  5 bottom 类似以前的background-position

3 小程序当中的图片直接就支持懒加载 laze-load
  1 lazy-load会自己判断 当图片出现在视口（整个界面）窗口上下三个屏幕的高度之内的时候 小程序会自己加载图片
 -->

<image  lazy-load src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606037487826&di=d5b01a3855774045d9208d8801379a14&imgtype=0&src=http%3A%2F%2Fimg.hao661.com%2Fqq.hao661.com%2Fuploads%2Fallimg%2F180810%2F2014121059-13.jpg"/>

view text image标签的教学视频P22~P24 倍速观看长约10分钟