内置组件 -官方文档主要属性的抽取及实践（微信小程序）

常见内置组件的学习

小程序官方的内置组件是非常多的，可以直接移步官方给出的文档： https://developers.weixin.qq.com/miniprogram/dev/component/

  在这篇blog中总结了text、button、view、image、input、scroll-view这六个常见的微信小程序内置组件的常见属性，并且对这些属性都分别做了一个简单的实践。

1. Text组件

Text组件用于显示文本，类似于span标签，是行内元素（不独占一行，在同一行内显示）

（1）官方文档

  属性

  ① selectable：决定文本内容是否可以让用户选中
  ② space：有三个取值

  ③ decode：是否解码
   decode可以解析的有&nbsp；&lt；&gt；&amp；&apos；&ensp；&emsp；

（2）实践

 ① 基本使用

<text>Hello World\n</text>
<text>你好小程序\n</text>

 ② selectable:true 或只单写一个属性

<text>Hello World\n</text>
<!--默认情况下text中的文本长按是不能选中的-->
<text selectable="{{true}}">Hello dsy\n</text>
<text selectable>Hello dsy\n</text> 

 ③ space决定文本空格的大小

<text>Hello World\n</text>
<text>Hello World\n</text>
<text space="nbsp">Hello World\n</text>
<text space="emsp">Hello World\n</text> <!--一个中文字符的大小空格-->
<text space="ensp">Hello World\n</text> <!--半个中文字符的大小空格-->

 ④ decode属性：是否解码文本

<text>Hello World\n</text>
<text>5 &gt; 3 \n</text>
<text decode>5 &gt; 3 \n</text>

2. Button组件

Button组件用于创建按钮，默认块级元素

（1）官方文档

（2）实践

 ① 基本使用
  没有任何属性时，display:block 块级元素，独占一行

<button>按钮</button>

 ② size属性
  属性为mini时，display:inline-block 行内块级元素，不独占一行

<button size="mini">size="mini"</button>
<button size="mini">size="mini"</button>

 ③ type属性

<button size="mini" type="primary">type="primary"</button>
<button size="mini" type="default">type="default"</button>
<button size="mini" type="warn">type="warn"</button>

 ④ plain：镂空效果

<button size="mini" plain>plain</button>

 ⑤ disabled:不可用

<button size="mini" disabled>disabled</button>

 ⑥ loading

<button size="mini" loading="{{isloading}}">loading</button>

  同时在.js文件中：

Page({
  data: {
    isloading:true
  }
})

 ⑦ hover-class 点击按钮时的颜色设置

<button hover-class="pressed">hover-class</button>

  同时编写.wxss文件，设置点击按钮时的样式

.pressed{
  background: grey;
  color: white
}

3.View组件

• 视图组件（块级元素，独占一行，通常用作容器组件 ）
  很像html中的div

（1）官方文档

（2）实践

  ① 基本使用（独占一行）

<view class="box">哈哈哈</view>
<view>呵呵呵</view>

   设置样式

.box{
  background:pink
}

  ② 比较祖先节点是否出现点击态（hover-stop-propagation）
   hover-class:当用户按下组件时显示样式
   hover-stay-time:保留时间
   hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态

<view class="box2" hover-class="hover-view2">
  <view class="box1" 
      hover-class="hover-view"
      hover-stay-time="0"
      hover-stop-propagation="">
    祖先节点出现点击态
  </view>

</view>
<view class="box2" hover-class="hover-view2">
  <view class="box1" 
      hover-class="hover-view"
      hover-stay-time="0"
      hover-stop-propagation>
    祖先节点不出现点击态（阻止）
  </view>
</view>

   设置样式

.box1{
  width: 100px;
  height: 100px;
  background: purple
}
.box2{
  width: 200px;
  height: 200px;
  background: blue;
  margin-top: 20px;
}
.hover-view{
  background: orange;
  font-size: 30px;
}
.hover-view2{
  background: green;
}

   结果：
   没有点击时：

   点击时：

4. Image组件

• Image组件用于显示图片，是一个行内块级元素（inline-block），单/双标签

（1）官方文档

  常见属性

   image组件默认宽度320px、高度240px

（2）实践

  ① 单标签：

<image/>

  ② src:本地路径（相对/绝对）/远程地址
   使用本地路径需要把照片导入到文件夹中

  ③ 显示相册中的图片
   添加按钮，建立点击打开相册事件

