小程序基本组件以及事件处理

2022-10-14 20:38:20

小程序的常用组件以及基本使用

小程序组件介绍

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

小程序中常用的组件

view 视图容器

wxml文件
<!-- view  hover-class指定按下去的样式  默认值none-->
<view class="red" hover-class="big">view组件</view>
wxss文件
.red{
  color: red;
}
.big{
  font-size: 20px;
}

text 文本组件

wxml文件
<!-- text decode 解码  -->
<text decode="true">解码&nbsp;</text><text>没有解码&nbsp;</text

button 按钮组件

<!-- button type 样式类型 loading 加载  disable 禁用  size 按钮大小  以及开放能力-->
<button type="primary">primary背景</button>
<button type="primary" loading="true">加载中</button>
<button type="primary" disabled='true'>禁用</button>
<button type="default" >白色背景</button>
<button type="warn" size="mini" >小尺寸</button>

<!-- 
  button open-type 开放能力 getUserInfo 获取用户信息  bindgetUserInfo定义的函数方法
  getUserInfo 不支持新的版本
   -->
<button type="primary" open-type="getUserInfo" 
bindgetuserinfo="handlegetUserInfo">获取用户信息</button>

<!-- 解决getUserInfo不支持新的版本的使用 官方更新提高了新的接口 
getUserProfile要在方法里面调用这个接口
-->
<button bindtap="handlegetProfile">getProfile获取用户信息</button>

<!-- 转发能力 share -->
<button type="primary" open-type="share">转发页面</button>
<!-- 打开授权设置页 openSetting -->
<button open-type="openSetting">打开授权页面</button>
<!-- 客服会话 contact -->
<button open-type="contact">联系客服</button>

js文件
// 定义方法  getUserInfo
  handlegetUserInfo:function(e){
    console.log(e);
    console.log(e.detail.userInfo);
  },
  // getUserProfile
  handlegetProfile:function(e){
    console.log(e);
    wx.getUserProfile({
    // 获取用户信息的说明
      desc: 'desc',
      // 成功执行的回调
      success:(res)=>{
        console.log(res.userInfo);
      },
      // 失败执行的回调
      fail:(err)=>{
        console.log(err);
      },
      // 成功或者失败都会执行的回调
      complete:()=>{
        console.log('我执行了');
      }
    })
  },

icon图标组件

<!-- icon 组件  类型type size大小  color字体颜色 -->
<!-- icon的类型，有效值：success, success_no_circle, info, warn,
 waiting, cancel, download, search, clear -->
<icon type="success" size="30" color="red"></icon>

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

wxml文件
<!-- swiper组件 
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
image 默认宽度 320 240
indicator-dots 显示指示点
indicator-color 指示点颜色
indicator-active-color 当前选中的指示点颜色
 -->
<swiper indicator-dots="true" indicator-color="red" 
indicator-active-color="blue">
  <swiper-item wx:for="{{message}}" wx:key="goods_id">
      <image src="{{item.image_src}}"></image>
  </swiper-item>
</swiper>

js文件
 data: {
    "message":[
      {
        "image_src":"图片地址",
        "open_type":"navigate",
        "goods_id":129,
        "navigator_url":"/pages/goods_detail/main?goods_id=129"},
      {
        "image_src":"图片地址",
        "open_type":"navigate",
        "goods_id":395,
        "navigator_url":"/pages/goods_detail/main?goods_id=395"},
      {
        "image_src":"图片地址",
        "open_type":"navigate",
        "goods_id":38,
        "navigator_url":"/pages/goods_detail/main?goods_id=38"}]
  },

input输入框

wxml文件
<!-- input 组件
bindinput="handleInput" 输入框发生变化时触发
-->
<view>
 <input placeholder='请输入' bindinput="handleInput"></input>
</view>

js文件
// 得到输入框的值
 handleInput:function(e){
   console.log(e.detail.value);
 }

navigator页面跳转组件

<!-- navigator 跳转组件 -->
<!-- navigate 默认类型  跳转到非tabbar页面，同时保留之前所有页面 -->
<navigator open-type="navigate" url="/pages/logs/logs">默认跳转(navigate)</navigator>
<!-- redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 -->
<navigator open-type="redirect" url="/pages/logs/logs">跳转到logs页面（redirect）</navigator>
<!-- switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 -->
<navigator open-type="switchTab" url="/pages/demo/demo">跳转到dome页面(switchTab)</navigator>
<!-- reLaunch 关闭所有页面，打开到应用内的某个页面 -->
<navigator open-type="reLaunch" url="/pages/logs/logs">跳转到logs页面（reLaunch）</navigator>
<!-- exit	退出小程序，target="miniProgram"时生效 -->
<navigator open-type="exit" target="miniProgram">退出小程序</navigator>

image

<!-- image 组件  
src 图片路径 mode 图片裁剪或者缩放模式 默认scaleToFill
 -->
 <!-- scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 -->
<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>
<!-- 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>
<!-- aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。
也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 -->
<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>
<!-- 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>
<!-- 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组成

wxml文件
<!-- radio 单选组件 checked是否选中 
bindchange="handleRadio"  radio-group中选中项发生改变时触发 change 事件
可以获取 选中的值
-->
<radio-group bindchange="handleRadio">
  <label>
    <radio value="basketball" checked="true"></radio>篮球  
  </label>
  <label>
    <radio value="football"></radio>足球  
  </label>
</radio-group>

js文件
  // 获取单选框选中的值
  handleRadio:(e)=>{
    console.log(e);
  }

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

wxml文件
<!-- checkbox 复选选组件 checked是否选中 
bindchange="handleCheckBox"  radio-group中选中项发生改变时触发 change 事件
可以获取 选中的值
-->
<checkbox-group bindchange="handleCheckBox">
  <label>
    <checkbox value="basketball" checked="true"></checkbox>篮球
    <checkbox value="football"></checkbox>足球
    <checkbox value="badminton"></checkbox>羽毛球
  </label>
</checkbox-group>

js文件
 // 获取复选框选中的值
  handleCheckBox:function(e){
    console.log(e.detail);
  }

小程序事件处理

普通事件绑定
语法：bind+事件名称=“处理事件函数” 或者 bind:事件名称=“处理事件函数”

wxml 文件
<!-- 普通绑定 bind+事件名称="处理事件函数" 或者 bind:事件名称="处理事件函数" -->
<view bindtap="handleTap">点击我触发事件</view>
<view bind:tap="handleTap">点击我触发事件(冒号)</view>

js文件
//普通绑定 事件处理
  handleTap:function(e){
    console.log(e);
  }

绑定并处理事件冒泡

wxml文件
<!-- 阻止事件冒泡  catch会阻止事件冒泡 -->
<view bindtap="handleTap">
  <view catchtap="handleTap">事件冒泡</view>
</view>

js文件
  handleTap:function(e){
    console.log(e);
  }

参数传递

wxml文件
<!-- 小程序中的参数传递  使用data传递-->
<view bindtap="handleTapID" data-id="1">获取参数</view>

js文件
 // 获取传递的的参数
  handleTapID:function(e){
    console.log(e.target.dataset);
  }

码农公寓

小程序的常用组件以及基本使用

小程序组件介绍

小程序中常用的组件

小程序事件处理

相关文章