# 一、小程序核心
# 1、三要素
结构:
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20230529204646.png)
布局:
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 大类:视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件 、画布组件……
官方文档 💖:
下面会简单的记录一下常用的组件内容(其次组件建议都去看看,需要时直接查文档 😂)。
思想核心:
可以把小程序组件看成一个组件库,需要的时候可以查阅。
# 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 🚩