微信小程序学习:组件学习

Posted 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序学习:组件学习相关的知识，希望对你有一定的参考价值。

微信小程序学习(2):组件

文章目录

一.组件基本概念

1.引入

  • 使用VX小程序提供的基本组件可实现页面的快速开发

  • VX提供了 视图容器组件、基础内容组件、表单组件、操作反馈组件、导航组件、媒体组件、地图组件、画布组件等

  • 组件是VX小程序中视图层(UI)的基本组成单元

    • 是VX开发框架对html5元素的封装

      • 如：view组件与HTML中的div标签相似

        • 还是看之前创建的那个helloworld

          我在wxml里面添加一个div

        但是选择器不支持

    • 不建议这种替换

      VX小程序框架并不完全兼容HTML标签

2.组件的通用属性

①id

  • String类型

  • HTML中,js通过id属性获取组件的DOM对象，然后对该对象的数据、样式进行操控

  • 在VX小程序中，由于VX小程序开发框架提供了动态数据绑定技术，所以较少使用id

②class

  • String类型
  • 设置组件的样式类
  • 若与动态数据绑定相结合，则组件的class也具有动态变换能力

③style

  • String类型
  • 可设置组件内联样式
  • 若与动态数据绑定相结合，则组件的style也具有动态变换能力

④hidden

  • Boolean类型
    • 是一个逻辑值
  • 用于决定组件是否显示
  • 值默认为false
    • 即组件默认为显示状态

⑤data-*属性

  • 可为任何类型

  • 可用来为组件设定任意的自己定义属性值

  • 组件绑定的事件触发时，这些自定义属性将作为参数发送给事件处理函数

    在事件处理函数中可通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值

    • 如：

      <view>Hello World!</view>
<view class="usermotto" bindtap="bindCustomTap" data-test="test1" data-spark="spark">1111</view>

      Page(
    data:,
   
    bindCustomTap:function(e)
        console.log(e);
        

)

    • 这时，我点击view组件对应的1111时

      ​ 控制台会显示参数e的属性对象currentTarget.dataset的2个属性spark和test

⑥bind*/catch*属性

  • 用于为组件定义事件

  • bind无法阻止冒泡

    catch可阻止冒泡

二.通过一个计算器来学组件

1.view组件

  • view是个容器组件

    • 容器组件，即可以放置其他组件

    • 来个示例

      <view class="page">
    <view class="page_hd">
        <text class="page_title">嘿嘿</text>
    </view>
    <view class="page_bd">
        <view class="section">
            <view class="secton_title">flex-direction:row</view>
            <view class="flex-wrp" style="flex-direction: row">
                <view class="flex-item bc_green">1</view>
                <view class="flex-item bc_red">2</view>
                <view class="flex-item bc_blue">3</view>
            </view>
        </view>

        <view class="section">
             <view class="secton_title">flex-direction:column</view>
                <view class="flex-wrp" style="height:300px;flex-direction: column">
                    <view class="flex-item bc_green">1</view>
                    <view class="flex-item bc_red">2</view>
                    <view class="flex-item bc_blue">3</view>
                </view>
        </view>
    </view>

    
</view>

      page
    background-color: #fbf9fe;
    height: 100%;


.page_hd
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;

.page_title
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: blue;
    border-bottom:1px solid orange;


.section
    margin-bottom: 180rpx;
   

.section_title
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;

.flex-wrp
    /* width: 100px; */
    height:100px;
    display:flex;
    
    background-color: #FFFFFF;

.flex_item
    height: 100px;
    width: 100px;
    color:#FFFFFF;
    display: flex;
    justify-content: center;
    align-items:center;


.bc_green
    background-color: #09BB07;

.bc_red
    background-color: #F76260;

.bc_blue
    background-color: #10AEFF;

      ​ display：flex是弹性布局

      • flex布局:[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%KaTeX parse error: Expected group after '^' at position 60: …x-grammar.html?^̲%)

    • 效果

2.input组件

  • 用于接收用户输入

常用属性：

value
  • 输入框的初始值
  • 可以动态数据绑定 ，随data中绑定变量值变化
password属性
  • 设置是否显示为密码框
  • 逻辑类型Boolean
    • 默认false
placeholder属性
  • 提示信息
disabled
  • 设置输入框是否禁用
  • Boolean类型
    • 默认false（不禁用）
maxlength属性
  • 设置输入框可输入字符的最大长度
  • 为0则不限制长度
bindchange属性
  • 事件绑定
  • 触发bindchange事件时,传入event作为参数
    • event.detail.value中将包含输入框中输入的值

3.button组件

  • 建一个btn页面来看一看

    • btn.wxml

      <view class="container">
    <button type="default" size="defaultSize" loading="loading" plain="plain" disabled="disabled" bindtap="default" hover-class="other-button-hover">default</button>

    <button type="primary" size="primarySize" loading="loading" plain="plain" disabled="disabled" bindtap="primary">primary</button>

    <button type="warn" size="warnSize" loading="loading" plain="plain" disabled="disabled" bindtap="warn">warn</button>

    <button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
    <button bindtap="setPlain">点击设置以上按钮plain属性</button>
    <button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>

    • btn.wxss

      .container
    align-items: flex-start;
    justify-content: flex-start;
    padding:0;
    margin:10rpx;


