AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

微信小程序学习笔记(2) -- 逻辑层事件、常用组件

2022-10-19 150
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序学习笔记(2) -- 逻辑层事件、常用组件

逻辑层

逻辑层 事件处理


1： 事件的基本使用 bind[xxx] catch[xxx]


2: 小程序中事件冒泡和HTML中处理起来不一样，这里是使用catch[xxx]


3: 如果需要给事件处理函数指定参数 只能通过dataset


下面分别来说明:


bindtap


基本的事件使用 就是给组件加一个bind+事件名的属性，属性的值指向一个定义在当前页面对象中的一个function.


<!--index.wxml-->
<view class="container">
    <button bindtap="buttonTapHandler">点我</button>
</view>


//index.js
//获取应用实例
const app = getApp()
Page({
  buttonTapHandler:function(e){
    console.log(123);
    //console.dir() 将一个对象以树状的形式打印到控制台
    console.dir(e)
  }
})


效果:


1dc618a0ed9580ce8bfa6facb208c08f.png


冒泡


catch+ 事件名: 是阻止冒泡并绑定事件:


案例:


<!-- 事件冒泡 -->
 <!-- catch+ 事件名: 是阻止冒泡并绑定事件 -->
 <view bindtap="outterHandler" style="width:200px;height:200px;background-color:red"> 
     <view catchtap="innerHandler" style="width:100px;height:100px;background-color:blue"> </view>       
</view>


效果:


5d4c6812c8535adbb050f4ddf2e1bce8.png


点击 蓝色小方块，冒泡被阻止了–完美。


1dc618a0ed9580ce8bfa6facb208c08f.png


事件传参


如果需要给事件处理函数指定参数 只能通过dataset


5d4c6812c8535adbb050f4ddf2e1bce8.png


  

<!-- 事件传参 -->
    <button bindtap="tap2Handle" data-name="张三" data-age="13">点我</button>
     <button bindtap="tap2Handle" data-hello-world="张三">点我</button>


tap2Handle:function(e){
    // console.dir(e)
    //dataset指的是元素上所有以data-开头的属性集合
    // console.log(this) //事件处理函数中的this还是页面对象!!!跟html不一样.
    console.log(e.target.dataset)
  }


演示效果:


1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png46a9d80a6e05e4e3b19d57a0ee70bcdf.png66ba272a0bfc97be54a5fa679e3d5482.png


注意: 多个“ - ” 的问题， 会自动转成驼峰的属性。


单向逻辑流


小程序没有双向数据绑定。


this.setData 是用来改变data中的数据

它与直接赋值区别在于setData可以通知界面做出变化

直接赋值没有办法实现这一点（早期的js）


解决是:setData.


案例如下:


<!--index.wxml-->
<view class="container">
    <input value="{{ message }}" bindinput="inputHandler"/>
    <text>{{ message }}</text>
</view>


//index.js
//获取应用实例
const app = getApp()
Page({
  data:{
      demo: '123',
      message: 'initial'
  },
  inputHandler: function(e){
      // console.log(123);
      // console.log(e.target);
      // console.log(e);
      // console.log(e.detail.value);
      // this.data.message = e.detail.value;
      // console.log(this.data.message);
      this.setData({
        message: e.detail.value
      });
      // this.setData 是用来改变data中的数据
      // 它与直接赋值区别在于setData可以通知界面做出变化
      // 直接赋值没有办法实现这一点（早期的js）
      console.log(this.data.message);
  }
})


页面

1dc618a0ed9580ce8bfa6facb208c08f.png

打印显示:

5d4c6812c8535adbb050f4ddf2e1bce8.png


总结:


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


通过这种setData方式，让逻辑层的数据传递到页面层。


页面层的数据传递到逻辑层则是 通过 事件方式。


登录案例


<!--index.wxml-->
<view class="container">
  <view class="userinfo">
   <view>
    <input  placeholder="请输入用户名" value="{{ username }}" bindinput="usernameChangeHandler"/>
   </view>
    <view class="padding-b-20">
       <input  placeholder="请输入密码" value="{{ password }}" bindinput="passwordChangeHandler" />
    </view>    
    <view>
     <button bindtap="loginHandler">登 录</button>
    </view>
  </view>
</view>


/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
input{
  border-bottom: 1px solid #CCC;
}
.padding-b-20 {
  padding-bottom: 20px;
}
button{
  background-color: green;
  color: #FFF;
  font-weight: normal;
}


//index.js
/*
 *  1.设计数据的结构(data属性)
    2.将数据绑定到特定的元素上
    3.登录按钮的点击事件（具体的登录逻辑）
    4.
 */
