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

2021-05-28 20:59:30 阅读：186 来源： 互联网

标签：事件处理 goods console log wxml 文件程序组件

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

小程序组件介绍

组件是可复用的软甲模块
组件是用来封装页面中的某一部分功能的，例如：轮播图组件，底部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);
  }

标签：事件处理,goods,console,log,wxml,文件,程序,组件
来源： https://blog.csdn.net/weixin_48554873/article/details/117370326

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

小程序组件介绍

小程序中常用的组件

小程序事件处理