.container button
 widows: 95%;
 margin:10rpx;

    • btn.js

      Page(
    //设置初始值
    data:
        defaultSize:'default',
        primarySize:'default',
        warnSize:'default',
        disabled:false,
        plain:false,
        loading:false

    ,
	/*下面三个函数：当点下面三个按钮时,分别将对应的变量值取反,这3个变量通过动态数据绑定到前面3个按钮的对应属性上,从而控制按钮属性值动态变化*/
    setDisabled: function(e)
        this.setData(
            plain: !this.data.plain
        )
    ,

    setPlain: function(e)
        this.setData(
            plain: !this.data.plain
        )
    ,

    setLoading: function(e)
        this.setData(
            loading:!this.data.loading
        )
    ,
    /*下面三个函数用于处理前3个按钮的触按事件，分别切换按钮的size为defalut或mini*/

    default: function(e)
        var d = this.data.defaultSize === 'default'?'mini':'default';
        this.setData(
            defaultSize:d
        )
    ,

    primary:function(e)
        var d = this.data.primarySize === 'default'?'mini':'default';
        this.setData(
            primarySize:d
        )
    ,

    warn: function(e)
        var d = this.data.warnSize === 'default'?'mini':'default';
        this.setData(
            warnSize:d
        )
    

)

    • 初始状态与测试

4.先写一个只能实现加法运算的计算器

  • calculator.wxml

    <view class="container">
    <input placeholder="被加数" bindinput="bindInput1"/>
    <input placeholder="加数" bindinput="bindInput2"/>
    <button type="primary" bindtap="bindAdd">计算</button>
    <input placeholder="结果" value="result" disabled/>

</view>

  • calculator.wxss

    .container 
    justify-content: flex-start;
    padding : 30rpx 0;


.container input
    background-color: #eee;
    border-radius: 3px;
    text-align: left;
    width: 720rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin: 20rpx;


.container button
    width: 80%;

  • calculator.json

    
    "navigationBarBackgroundColor":"#00ff00",
    "navigationBarTitleText": "加法计算器",
    "navigationBarTextStyle": ""

  • calculator.js

    Page(
    data:
        num1:"",
        num2:"",
        result:""
    ,
    //"计算"按钮触发事件处理函数
    bindAdd:function(e)
        //需要用*1 来讲num1 和 num2 从字符串转换为数字
        var r =this.data.num1*1+this.data.num2*1;
        this.setData(
            result:r
        );
    ,
    //被加数输入事件处理函数
    bindInput1:function(e)
        var n = e.detail.value;
        if(!isNaN(n))
        
            this.setData(
                num1:n//更新被加数
            );
        
    ,
    //加数输入事件处理函数
    bindInput2:function(e)
        var n = e.detail.value;
        //额 之前写成了isNan
        //isNaN() 函数可确定值是否为非数字（Not-a-Number）
        //假如值是 NaN或者是一个非数字值（比如：字符串和对象）， 那么 isNaN 函数返回 true ，否则返回 false。
        //NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
        //NaN 即 not a number
        if(!isNaN(n))
            this.setData(
                num2:n//更新加数
            );
        
    
)

  • 效果测试

5.slider组件

滑动条组件 可以拖动该组件的滑块来设置值

简介

  • wxml

    <view class="content">
    <view class="section_title">被加数</view>
    <slider min="0" max="1000" bindchange="bindInput1" show-value/>

    <view class="section_title">加数</view>
    <slider min="0" max="1000" bindchange="bindInput2" show-value/>

    <button type="primary"  bindtap="bindAdd">计算</button>
    <view class="section_title">结果</view>
    <view> result</view>
</view>

  • wxss

    .content
    margin:40rpx;

.content button
    width:80%;



view
    margin: 40rpx 0;


slider
     margin: 80rpx;  
     block-size: 20;

  • 效果测试

6.完善计算器

①解决视图层

  • calc.wxss

    
/*外层容器*/
.content
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top:10rpx;

.screen
    background-color: #ffffff;
    width: 650rpx;
    height:150rpx;
    line-height: 150rpx;
    padding: 0 20rpx;
    margin: 30rpx;
    border: 1px solid #ddd;
    /*圆角边框*/
    border-radius: 10px;



/*按钮组*/
.btnGroup
    display: flex;
    flex-direction: row;

/*按钮*/
.item
    width: 160rpx;
    min-height: 150rpx;
    margin: 10rpx;
    text-shadow:0 1px 1px rgba(0,0,0,0.3);
    /* border: 1px solid #ddd; */
    border-radius: 10px;
    text-align: center;
    line-height: 150rpx;


.orange
    background-color: #f78d1d;
    color:#fef4e9;
    border:solid 1px #da7c0c;


.blue
    background-color: #0095cd;
    color:#d9eef7;
    border:solid 1px #0076a3;



/*数字按钮下按状态*/
.button-hover-num
    background-color: #0094cc;
    /* opacity 不透明度 */
    opacity: 0.7;


/*控制按钮下按状态*/
.other-button-hover
    background-color: red;

  • calc.wxml

    <view>
    <view class="screen">计算结果</view>
    <!--控制按钮 item orange
        数字按钮 item blue-->
    <view class="btnGroup">
        <button class="item orange" hover-class="other-button-hover">历史</button>
        <button class="item orange" hover-class="other-button-hover">C</button微信小程序学习笔记-2-常用组件介绍
    

     微信小程序生命周期学习笔记-组件
    

     微信小程序学习笔记五 常见组件
    

     微信小程序学习笔记
    

     微信小程序学习笔记——自定义组件步骤
    

     微信小程序文本组件text使用详解-微信小程序系统学习攻略