Page({
  data: {
    username: 'admin',
    password: '123'
  },
  usernameChangeHandler: function(e){
   // this.data.username = e.detail.value; //不要使用这种方式，因为界面层无法判断
    this.setData({
      username: e.detail.value
    });
  },
  passwordChangeHandler: function(e){
    // this.data.password = e.detail.value; //不要使用这种方式，因为界面层无法判断
    this.setData({
      password: e.detail.value
    });
  },
  //用于处理登录按钮点击事件
  loginHandler: function(){
    //TODO :完成逻辑
    //1. 先需要知道用户输入了什么
    console.log(this.data)
    //2. 根据用户输入的值判断
    //3. 根据判断的结果做出响应
  },
})


演示效果:

1dc618a0ed9580ce8bfa6facb208c08f.png


看下控制台，是否接收到页面的数据

5d4c6812c8535adbb050f4ddf2e1bce8.png


界面层的条件渲染


wx:if


当条件为假得时候是不渲染(这个标签不工作)，为真才渲染


hidden


标签仍然会工作，只是不显示在界面上


案例:


<!--index.wxml-->
<view class="container">
  <view class="item">
    <view class="title" bindtap="toggle">
      <text>切换面板展示</text>
    </view>
    <!-- block 只是控制属性(wx:)的载体，页面渲染过程中没有实际的意义 -->
      <block wx:if="{{ !show }}">
          <!-- <view class="content">
              <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
          </view>
          <view class="content" >
              <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
          </view> -->
       </block>
        <!-- wx:if 当条件为假得时候是不渲染(这个标签不工作) -->
        <view class="content" wx:if="{{ !show }}">
              <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
          </view> 
          -----
       <!-- hidden 标签仍然会工作，只是不显示在界面上  -->
       <view class="content" hidden="{{ !show }}">
        <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
       </view>
  </view>
</view>


//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    show: false  
  },
  //事件处理函数
  toggle: function(e){ 
    this.setData({
      show: !this.data.show
    });
  }
})


效果:


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png


block

 

<!-- block 只是控制属性(wx:)的载体，页面渲染过程中没有实际的意义 -->
      <block wx:if="{{ !show }}">
          <view class="content">
              <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
          </view>
          <view class="content" >
              <text>
                这里是内容....
                  这里是内容....
                    这里是内容....
              </text>
          </view>
       </block>


wxss和css的区别


rpt的单位，750rpt代表宽度100%

@import引入其他的样式。但是只是加载一次。css会发起多个请求。


微信ui组件

icon组件


<!--index.wxml-->
<view class="container">
<!-- icon text process-->
<!-- icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear -->
  <!-- type用于定义图标类型，只能是规定范围的类型， 除了这些内置图标，其他图标必须通过图片方式使用 -->
  <icon type="success"></icon>
  <icon type="success_no_circle"></icon>
    <icon type="info"></icon>
    <icon type="warn"></icon>
    <icon type="waiting"></icon>
    <icon type="cancel"></icon>
    <icon type="download"></icon>
     <icon type="search"></icon>
      <icon type="clear"></icon>
      <!-- size用于指定图标大小， 默认23，单位是px -->
      <icon type="success" size="60"></icon>
      <!-- color用于指定图标颜色，取值就是css颜色取值 -->
       <icon type="info" size="60" color="red"></icon>
</view>

1dc618a0ed9580ce8bfa6facb208c08f.png


text组件


<!-- text类似于html中的p标签，但是p标签不能嵌套 -->
<!-- text主要是为了可以很好的控制页面的内容 -->
<!-- text标签还支持换行 -->
<text>这是一段<text>文本</text>标签</text>
这是一段没有被text包裹的文本

1dc618a0ed9580ce8bfa6facb208c08f.png


progress 进度条


<!-- 显示一个进度条 percent是0-100的值-->
  <!-- show-info是用来控制是否显示具体数值的属性 -->
  <progress percent="20" show-info="true" stroke-width="10" />
  <!-- active显示从左到右的动画 -->
   <progress percent="30" show-info="true"  active="true"/>

1dc618a0ed9580ce8bfa6facb208c08f.png



表单组件


button


<!--index.wxml-->
<view class="container">
<!-- type是用来控制按钮的类型，只有三种，primary，default，warn -->
<button type="default">这是一个按钮</button>
<!-- size控制大小 -->
<button type="warn" size="mini">这是一个按钮</button>
<!-- plain 镂空 -->
<button type="primary" plain>这是一个按钮</button>
<!-- loading 加载，前面会有个转圈的菊花 -->
<button type="warn" loading>这是一个按钮</button>
<!-- form-type  submit提交表单 reset重置-->
<button type="warn" form-type="submit">这是一个按钮</button>
<!-- hover指的是按下，hover-class指的就是按下过后的作用class -->
<button hover-class="btn-active">hover class</button>
</view>


