[微信小程序] 入门笔记1-滚动视图组件

[微信小程序] 入门笔记1-滚动视图组件

1.页面&组件&渲染

• 在小程序是由一个个页面page组成, 而页面又是由一个个组件component组成.
• 和网页类似,这里的组件指的就是输入框<input>,按钮<button>,文本<text>,图片<image>等元素.如果你学过网页一定不陌生.如果没学过应该也好理解的吧 .
• 小程序是允许 自定义组件 的, 比如单独一个输入框,单独一个文本,比较少用,正常都是组合起来使用.为了方便调用,避免重复设置, 可以自定义组件,将常用的组件功能打包起来.甚至可以添加/实现更多功能.
• 关于小程序页面,有 渲染 这一概念. 个人理解就是指在页面内 显示组件 这一过程.因为一般都是动态的,会变化的.需要根据情况显示不同内容——渲染不同组件.
• 所以小程序编程提供了非常方便的 条件渲染 和 列表渲染 .允许页面可以动态的选择显示什么组件,显示多少组件.可以通过脚本内的代码继续控制,改变标记变量或是数组内容.从而达到丰富效果.
• 微信小程序还有很多特供的语法,而且这些语法不同版本写法不太一样,虽然新版本是向下兼容.但是初学者搜到同一个功能,同一个api,不同调用方法,看得是真头大!!!
• 经过上面的介绍,你应该大概明白,小程序主要就是用组件组合起来渲染出页面,而脚本就是空中组件的渲染,从而改变页面.还有很多官方特供的api.或是你自己写的库也可以丢一起,我习惯丢归总在文件夹library内.

2.界面.wxml

现在开始直接实现功能,没有比实操更加好的老师了.

• 在页面page0.wxml中填写以下代码. 下面开始详细介绍知识点;
  

<!-- 这是一个总的容器 -->
<view class="container">  

<!-- 这是滚动视图组件 -->
<swiper autoplay="{{true}}" circular="{{true}}" interval="{{5000}}" duration="{{1000}}" indicator-dots="{{true}}">  
    <block wx:for="{{image_urls}}" wx:key="index">  
        <swiper-item>  
            <image src="{{item}}" mode="aspectFit" />  
        </swiper-item>  
    </block>  
</swiper>  

</view>

2.1.总容器 container

• 页面总是包含在一个view内,然后给予类名container.约定俗成,一会编写样式时再介绍wxss.

2.2.组件属性

• 滑块视图容器 swiper 详细定义可以查看微信开放文档, IDE内,将鼠标放在官方语法上,会便捷的显示说明弹窗.组件内部属性和参数也适用.

• 组件内填写的是属性,属性是有默认值,也可以创建时指定外部传入值.如果点击可视化,再点击页面内该组件,选中它,你可以在窗口内看到该组件的所有属性.非常方便.不过还是更加喜欢直接查手册,因为屏幕太小了,这样并排显示很挤 .

• 设定属性时,必定适用双引号包住.但并不代表它们是任意字符串,实际上是有指定类型的在上图中你也可以看到boolean和number类型的指定.
• 然后语法上,通过下面的3个例子,应该能明白,加2个双括号可以填写变量或常量,不加就只能是常量.

autoplay="true" // 指定属性为 真 true

autoplay="{{temp_bool}}" // 指定属性为 js脚本内名为 temp_bool 的变量数据

autoplay="{{true}}" // 指定属性为 true 的常量数据, 相当于第一个了

2.3.列表渲染

• 开头也说过, 可以使用数组, 控制渲染组件. block不是组件,只是为了搭配wx:for使用,代表括起来的东西会循环渲染几遍.这样就不必重复几遍组件代码了.
• wx:for语法中,数组的元素名默认为item,对应元素的索引/下标默认为index.

<block wx:for="{{image_urls}}" wx:key="index">  
    <swiper-item>  
        <image src="{{item}}" mode="aspectFit" />  
    </swiper-item>  
</block>  

