微信小程序组件基础

最新推荐文章于 2023-09-13 17:05:26 发布

红枣泡枸杞

最新推荐文章于 2023-09-13 17:05:26 发布

阅读量142

点赞数

分类专栏：小程序前端文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_56481596/article/details/117370282

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

小程序中常用的组件

组件是可复用的软件模块
组件是用来封装页面中某一部分功能的,例如:轮播图组件/底部tabBar组件/业务组件
多个组件的灵活组合可以实现不同的页面功能展示

小程序常用的组件

view 组件

<!-- 视图容器 -->
<!-- view -->
<view class="skyblue" hover-class="font" hover-start-time="5000" hover-stay-time="5000">
Hello World!
</view>

好比如 div
在这里插入图片描述

text组件

<!-- 基础内容 -->
<!-- text -->
<text decode="true">123&nbsp;</text><text>&nbsp;456</text>
decode 表示是对内容进行解码

好比如 span

button 组件

<!-- button 的基本使用 -->
<button type="primary">primay</button>
<button type="primary" loading="true">primay</button>
<button type="primary" disabled="true">primay</button>

<button type="default">default</button>
<button type="default" loading="true">default</button>
<button type="default" disabled="true" >default</button>

<button type="warn" size="mini" >warn</button>

<!-- 利用button的开放能力 获取用户的信息 -->
<!-- a.1. 定义一个 button -->
<!-- a.2 给按钮 添加一个属性 open-type="getUserInfo" -->
<!-- a.3 定义一个开放能力响应的事件
     添加一个属性 bindgetuserinfo="处理函数"
     例如 
     bindgetuserinfo="handleUserInfo"
 -->

<!-- 利用 button 开放能力 share 转发页面 -->
<button type="default" open-type="share">转发页面</button>
<!-- 开放能力  openSetting 打开系统的设置页面 -->
<button type="warn" open-type="openSetting">打开系统设置页面</button>
<!-- 开放能力 contact -->
<button type="primary" open-type="contact">系统客服</button>

<button type="primary" open-type="getUserInfo"   bindgetuserinfo="handleUserInfo">获取用户信息</button>

Page({
handleUserInfo: function (e) {
    // b.3 调用 wx.getUserProfile 获取用户的个人信息
    wx.getUserProfile({
      desc: '个人信息声明',
      /* b.4 定义成功之后的回调函数 */
      success:(res)=>{
        /* b.5 通过 res.userInfo 获取用户的个人信息 */
        console.log(res.userInfo);
      },
      fail:(err)=>{
        console.log(err);
      },
      complete:()=>{
        console.log("执行 getUserProfile结束了");
      }
    })
  
  },
})

在这里插入图片描述

<!--  
   需求：使用新的接口 wx.getUserProfile 获取用户的个人信息
  b.1 定义 button 
  b.2 button 定义 bindtap 的处理事件
   bindtap="handleUserInfo" 
-->
<button  bindtap="handleUserInfo">使用 getUserProfile获取用户的个人信息</button>


Page({
  handleUserInfo(e){
// 调用 wx.getUserProfile 获取用户的个人信息
wx.getUserProfile({
  desc: 'desc',
  // 定义成功之后的回调函数
  success:(res)=>{
    // 通过 res.userInfo 获取用户的个人信息
    console.log(res.userInfo);
  },
  fail:(err)=>{
    console.log(err);
  },
  complete:()=>{
    console.log("执行 getUserProfile结束");
  }
})
  },
  })

icon组件

<!-- icon 组件 -->
<icon type="success" size="30" color="red"></icon>
<icon type="success_no_circle"></icon>
<icon type="info"></icon>

在这里插入图片描述

swiper组件
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

<!-- 轮播图 -->
<swiper indicator-dots="true" autoplay="true" interval="5000">
<swiper-item wx:for="{{swiperData.message}}" wx:key="goods_id">
<image src="{{item.image_src}}"></image>
</swiper-item>
</swiper>

Page:({
 data: {
      swiperData: {
        "message": [{
          "image_src": "https://106.55.254.112/pyg/banner1.png",
          "open_type": "navigate",
          "goods_id": 129,
          "navigator_url": "/pages/goods_detail/main?goods_id=129"
        }, {
          "image_src": "https://106.55.254.112/pyg/banner2.png",
          "open_type": "navigate",
          "goods_id": 395,
          "navigator_url": "/pages/goods_detail/main?goods_id=395"
        }, {
          "image_src": "https://106.55.254.112/pyg/banner3.png",
          "open_type": "navigate",
          "goods_id": 38,
          "navigator_url": "/pages/goods_detail/main?goods_id=38"
        }],
        "meta": {
          "msg": "获取成功",
          "status": 200
        }
      }
},
})

