基础组件 | 任先生的笔记库

# 一、小程序核心

# 1、三要素

结构：

布局：

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

其作用类似于网页开发中的 HTML。

样式：

WXSS（WeiXin Style Sheets）是一套样式语言，用于描述 WXML 的组件样式。

其作用类似于网页开发中的 CSS。

# 2、WXML 与 HTML

HTML 中（页面元素）	WXML 中（小程序组件）
div	view
span	text
img	image
a	navigator

……	swiper/swiper-item

举例：

<a href="#">超链接</a>

<navigator url="/pages/home/home"></navigator>

看点：

除此之外，小程序还为 WXML 提供了类似于 Vue 中的模板语法。🌟

# 3、WXSS 与 CSS

在小程序中，它为我们提供了一个独有的适配单位 rpx。

① 屏幕适配

WXSS 底层支持新单位 rpx，可以根据屏幕宽度进行自适应。

在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则：

TIP

所以一般设计稿为 iPhone6

750rpx = 375px = 750 物理像素

1rpx = 0.5px = 1 物理像素

② 提供全局和局部样式

对应 app.wxss 和各个 page 页面的.wxss

③ 支持部分 CSS 选择器

选择器
.class 和 #id
element
并集、后代选择器
::after、::before

⑤ 支持样式内联、外联

内联：

<view style="color:{{color}};" />

外联：

/** app.wxss **/
@import 'common.wxss';
.middle-p {
  padding: 15px;
}

# 4、拓展

在 vue.js 中：

为了方便操作元素的 class 列表和内联样式，vue 支持 v-bind 绑定 class 和 style (opens new window)
并且 vue 为了防止表达式字符串拼接错误，还为表达式结果拓展了：对象或数组两种类型

但在微信小程序中，即不支持 class 与 style 绑定，也不支持其他表达式结果类型。🤔

# 二、小程序组件

关于手机微信提供的小程序组件，官方将其分为了 9 大类：视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件……

官方文档 💖：

小程序组件 (opens new window)

下面会简单的记录一下常用的组件内容（其次组件建议都去看看，需要时直接查文档 😂）。

思想核心：

可以把小程序组件看成一个组件库，需要的时候可以查阅。

# 1、视图容器

① view

类似于 HTML 中的 div 标签，是一个块级元素

可以结合 flex 布局使用，并且 view 组件也有 button 组件中一样的 hover-class 属性

② scroll-view

可以滚动的视图区域。

可以实现局部盒子溢出部分横向scroll-x、纵向滚动 scroll-y

<scroll-view scroll-x enable-flex>
  <!-- …… -->
</scroll-view>

同时小程序还为我们提供了一些监听事件：

如：bindscrolltoupper、bindscrolltolower 等

③ swiper、swiper-item

轮播图组件

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{background}}" wx:key="*this">
    <swiper-item>
      <view class="swiper-item {{item}}"></view>
    </swiper-item>
  </block>
</swiper>

常用属性：

属性	值类型	说明	默认值
indicator-dots	boolean	是否显示面板指示点	false
autoplay	boolean	是否自动切换	false
interval	number	自动切换时间间隔	false
circular	boolean	是否采用衔接滑动	false

# 2、基础内容

① text

类似于 HTML 中的 span 标签，是一个行内元素

<scroll-view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
  <text>{{text}}</text>
</scroll-view>

常用属性：

属性	说明	默认值
user-select	文本是否可选（节点变为 inline-block）	false

② rich-text

富文本组件，可以把HTML 字符串渲染为 WXML 结构

<block wx:if="{{renderedByHtml}}">
  <rich-text nodes="{{htmlSnip}}"></rich-text>
</block>

常用属性：

属性	说明	默认值
user-select	文本是否可选（节点变为 inline-block）	false
nodes	节点列表/HTML String	[ ]

# 3、表单组件

① button

小程序中的按钮组件是一个块级元素（默认独占一行），并且还附带许多功能。

常用属性：

提示

如果使用了 size="mini"属性，button 会变为 inline-block 行内元素

属性	说明	默认值
size	按钮的大小	default
type	按钮的样式类型	default
disabled	是否禁用	false
hover-class	按钮按下去的样式类	false
form-type	触发 form 组件的 submit/reset 事件
open-type	微信开放能力	👀

我们可以通过 button 组件的 open-type 属性获取用户的基本信息 (opens new window)（nickName 昵称、avatarUrl 头像、手机号）

获取用户信息（旧版本）

以前

<!-- wxml -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfoFn"></button>

// js
Page({
  getUserInfoFn(event) {
    console.log(event.detail.userInfo)
  }
})

获取用户信息（新版本 ✍）

API --> 开发接口 --> 用户信息 (opens new window)

指南 --> 开发能力 --> 用户信息 (opens new window)

获取头像昵称（直接获取）

<button bindtap="getUserInfoFn"></button>

// js
Page({
  getUserInfoFn() {
    // 该接口较新，支持promise写法
    wx.getUserProfile({
      desc: ''
      // success: (res) => {
      //   console.log(res.userInfo)
      // }
    }).then((res) => {
      console.log(res.userInfo)
    })
  }
})

获取头像昵称（在线收集）

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" />

const defaultAvatarUrl =
  'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl
    })
  }
})

# 4、媒体组件

① image

图片组件，支持 JPG、PNG、SVG、WEBP、GIF 等格式

<view class="section__ctn">
  <image
    style="width: 200px; height: 200px; background-color: #eeeeee;"
    mode="{{item.mode}}"
    src="{{src}}"
  ></image>
</view>

常用属性：

属性	说明	默认值
src	图片资源地址
mode	图片裁剪、缩放的模式	scaleToFill
lazy-load	图片懒加载	false

提示

image 组件默认宽度和高度：320 x 240，其图片会被压缩

mode 属性值分析：

属性值	说明
scaleToFill	直接纵横拉伸（不考虑缩放比例）
aspectFit	图片完整的填充在视图 —— 图片完整（保持缩放比例）
aspectFill	图片填满整个视图 —— 图片不完整（保持缩放比例）
widthFix	图片宽和视图宽一致，视图高度自动变为根据比例得到固定图片高度值 —— 图片不完整（保持缩放比例）
heightFix	图片高和视图高一致，视图宽度自动变为根据比例得到固定图片宽度值 —— 图片不完整（保持缩放比例）

从本地选择图片

<!-- wxml -->
<button bindgetuserinfo="chooseImageFn"></button>

// js
Page({
  chooseImageFn(event) {
    wx.chooseMedia({
      mediaType: 'image'
    }).then((res) => {
      console.log(res.tempFiles[0].tempFilePath)
    })
  }
})

# 5、导航组件

① navigator 🚩

← 【生命周期】 WXML语法 →