微信小程序-常用小程序组件

简介: 微信小程序-常用小程序组件

常用小程序组件


1、组件介绍

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间。


2、swiper组件

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

案例:使用swiper展示轮播图

逻辑层定义数据

data: {
 background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"
        ]
},

图片采用image组件进行展示,其支持对图片进行缩放、裁剪处理。关于image组件的信息,可以访问文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html


实际在wxml中展示

<view>
  <swiper indicator-dots indicator-color="rgba(52, 155, 252,1)" autoplay>
  <swiper-item wx:for="{{background}}" wx:key="index">
   <image src="{{item}}" style="width: 100%; height: 100%;"></image>
  </swiper-item>
  </swiper>
</view>

在设计图片的时候,一定要和设计人员对接好图片的合适尺寸比例。


3、表单组件

小程序项目中但凡是涉及到表单的地方,都需要使用表单组件。表单组件的作用就是用于组成表单的。

注意点:

  • 这里面表单组件部分的标签继续沿用html的标签,与之前完全同名
  • 组件标签的部分属性也与之前html属性一致,但是更多的是不一致的


文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<!-- 表单 -->
  <!-- 移动端登录表单 -->
  <view class="login_form">
    <image src="/assets/icon/home-seleted.png"/>
    <input type="text" placeholder="用户名"/>
    <input type="password" placeholder="密码"/>
    <button type="primary">登录</button>
    <view class="login_button" hover-class="active">
      view登录
    </view>
  </view>


wxss

/* pages/list/list.wxss */
input{
  border-bottom:1px solid gray;
  height: 120rpx;
  width: 600rpx;
}
.login_form{
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
button{
  margin-top: 30rpx;
}
image{
  width: 120rpx;
  height: 120rpx;
}
.login_button{
  margin-top: 30rpx;
  background-color: cadetblue;
  color: white;
  width: 430rpx;
  height: 100rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 100rpx;
  font-weight: bold;
}
.active{
  /* 透明度 */
  opacity: 0.7;
}


按钮button组件有一个非常实用的属性open-type,后续可以通过该属性赋予按钮高级的功能(微信开放能力),例如:

  • 获取用户信息的时候
  • 唤起其他App的时候
  • 不是任意app都可以唤起,只能唤起来源app
  • 获取用户手机号
<!-- button open-type属性的多种功能 -->
    <button type="default" open-type="chooseAvatar" bindchooseavatar="getAvatar">测试按钮</button>


目录
打赏
0
0
0
0
1
分享
相关文章
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
505 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
130 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
307 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
234 3
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
1462 12
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
234 1
微信小程序:轻松实现时间轴组件
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
161 0
在线课堂+工具组件小程序uniapp移动端源码
|
9月前
|
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1711 1
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
294 0
微信小程序:自定义关注公众号组件样式

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问