【微信小程序】组件使用及属性参考

最新推荐文章于 2025-04-09 19:05:18 发布

额无语

最新推荐文章于 2025-04-09 19:05:18 发布

阅读量791

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67266585/article/details/126044858

版权

本文深入探讨微信小程序的开发，重点讲解视图容器组件（如view、scroll-view、movable-view、cover-view、swiper）和内容组件（如icon、progress、text）。通过实例解析各组件属性，包括导航组件navigator和小程序UI框架WeUI、iView、Vant Weapp的使用。

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

小程序组件微信小程序的开发实际上也是前端开发的一种。我们想要开发一个前端程序，首先要做的就是创建美观的页面，然后处理好业务代码。在用户眼中首先会看到的是页面，而不会关心代码的实现，所以在学习前端开发时通常都是先从HTML、CSS入手，再去学习JavaScript。所以，本章先进行小程序组件的讲解。掌握了视图容器组件、内容组件，并学会使用导航组件进行跳转后，我们就可以开始搭建各种页面了。

本章主要涉及的知识点有：

视图容器组件
内容组件
导航组件
小程序UI框架

3.1　视图容器组件

视图容器组件的主要作用就是“容器”，与按钮、文字、进度条等组件不同，它主要由普通视图、滑动视图、拖动视图等构成，就像我们在画图时的一个个背景画布。

3.1.1　视图容器view

view是最基本的视图容器，与前端的div标签比较类似，自身没有任何大小颜色属性，通常作为一个基本容器存在。view的自带属性如表3.1所示。

【示例3-1】

（1）新建一个项目components，用于本节的代码展示。（2）清空index.wxml和index.js的代码，并输入以下代码：

//index.wxml
<view>小程序视图组件测试</view>

<button
style="margin-top:15px"
bindtap="testView">view</button>

<button
style="margin-top:15px"
bindtap="testScrollView">scroll-view</button>

<button
style="margin-top:15px"
bindtap="testMovableView">movable-view</button>

<button
style="margin-top:15px"
bindtap="testCoverView">cover-view</button>

<button
style="margin-top:15px"
bindtap="testSwiper">swiper</button>


//index.wxss
view{
margin:16px;
 }

//index.js
testview(){
    wx.navigateTo({
    url:'../view/view',})},
    testscrollView(){ wx.navigateTo({
    url:'../scroll-view/scroll-view'})
    
    testMovableView(){
    wx.navigateTo({
    url:'../movable-view/movable-view',})},
    testCoverView(){ wx.navigateTo({
    url:'../cover-view/cover-view',})},
    testSwiper(){ wx.navigateTo({
    url:'../swiper/swiper',})}}
    ...

（3）运行代码，首页效果如下图所示。在接下来的小节里，我们将通过点击不同