• image_urls是脚本js内定义的一个数组, 里面的存着一堆图片的网络链接, 以上代码就是循环取出这些图片链接,并给予image组件,
• 注意到了wx:key,指的是数组内该元素的唯一标识,因为考虑到了可能出现相同元素,但只显示一次?一般情况下少用,但是不填写这个语法会给我报警告,恼火.所以使用元素的下标index作为唯一标识.也就代表数组内所有元素都是唯一的,都要执行一遍.
• 还有一点.如果你不喜欢提供的默认变量名item和index,也可以自定义这两个变量的名字.只需要添加wx:for-item="自定义元素名", wx:for-index="自定义下标名" .不过建议不要多此一举.除非你多重嵌套,需要区分变量名.
• 最后可以在模拟调试中看到效果.现在没有定义image_urls数组,所以看到是空的,没有内容.脚本内就可以通过修改数组内容,达到动态修改页面的效果了.
• 点击选择这个组件,还能看到它的样式,后面调试样式时会用到.

3.脚本.js

• 在脚本内添加数组, 注意这个格式要求, 脚本所有内容都必须写在 Page({...})内, 然后数据变量都必须写在date:{...}内.这里的变量都可以被页面wxml直接访问,也可以同脚本内的方法调用.具体后面例子再说.

image_urls: [
    'https://images.unsplash.com/photo-1705198190334-156df02024de?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1714414638521-7b56a97ec5e2?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1709926301080-755d4f712edf?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    // ... 更多图片URL  
]

• 这个时候再看模拟效果, 就能看到列表渲染出3个组件,页面可以滚动先显示3张图片.如果细心一点可能发现样式怎么填了那么多内容.

4.样式.wxss

• 在样式文件中插入以下代码, 为了方便对比效果,可以将滑块视图容器组件拷贝一份.可以就可以看到2个组件在页面上的布局变化,根据样式的不同,位置与大小会不同.

/* pages/page0/page0.wxss */

/* 整体容器 */
.container {
    /* 弹性盒子布局 */
    display: flex;
    /* 决定主轴的方向 即项目的排列方向: 主轴为水平方向,起点在左端 */
    flex-direction: row;
    /* 定义项目是否换行以及如何换行: 换行,第一行在上方 */
    flex-wrap: wrap;
    /* 定义项目在主轴上的对齐方式: 每个项目两侧的间隔相等 */
    justify-content: space-around;
    /* 定义项目在竖直方向上对齐方式: 交叉轴的起点对齐 */
    align-items: flex-start;
    /* 占据整个视口高度: vh = % */
    height: 100vh;
}

/* 滑块视图容器 */
swiper {
    /* 占据父级的大小 */
    width: 100%;
    height: 50vh;
    /* 设置你的滑动视图上下间距 */
    margin-top: 1vh;
    margin-bottom: 1vh;
    /* 设置容器的背景颜色 */
    background-color: #15fd00;
}

/* 滑块视图容器 中的 图片 */
swiper image {
    /* 限定显示区域 */
    width: 100%;
    height: 100%;
    /* 设置容器的背景颜色 */
    background-color: #39d3d8;
}

• 从调试器窗口中可以方便的看到样式的定义位置,因为经常会出现父级/子级/选择器重复定义,使用在这个工具就可以快速筛查.

• 对于界面的最外围的整体容器container,有个很重要的属性display,主要是为了规定页面内各个部件内的布局,类比一下qt的布局,要手动规划每一层嵌套.就好头痛.推荐个帖子,有详细对比.

display:flex(弹性盒子布局)详解 https://blog.csdn.net/qq_44537625/article/details/100040169

• 另外,查样式例子, 总是有许多类名,我本人不太喜欢这种用法,我更加倾向于使用元素名嵌套,因为有取名困难症…

CSS6大种选择器(超详细!!!) https://blog.csdn.net/weixin_52682014/article/details/127709889
CSS 组合选择符 https://www.runoob.com/css/css-combinators.html

• 子级处于父级下,使用 width 和 height 定义尺寸,然后长宽可以百分比单位%. 然后纵向(高度)还可以使用vh, 横向(宽度)使用 rpx. 都是相对尺寸, 为了适应不同屏幕大小, 需要避免使用绝对尺寸.

rpx 尺寸单位 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

• 可以修改组件的宽度,看看布局的变化;

swiper {
    /* 占据父级的大小 */
    width: 100%;
    ...
}    
swiper image {
    /* 占据父级的大小 */
    width: 100%;
    ...
}    

• 建议直接查样式例子, 因为这玩意光看语法没啥用…
• 下一节开始写个基础组件.