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

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

2022-10-19 205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序学习笔记(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生命
目录
相关文章
探索云世界动手实践
|
7月前
|
小程序
微信小程序数据绑定与事件处理：打造动态交互体验
在上一篇中，我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制，通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法，实现页面与逻辑层数据的动态关联；事件处理则通过`bind`或`catch`前缀响应用户操作。最后，通过一个简单的计数器案例，巩固所学知识。掌握这些核心技能，将助你开发更复杂的小程序。
探索云世界动手实践
250 0
chnjames
|
11月前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
385 1
微信小程序：轻松实现时间轴组件
疯狂的猿
|
10月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
疯狂的猿
196 0
在线课堂+工具组件小程序uniapp移动端源码
邹荣乐
|
11月前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
1894 1
chnjames
|
11月前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
468 0
微信小程序：自定义关注公众号组件样式
多客LIJIE
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新，将代练、家政、娱乐社交等场景融合，打造“全能型生活服务生态圈”。以代练为切入点，提供模块化代码支持快速搭建平台，结合智能匹配与技能审核机制，拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性，支持多业务复用，如押金冻结、录屏监控等功能跨领域应用。商业模式多元，包括交易抽成、增值服务及广告联名，同时设计跨领域积分体系提升用户粘性，实现生态共生与B端赋能。
多客LIJIE
415 14
疯狂的猿
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
疯狂的猿
271 0
邹荣乐
|
11月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
1714 3
千寻简
|
11月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中，版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新，提示用户并提供立即更新选项，自动下载更新内容，并在更新完成后重启小程序以应用新版本。适用于微信小程序，确保用户始终使用最新版本。以下是实现步骤： ### 实现步骤 1. **创建更新方法**：在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**：添加编译模式并选择成功状态进行模拟测试。
千寻简
279 0
微信小程序更新提醒uniapp
胡东旭
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
285 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章

  • 1
    微信多开脚本，微信双开器脚本插件，autojs开源代码分享
  • 2
    应对频率限制：设计智能延迟的微信读书Python爬虫
  • 3
    微信wxid二维码生成器， 微转码工具wxid转二维码，wxid加好友工具分享
  • 4
    微信抢红包脚本安卓插件，微信xposed抢红包模块， magisk微信抢红包模块
  • 5
    怎么通过链接跳转加微信好友
  • 6
    微信红包秒抢神器下载软件真的有用吗？
  • 7
    手机一键导出微信群成员名单工具，微信群WXID微信号导出软件，批量导出群成员工具
  • 8
    企业微信自动加好友软件，导入手机号批量添加微信好友，python版本源码分享
  • 9
    为什么微信发送的APP安装不了，.apk转化为.apk.1
  • 10
    微信批量导出群成员群昵称工具，导出WXID微信号信息，微信群成员导出脚本插件
  • 1
    小程序页面之间（传值）传递数据的方法
    404
  • 2
    园区导航小程序：轻量级设计，打造高效智慧园区
    378
  • 3
    开发H5程序或者小程序的时候，后端Web API项目在IISExpress调试中使用IP地址，便于开发调试
    205
  • 4
    消息队列 MQ使用问题之如何在小程序中引用paho-mqtt
    144
  • 5
    印刷文字识别操作报错合集之微信小程序调用API时路径总是返回不对，该如何处理
    302
  • 6
    拉货搬家服务小程序如何开发？拉货搬家服务小程序制作流程
    234
  • 7
    小程序优化：第三方SDK过大解决方案
    505
  • 8
    uni-app（五）小程序的一些注意事项，踩坑
    235
  • 9
    uni-app（四）小程序里的vuex
    338
  • 10
    微信小程序面试题来了
    199

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质