小程序内置组件

1. text组件

Text组件用于显示文本, 类似于span标签, 是行内元素

• 属性

  • user-select属性决定文本内容是否可以让用户选中（手指长按）

  • space有三个取值

    • ensp 中文字符空格一半大小
    • emsp 中文字符空格大小
    • nbsp 根据字体设置的空格大小

  • decode是否解码

  <text>Hello World</text>
  <text user-select>{{ message }}</text>
  <text user-select="{{true}}">{{ message }}</text>
  <text decode>&gt;</text>
  

2. button组件

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

2.1 button常见属性

• 文档

• 基本使用

  <button>按钮</button>
  
  <button size="mini">size属性</button>
  
  <button size="mini" type="primary">type属性</button>
  <button size="mini" type="warn">type属性</button>
  <button size="mini" class="btn">自定义属性</button>
  
  <button size="mini" plain>plain属性</button>
  <button size="mini" disabled>disabled属性</button>
  <button size="mini" loading class="btn">loading属性</button>
  <!-- 需要给active类名添加样式 -->
  <button size="mini" hover-class="active">hover效果</button>
  

2.2 open-type

• getUserProfile（获取用户信息）

  <button open-type="contact" size="mini" type="primary">打开会话</button>
  <!-- 此方法已弃用 -->
  <button 
    open-type="getUserInfo"
    bindgetuserinfo="getUserInfo"
    size="mini" 
    type="primary"
  >
    用户信息
  </button>
  <button size="mini" type="primary" bindtap="getUserInfo">用户信息2</button>
  <!-- 需要绑定事件，个人用户暂无权限获取 -->
  <button 
    size="mini" 
    type="primary"
    open-type="getPhoneNumber"
    bindgetphonenumber="getPhoneNumber"
  >
    手机号码
  </button>
  

  getUserInfo(event) {
    // 调用API, 获取用户的信息
    // 1.早期小程序的API, 基本都是不支持Promise风格
    // 2.后期小程序的API, 基本都开发支持Promise风格
    wx.getUserProfile({
      desc: 'desc',
      // success: (res) => {
      //   console.log(res);
      // }
    }).then(res => {
      console.log(res);
    })
  },
  getPhoneNumber(event) {
    console.log(event);
  },
  

3. view组件

视图组件（块级元素，独占一行，通常用作容器组件）,类似HTML中的div

4. image组件

Image组件用于显示图片

• 文档
• src可以是本地图片，也可以是网络图片
  • / 表示根目录

• mode属性:

  • widthFix（开发一般都设置这个值）

• 注意：image组件默认宽度320px、高度240px

• wx.chooseMedia: 选择相册中图片

  <!-- 选择本地图片: 将本地图片使用image展示出来 -->
  <button bindtap="onChooseImage">选择图片</button>
  <image class="img" src="{{chooseImageUrl}}" mode="widthFix"/>
  

  onChooseImage() {
    wx.chooseMedia({
        mediaType: "image"
    }).then(res => {
      const imagePath = res.tempFiles[0].tempFilePath
      this.setData({ chooseImageUrl: imagePath })
    })
  },
  

5. scroll-view

• 滚动的前提:
  • 固定的宽度或者高度
  • 内容需要超出宽度或者高度
  • 设置scroll-x或scroll-y
• 滚动的监听

  • 滚动到左边

  • 滚动到右边

  • 滚动的过程

    <!-- 左右滚动 -->
    <scroll-view 
      class="container scroll-x" 
      scroll-x
      enable-flex
      bindscrolltoupper="onScrollToUpper"
      bindscrolltolower="onScrollToLower"
      bindscroll="onScroll"
    >
      <block wx:for="{{viewColors}}" wx:key="*this">
        <view class="item" style="background: {{item}};">{{item}}</view>
      </block>
    </scroll-view>
    

    onScrollToUpper() {
      console.log("滚动到最顶部/左边");
    },
    onScrollToLower() {
      console.log("滚到到最底部/右边");
    },
    onScroll(event) {
      console.log("scrollview发生了滚动:", event);
    }
    

6. 组件共有属性

7. input双向绑定

<input type="text" model:value="{{message}}"/>