2微信小程序的UI设计

最新推荐文章于 2025-07-15 15:49:38 发布

Endone1314

最新推荐文章于 2025-07-15 15:49:38 发布

阅读量7.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序开发

本文链接：https://blog.youkuaiyun.com/qq_36038258/article/details/81102790

本文介绍了微信小程序的UI设计，包括XML组件如view、scroll-view、checkbox、input等的使用，以及wxss中的Flex布局、尺寸单位、选择器和CSS命令。此外，还讲解了JS如何绑定事件实现交互，如bindtap事件和setData方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档：
w3cschool:https://www.w3cschool.cn/weixinapp/vuis1q9m.html
csdnblog对盒子的介绍:https://www.cnblogs.com/dragondean/p/5922740.html
微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/

1xml组件介绍
view，scroll-view（滚动框），checkbox（多项选择器），input（输入框），form，radio（单项选择器），slider（滑动选择器），label（标签），navigator(导航,应用内跳转)，swiper（滑动框,一个页面只能有一个），多媒体audio,image,video，客服电话contact-button，

所有组件都拥有的属性：id,class,style,hidden,data-*（组件上触发事件时，会发送给时间处理函数的属性bind*/catch*，*为事件类型名称）

image

image的参数：mode调整图片规格
图片路径的定义，首先知道正在编辑的页面的路径。
../代表上一级
../../img/ 相对路径
/img/pic.jpg 首先返回工程的整个文件夹，然后找img文件夹

wxml功能，数据绑定，<view>{ {name}}</view> 和pages({data{ name:James})结合

2wxss的表现方法

显示方法：

1、wxml文件中的<wxs>标签内
2、.wxs后缀的文件里

其中，