# 一、小程序核心

# 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 与 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 🚩

更新于 : 7/8/2024, 10:21:14 AM