小程序 —— 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回调函数接收数据

相关推荐
00后程序员张3 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
游戏开发爱好者84 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
sen_shan5 小时前
《微信小程序》第五章:登录-API封装
微信小程序·小程序
2501_916007479 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张10 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159090611 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
simon_934912 小时前
微信小程序(H5)上传文件到阿里云 OSS(使用 STS 临时凭证)
阿里云·微信小程序·小程序·html5
2501_9159184113 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
老师可可14 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
2501_9159214314 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview