小程序内置组件

金色的雨570
141 阅读4分钟

Text组件解析

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

◼ user-select属性决定文本内容是否可以让用户选中

◼ space有三个取值(了解)

◼ decode是否解码(了解)

 decode可以解析的有 < > & '

index.js

// pages/02_common_cpns/index.js
Page({
  data: {
    message: "你好啊, 李银河!",
    chooseImageUrl: "",
    viewColors: ["red", "blue", "green", "skyblue", "purple", "yellow"]
  },
  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);
  },
  onViewClick() {
    console.log("onViewClick");
  },
  onChooseImage() {
    wx.chooseMedia({
      mediaType: "image"
    }).then(res => {
      const imagePath = res.tempFiles[0].tempFilePath
      this.setData({ chooseImageUrl: imagePath })
    })
  },


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

index.wxml

<!--pages/02_common_cpns/index.wxml-->
<view>------------------ input组件 ------------------</view>
<input type="text" model:value="{{message}}"/>


<view>------------------ scroll-view组件 ------------------</view>
<!-- 上下滚动(y轴) -->
<!-- <scroll-view class="container scroll-y" scroll-y>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view> -->


<!-- 左右滚动(x轴) -->
<!-- <scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view> -->


<!-- 监听事件 -->
<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>



<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
<!-- <image src="/assets/zznh.png"/>
<image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/> -->


<!-- 2.图片重要的属性: mode -->
<!-- <image src="/assets/zznh.png" mode="aspectFit"/> -->
<!-- image基本都是设置widthFix -->
<!-- <image src="/assets/zznh.png" mode="widthFix"/> -->
<!-- <image src="/assets/zznh.png" mode="heightFix"/> -->


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


<view>------------------ View组件 ------------------</view>
<view bindtap="onViewClick" hover-class="active">我是view组件</view>
<view>哈哈哈</view>


<view>------------------ button组件 ------------------</view>
<!-- 1.基本使用 -->
<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>
<button size="mini" hover-class="active">hover效果</button>
<view></view>


<!-- 2.open-type属性 -->
<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>



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

developers.weixin.qq.com/miniprogram…

text

基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持

微信 Mac 版：支持

功能描述

文本。

属性说明

Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。

WebView Skyline

属性类型默认值必填说明最低版本
selectablebooleanfalse否文本是否可选 (已废弃)1.1.0
user-selectbooleanfalse否文本是否可选，该属性会使文本节点显示为 inline-block2.12.1
spacestring否显示连续空格1.4.0
合法值说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
decodebooleanfalse否是否解码1.4.0

Bug & Tip

  1. tip: decode可以解析的有   < > & '    
  2. tip: 各个操作系统的空格标准并不一致。
  3. tip:text 组件内只支持 text 嵌套。
  4. tip: 除了文本节点以外的其他节点都无法长按选中。
  5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

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>
<button size="mini" hover-class="active">hover效果</button>
<view></view>

Button组件代码

open-type属性

◼ open-type用户获取一些特殊性的权限，可以绑定一些特殊的事件

<!-- 2.open-type属性 -->
<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>

wx.getUserprofile

View组件解析

◼ 视图组件（块级元素，独占一行，通常用作容器组件）

hovr-stop--propagation直嘀咕是否阻止不能节点的祖先节点出现的点击态

<view>------------------ View组件 ------------------</view>
<view bindtap="onViewClick" hover-class="active">我是view组件</view>
<view>哈哈哈</view>

Image组件解析

◼ Image组件用于显示图片，有如下常见属性

◼ 其中src可以是本地图片，也可以是网络图片

◼ Mode属性使用也非常关键，详情查看官网：

developers.weixin.qq.com/miniprogram…

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

Image组件代码

◼ 这里补充一个API：wx.chooseMedia（具体用法查看文档） 

<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
<!-- <image src="/assets/zznh.png"/>
<image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/> -->


<!-- 2.图片重要的属性: mode -->
<!-- <image src="/assets/zznh.png" mode="aspectFit"/> -->
<!-- image基本都是设置widthFix -->
<!-- <image src="/assets/zznh.png" mode="widthFix"/> -->
<!-- <image src="/assets/zznh.png" mode="heightFix"/> -->


<!-- 3.选择本地图片: 将本地图片使用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 })
    })
  },

scroll-view组件解析

◼ scroll-view可以实现局部滚动，常见属性如下

◼ 注意事项：

 实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了）

 垂直方向滚动必须设置scroll-view一个高度

scroll-view组件代码

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

组件共同的属性

<view>------------------ input组件 ------------------</view>
<input type="text" model:value="{{message}}"/>


<view>------------------ scroll-view组件 ------------------</view>
<!-- 上下滚动(y轴) -->
<!-- <scroll-view class="container scroll-y" scroll-y>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view> -->


<!-- 左右滚动(x轴) -->
<!-- <scroll-view 
  class="container scroll-x" 
  scroll-x
  enable-flex
>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view> -->
avatar
文章
阅读
粉丝