小程序 —— Day1

组件 --- view和scroll-view

view

类似于HTML中的div,是一个块级元素

案例:通过view组件实现页面的基础布局

scroll-view

可滚动的视图区域,用来实现滚动列表效果

案例:实现纵向滚动效果

scroll-x属性:允许横向滚动;scroll-y属性:允许纵向滚动

在使用竖向滚动的时候,必须给 scroll-view 一个固定高度

组件 --- swiper和swiper-item

swiper

轮播图容器组件

swiper-item

轮播图item组件(里面每一个可以轮播的item项)

案例:实现轮播图效果

swiper组件的常用属性

indicator-dots 默认值:false 是否显示小圆点

indicator-color 指示点颜色

indicator-active-color 当前选中的指示点颜色

autoplay 是否自动切换轮播图

interval 更改自动切换时间间隔 (默认为5s(5000))

circular 默认值:false 是否采用衔接滚动 (最后一张 -> 第一张)

组件 --- text和rich-text

text

文本组件;类似于HTML中的span标签,是一个行内元素

selectable属性,实现长按选中文本内容的效果(场景:长按选中,复制)

注意:小程序里只有text组件支持长按选中操作

rich-text

富文本组件;支持把HTML字符串渲染成WXML结构

nodes属性,实现把HTML字符串渲染为对应的UI结构

组件 --- button和image

button

type属性 ------ 指定按钮类型

size="mini" ------ 小尺寸按钮

plain属性 ------ 镂空按钮(没背景色,但有边框线)

image

mode属性

常用属性值:

scaleToFill 默认值 使图片的宽高完全拉伸至填满image元素

aspectFit 在保持纵横比的情况下缩放图片,使图片的长边能完全显示出来

aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来(也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取)

widthFix 宽度不变,高度自适应,保持原图宽高比不变

heightFix 高度不变,宽度自适应,保持原图宽高比不变(直到把整张图片完整显示出来为止)

小程序API的三大分类

事件监听API

以on开头,用来监听某些事件的触发

eg. wx.onWindowResize 监听窗口尺寸变化的事件

同步API

以Sync结尾的API

eg. wx.setStorageSync('key','value')向本地存储中写入内容

异步API

需要通过success、fail、complete接收调用的结果

eg. wx.request() 发起网络数据请求,通过success回调函数接收数据

相关推荐
_ZeroKing18 小时前
自制智能门锁:NFC 刷卡 + 小程序远程开锁(完整实战记录)
嵌入式硬件·小程序·notepad++·arduino
郑州光合科技余经理18 小时前
可独立部署的Java同城O2O系统架构:技术落地
java·开发语言·前端·后端·小程序·系统架构·uni-app
阿斌_bingyu70920 小时前
眼镜店AR在线试戴小程序技术解决方案
小程序·ar
计算机毕设指导620 小时前
基于微信小程序的智能停车场管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
2501_9339072121 小时前
如何选择西安优质小程序开发服务与本凡码农合作?
科技·微信小程序·小程序
说私域21 小时前
破局互联网产品开发困境:开源AI智能名片链动2+1模式S2B2C商城小程序的实践与启示
人工智能·小程序·开源·私域运营
宁夏雨科网2 天前
文具办公用品小程序商城,开发一个难吗
小程序·商城小程序·文具小程序·文具商城
说私域2 天前
开源链动2+1模式商城小程序在深度分销数字化转型中的应用研究
人工智能·小程序·开源·流量运营·私域运营
咖啡の猫2 天前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++
咖啡の猫2 天前
微信小程序全局数据共享
微信小程序·小程序