<button bindtap="handleChooseAlbum">选中图片</button>
<image src="{{imagePath}}"/>

   编写打开相册事件

Page({
  data: {
    imagePath:''
  },
  handleChooseAlbum(){
    //系统API，让用户在相册中选择图片（或者拍照）
    wx.chooseImage({
      success: (res) => {
        console.log(res)
        //1.取出路径
        const path = res.tempFilePaths[0]
        //2.设置imagePath
        //this:undefined
        this.setData({
          imagePath:path
        })
      },
    })
  }
})

  ④ show-menu-by-longpress:长按图片出现识别小程序码
   这里仍然本地/远程地址皆可以

<image show-menu-by-longpress 
src="../../assets/test/二维码.png"/>

  ⑤ bindload:监听图片加载完成
   lazy-load:图片的懒加载（图片即将要被显示的时候再加载）

<image wx:for="{{10}}" 
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" 
bindload="handleImageLoad"
lazy-load/>

   监听图片加载情况：若完成则打印 ’ 图片加载完成 ’

Page({
  handleImageLoad(){
    console.log('图片加载完成')
  }
})

5. Input组件

Input组件用于接收用户的输入信息

（1）官方文档 - 常见属性

（2）实践

  ① 基本使用（单标签/双标签）

<input/>

  ② value：input中的默认值

<input value="默认值"/>

  ③ type:决定键盘类型(文本/数字/身份证/带小数点的数字键盘)
   需要真机测试

<input type="text" value="text"/>
<input type="number" value="number"/>
<input type="idcard" value="idcard"/>
<input type="digit" value="digit"/>

  ④ password：暗文

<input password placeholder="输入密码"/>

  ⑤ placeholder:占位文字

<input placeholder="请输入内容(placeholder:占位文字)"/>

  ⑥ confirm-type:键盘右下角按钮显示文字
   需要真机测试

<input confirm-type="send" value="发送"/>
<input confirm-type="search" value="搜索"/>
<input confirm-type="next" value="下一个"/>
<input confirm-type="go" value="前往"/>
<input confirm-type="done" value="完成"/>

  ⑦ input绑定事件

<input bindinput="handleInput"
        bindfocus="handleFocus"
        bindblur="handleBlur"/>

   在.js文件中打印结果测试

Page({
  handleInput(event){
    console.log('用户输入内容:',event)
  },
  handleFocus(event) {
    console.log('input获取焦点:', event)
  },
  handleBlur(event) {
    console.log('input失去焦点:', event)
  }
})

6. scroll-view组件

（1）官方文档 - 常见属性

• 注意事项：
  ① 实现滚动效果必须添加scroll-x或者scroll-y属性
  ② 垂直方向滚动需要设置scroll-view一个高度

（2）实践

  为方便起见，对所有测试的值用 wx:for 进行一个遍历（item值为自动生成）
  ① 水平滚动:scroll-x
   view是块级元素，若想要水平一排展示，可以设置view的display
   并且设置scroll-view的white-space: nowrap;

<scroll-view class="container1" scroll-x>
  <view wx:for="{{10}}" class="item1">{{item}}</view>
</scroll-view>

   设置样式

.container1{
  background: peru;
  white-space: nowrap;
}

.item1{
  width: 100px;
  height: 100px;
  background: grey;
  margin: 10px;
  display: inline-block;
}

   观看效果，可以左右滑动

  ② 垂直滚动:scroll-y

<scroll-view class="container2" scroll-y>
  <view wx:for="{{10}}" class="item2">{{item}}</view>
</scroll-view>

   设置样式

.container2{
  background:greenyellow;
  height: 200px;
  margin-top: 20px;
}

.item2{
  height: 100px;
  background: pink;
  margin: 10px;
}

   观看效果，可以上下滚动

  ③ 补充：监听滚动高度
   在②的基础上添加 bindscroll 监听滚动属性

<scroll-view class="container2" scroll-y
              bindscroll="handleScroll">
  <view wx:for="{{10}}" class="item2">{{item}}</view>
</scroll-view>

   并且对监听结果进行打印

Page({
  handleScroll(event){
    console.log('正在滚动',event)
    //type-detail-scrollTop 为滚动高度
  }
})

   打印结果：
   type 中的 detail 中的 scrollTop 即为滚动高度

7. 公共属性

 所有wxml标签或组件都支持的属性称为共同属性