/**index.wxss**/
.btn-active{
  background-color: red;
}


radio


<radio-group bindchange="bindchangeHandle">
    <radio value="male" color="red">
        男
    </radio>   
      <radio  value="female" >
        女
    </radio>      
</radio-group>
<view>您选中的是： {{gender}}</view>


/**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  bindchangeHandle: function(e) {
    console.log(e);
    console.log( e.detail.value);
    let gender =  e.detail.value
    this.setData({
      gender
    });
  },

1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png


checkbox


//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ]
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false
      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }
    this.setData({
      items
    })
  }
})


<!--index.wxml-->
<view class="container">
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
</checkbox-group>
</view>


效果:


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png


input
<!--index.wxml-->
<view class="container">
    <input class="input1"  placeholder-class="input-placeholder" placeholder="请输入"/>
</view>


.input1{
  border: 1px solid #c0c0c0;
}
.input-placeholder {
  color: red;
}

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

操作反馈组件

action-sheet


https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html


//index.js
//获取应用实例
const app = getApp()
Page({
    data: {
    },
    btnToDo: function(){
      //当点击按钮触发
      // console.log(111)
      //交互操作组件必须通过调用API的方式使用
      // https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html
      wx.showActionSheet({
        //显示出来的项目列表
        itemList: ['java', '大数据', '小程序','APP'],
        //点击其中任一项的回调
        success (res) {
          //res.cancel 指的是否点击取消
          if(!res.cancel){
            console.log(res.tapIndex)
          }         
        },
        fail (res) {
          console.log(res.errMsg)
        }
      })      
    }
})


效果:


1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png


model 模态框

  

wx.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


toast

 

wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })


1dc618a0ed9580ce8bfa6facb208c08f.png

点击


5d4c6812c8535adbb050f4ddf2e1bce8.png


 

wx.showToast({
        title: '加载中',
        // icon: 'success',
        icon: 'loading',
        duration: 2000
      })


总结


组件的基本用法：


语法问题:


组件的使用类似于html的方式（有不同），组件使用的严格的XML标准(开闭标签问题)


组件的分类


功能性的组件

完成具体功能的

布局类型的组件

用来完成页面结构的(DIV)

API类型(使用的角度)

wx.showModel

wx.showActionSheet

wx.showToast


完


文章标签：
JavaScript
前端开发
API
数据格式
XML
小程序
关键词：
微信小程序组件
微信组件
微信小程序事件
微信事件
微信小程序学习笔记
怒放de生命
目录
相关文章
chnjames
|
29天前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
57 1
微信小程序：轻松实现时间轴组件
邹荣乐
|
28天前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
367 1
chnjames
|
29天前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
56 0
微信小程序：自定义关注公众号组件样式
邹荣乐
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
51 1
邹荣乐
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
173 1
邹荣乐
|
28天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
423 7
邹荣乐
|
28天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
482 1
yuanzhengme
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么？
微信小程序的开发完整流程是什么？
yuanzhengme
110 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
77 6
众所周知
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展，微信小程序凭借便捷的用户体验和强大的社交传播能力，成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制，包括手机号码验证、微信登录、第三方登录及角色权限控制等方法，并强调了安全性、用户体验和合规性的重要性，帮助开发者更好地理解和应用这一关键技术。
众所周知
60 5

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    微信小程序开发— 图片显示错误：VM24966:2
  • 3
    微信小程序scroll-view组件设置 scroll-top无效问题解决
  • 4
    【微信小程序】页面tabBar切换、下拉刷新
  • 5
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 6
    微信小程序：获取不限制的小程序码后端Java实现
  • 7
    微信小程序 安装依赖 vant
  • 8
    Java微信小程序开发_00_资源帖
  • 9
    基于微信小程序的小说阅读系统+vue.js附带文章和源代码设计说明文档ppt
  • 10
    微信小程序云开发数据库操作二查询记录
  • 1
    基于微信小程序餐厅点餐系统设计与实现(源码+lw+部署文档+讲解等)
    201
  • 2
    基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
    129
  • 3
    基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    89
  • 4
    基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    81
  • 5
    基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    53
  • 6
    基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    41
  • 7
    基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    41
  • 8
    【微信小程序】 微信小程序报错不在以下request合法域名列表中
    910
  • 9
    基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    47
  • 10
    基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    49

    • 相关课程

    更多
  • IoT小程序框架课程
  • 零基础学前端HTML+CSS
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-小程序》
  • 数字乡村建设方案

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 1分钟SAE部署PHP商城小程序
  • 前端开发基础2：VS Code和Edge的联动开发
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    阿里云OSS设置跨域访问