navigator组件
页面跳转组件

<view>navigator组件的使用</view>
<!-- 
  navigator open-type
 - navigate 默认类型，跳转到非tabbar页面，同时保留之前所有页面
 - redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
 - switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
 - reLauch 关闭所有页面，打开到应用内的某个页面,可以跳转到 tabbar页面
 - navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
 -->
<navigator open-type="navigate" url="/pages/logs/logs">跳转到logs页面</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">跳转到logs页面(redirect)</navigator>
<navigator open-type="switchTab" url="/pages/test/test">跳转到test页面(switchTab)</navigator>
<navigator open-type="reLaunch" url="/pages/logs/logs">跳转到Logs页面（reLaunch）</navigator>
<!-- 需要在真机环境下运行 -->
<navigator open-type="exit" target="miniProgram">退出当前小程序</navigator>

在这里插入图片描述

image组件

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。
Image 组件缩放模式

scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 6 9 种裁剪模式
具体了解可到官网
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<!-- 1. scaleToFill -->
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill"
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<!-- 2  aspectFit -->
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit"
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<!-- 3  aspectFit -->
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFill"
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<!-- 4. widthFix -->
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="widthFix"
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<!-- 5. heightFix -->
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="heightFix"
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>

radio组件
单选项目。
radio-group 组件
单项选择器，内部由多个 radio 组成。

<!-- radio 组件 
raido 要和 radio-group 配合一起使用
https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
-->
<label>
  <radio value="r" checked="true"></radio> 选中
</label>
<label>
  <radio value="v" checked="{{false}}"></radio>未选中
</label>
<!-- 1. 绑定 bindchange事件 在 radio-group上面 
bindchange="handleRadioChange"
-->
<radio-group bindchange="handleRadioChange">
  <label>
    <radio value="usa"></radio>美国
  </label>
  <label>
    <radio value="cn"></radio>中国
  </label>
  <label>
    <radio value="japan"></radio>日本
  </label>
</radio-group>

  // radio 单选框
  handleRadioChange(e){
		console.log(e);
		console.log(e.detail.value);
  },

checkbox组件
复选项目
checkbox-group 组件
多项选择器,内部有多个checkbox组成

<!-- checkbox 使用 -->
<checkbox-group bindchange="handleCheckBoxChange">
  <label >
    <checkbox value="cn"></checkbox>中国
  </label>
  <label >
    <checkbox value="usa"></checkbox>美国
  </label>
  <label >
    <checkbox value="jp"></checkbox>日本
  </label>
</checkbox-group>

  // CheckBox多选框
  handleCheckboxChange(e){
	console.log(e.detail);
  },

input组件
输入框

<input type="text" bindinput="handleInput"></input>

  /* input 输入处理函数 */
  handleInput:function(e){
    console.log(e.detail.value);
  },

微信小程序事件处理

普通事件绑定
语法:bind+事件名称=“处理事件” 或者 bind:事件名称="处理事件函数"
绑定并阻止事件冒泡
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

<!-- 小程序中的事件处理 -->
<view bindtap="handleTap">点击我啊</view>
<view bind:tap="handleTap">点击我啊冒号</view>

<!-- 小程序中冒泡 -->
<view bindtap="handleTap">
  <view catchtap="handleTap">子盒子点击我啊</view>
</view>

<!-- 小程序中的参数传递 
  data 属性传参
  data-id = "3"
-->
<view bindtap="handleTap" data-id="3">
  小程序中的参数传递
</view>

 /* tap 处理函数 */
  handleTap:function(e){
    // e.stopPropagation();
    // 获取参数 e.target.dataset
    console.log(e.target.dataset);
    console.log(e);
  },

红枣泡枸杞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序组件基础

小程序中常用的组件组件是可复用的软件模块组件是用来封装页面中某一部分功能的,例如:轮播图组件/底部tabBar组件/业务组件多个组件的灵活组合可以实现不同的页面功能展示小程序常用的组件view 组件<view class="skyblue" hover-class="font" hover-start-time="5000" hover-stay-time="5000">Hello World!
复制链接

扫一扫