微信小程序笔记

前言
微信小程序介绍

简介

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，
它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用

通过微信小程序，是提供了用户无需下载APP，又能使用户体验舒适度 超过浏览器。是介于原生与wab之间的产物

特点

  • 运行环境不同：网页是运行在浏览器上，小程序运行在微信环境中
  • API不同：小程序无法调用 DOM 和 BOM 的API，但小程序有自己的微信环境提供的API
  • 开发模式不同：网页通过浏览器+代码编辑器开发，小程序有自己的开发者账号、开发者工具

体验

通过微信扫描右侧二维码，可体验微信小程序的具体样式和功能介绍;

使用手机微信(6.7.2 及以上版本) 扫码后，弹出的应用就是小程序。

%title插图%num
注册开发者

使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角 立即注册 即可进入到小程序开发账号的注册流程

%title插图%num

选择 小程序 项目，填入 账号信息 → 邮箱激活 → 信息登记 即可注册完成

%title插图%num

通过 开发管理 → 开发设置 → 开发者ID 可以看到自己的 AppID(小程序ID)

%title插图%num
下载微信开发者工具

介绍

微信开发者工具 是官方推荐使用的小程序开发工具，它提供的主要功能如下：

  • 快速创建小程序项目
  • 代码的查看和编辑
  • 对小程序功能进行调试
  • 小程序的预览和发布

下载

建议选择 稳定版 Stable Build 进行开发和学习

官网下载

开发者文档

安装完成后进行登录，界面如下：

%title插图%num
创建小程序项目

点击 ” + ” 号，填写项目名称、存放目录、APPID 等，设置” 不使用云服务 “，选择语言为 JavaScript，创建项目

%title插图%num

创建完成后的界面呈现如下：左边为模拟器，右边为代码区域，中间为文件路径，右下方为测试区域

%title插图%num
项目结构

主目录结构

创建完成的小程序项目会有一个默认目录结构，该结构如图所示：

结构描述

  1. pages 用来存放所有小程序的页面
  2. utils 用来存放工具性质的模块
  3. app.js 小程序项目的入口文件
  4. app.json 小程序项目的全局配置文件
  5. app.wxss 小程序的全局样式文件
  6. project.config.json 项目的配置文件
  7. sitemap.json 配置小程序及其页面是否允许被微信索引

pages、app.js、app.json 需要重点了解

%title插图%num

子目录结构

小程序官方建议把所有小程序的页面，都存放在 pages 目录中。以单独的文件夹存在。

结构描述

每个页面由4个基本文件组成，分别为：

  • .js文件 (页面的脚本文件，存放页面的数据、事件处理函数)
  • .json文件 (当前页面的配置文件，配置窗口外观、表现等)
  • .wxml文件 (页面的模板结构文件)
  • .wxss文件 (当前页面的样式表文件)
%title插图%num

JSON配置文件的作用

通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置

小程序项目中有4种json配置文件，分别是：

  • 项目根目录种的 app.json 配置文件
  • 项目根目录种的 project.config.json 文件
  • 项目根目录种的 sitemap.json 配置文件
  • 每个页面文件夹中的 .json 配置文件

app.json 包括了小程序的所有页面路径 [pages]、窗口外观 [window]、界面表现、底部Tab 等

另外还有 组件样式版本 [style]、sitemap.json存放位置 [sitemapLocation]

project.config.json 是项目配置文件，用来记录对小程序开发工具所做的个性化配置
(也可以直接通过工具右侧可视化操作来改变项目配置)：

setting 中保存了编译相关配置、projectname 中保存了项目名称、appid 中保存的是小程序账号ID

sitemap.json 文件用来配置小程序页面是否允许微信索引
(微信现在已经开放小程序内搜索，效果类型于PC网页的SEO)

当开发者允许微信索引时，微信会通过爬虫的形式为小程序的页面内容建立索引。
当用户的搜索关键字和页面的索引匹配成功时，小程序的页面将可能展示在搜索结果中

%title插图%num

设置小程序不允许被索引

在 sitemap.json 文件中，action 属性的值默认为 allow (允许索引)，修改为 disallow (不允许索引)

JSON
{
  "desc": "关于本文件的更多信息，请参考文档...",
  "rules": [{
  "action": "disallow",
  "page": "*"
  }]
}

关闭sitmap警告提醒

在调试器中的 sitemap提示为黄色背景，如若想要关闭。可在 project.config.json 中设置 checkSiteMap 为 true

JSON
{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "checkSiteMap": true,
    // ...
  },
  // ...
}
页面文件创建和修改

创建页面文件

在 app.json 的 pages 中新增页面存放路径，开发工具会自动创建对应的页面文件。

%title插图%num

修改项目首页

调整 app.json 的 pages 数组中页面路径的前后顺序，即可修改项目的首页。它会将首个当作项目首页进行渲染

%title插图%num
WXML

WXML文件是微信小程序开发中负责页面的模板结构文件，它于HTML的区分为：

标签名称不同

  • HTML (div、span、img、a)
  • WXML (view、text、image、nabigator)

属性节点不同

  • <a href=”#”>超链接</a>
  • <navigator url=”/pages/home/home”></navigator>

提供了类似Vue中的模板语法

  • 数据绑定
  • 列表渲染
  • 条件渲染
WXSS

WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的CSS，区别于：

新增了 rpx 尺寸单位

  • CSS 中需要手动进行像素单位换算，例如 rem
  • WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

提供了全局样式和局部样式

  • 项目根目录中的 app.wxss 会作用域所有小程序页面
  • 局部页面的 .wxss 样式仅对当前页面生效

WXSS 仅支持部分 CSS 选择器

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

WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时 WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序开发。与CSS相比，WXSS扩展的特性有：

  • rpx 尺寸单位
  • @import 样式导入
%title插图%num

RPX 尺寸单位介绍

rpx (responsive pixel) 是微信小程序独有的，用来解决屏适配的尺寸单位

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有的设备的屏幕，
在宽度上等分为 750 份 (即： 当前屏幕的总宽度为 750px)

  • 在较小的设备上，1rpx 所代表的宽度较小
  • 在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对于的像素单位来渲染，从而实现屏幕适配

rpx 与 px 之间的单位换算

在 iphone 上，屏幕的宽度为 375px，共有 750 个物理像素，等分为 750px；因此：

  • 750rpx = 375px = 750物理像素
  • 1rpx = 0.5px = 1物理像素
%title插图%num

官方建议：开发微信小程序时，设计师可以使用 iphone6 作为 视觉稿标准

js

小程序中的 .js 文件分为三大类，分别是：

app.js

  • 是整个小程序项目的入口文件，通过 App()函数 启动整个小程序

页面的 .js 文件

  • 是页面的入口文件，通过调用 Page() 函数来创建并运行页面

普通的 .js 文件

  • 是普通的功能模块文件，用来封装公共的函数或属性供页面使用 (例如utils)
宿主环境

宿主环境介绍

宿主环境 (host environment) 指的是程序运行所必须的依赖环境，
例如：Android系统 和 IOS系统 是不同的宿主环境。所以 Android 是 安卓软件 的宿主环境，只能在该环境运行

%title插图%num

小程序的宿主环境

手机微信是小程序的宿主环境，而不是安装在 Android系统 或者 IOS系统 上的，如图所示

%title插图%num

借助微信为宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：
微信扫码、微信支付、微信登录、地理定位等

小程序的宿主环境包含的内容为：通信模型、运行机制、组件、API

通信模型

小程序中通信的主题是渲染层和逻辑层，其中：

  • WXML 模板和 WXSS 样式工作在渲染层
  • JS脚本工作在逻辑层
%title插图%num

小程序中的通信模型分为两部分：

  • 渲染层和逻辑层之间的通信
    • 由微信客户端转发
  • 逻辑层和第三方服务器之间的通信
    • 由微信客户端进行转发
%title插图%num
运行机制

小程序的启动过程

  1. 把小程序的代码包下载到本地
  2. 解析 app.json 全局配置文件
  3. 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

页面的渲染过程

  1. 加载解析页面的 .json 配置文件
  2. 加载页面的 .wxml 模板和 .wxss 样式
  3. 执行页面的 .js 文件，调用 Page() 创建页面实例
  4. 页面渲染完成
组件

介绍

小程序的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构

九大类小程序组件

官方把小程序组件分为9大类，分别是：

  • 视图容器
  • 基础内容
  • 表单组件
  • 导航组件
  • 媒体组件
  • Map地图组件
  • canvas画布组件
  • 开放能力
  • 无障碍访问

常用视图容器组件

  1. view
    • 普通视图区域
    • 类似于HTML中的div，是一个块元素
    • 常用来实现页面布局效果
  2. scroll-view
    • 可滚动的视图区域
    • 常用来实现滚动列表效果
  3. swiper 和 swiper-item
    • 轮播图容器组件 和 轮播图 item 组件
view

view 类似 html 的 div，通过 <view></view> 实现布局

操作步骤

打开项目目录，在 pages 文件夹中找到 list 文件夹，修改里面的 list.wxml 和 list.wxss

参数介绍

属性 类型 默认值 必填 说明 最低版本
hover-class string none 否 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 否 按住后多久出现点击态，单位毫秒 1.0.0
hover-stay-time number 400 否 手指松开后点击态保留时间，单位毫秒 1.0.0

效果演示

list.wxml
<!--pages/list/list.wxml-->
<view class="containerl">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
list.wxss
/* pages/list/list.wxss */
.containerl view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.containerl view:nth-child(1) {
  background-color: lightblue;
}

.containerl view:nth-child(2) {
  background-color: lightgreen;
}

.containerl view:nth-child(3) {
  background-color: lightcoral;
}

.containerl {
  display: flex;
  justify-content: space-around;
}

效果展示

%title插图%num
scroll-view

通过 <scroll-view> 标签实现区域滚动效果 (需给 scroll-view 设定宽高，并设置滚动方向)

操作步骤

打开项目目录，在 pages 文件夹中找到 list 文件夹，修改里面的 list.wxml 和 list.wxss

参数介绍

属性 类型 默认值 必填 说明 最低版本
scroll-x boolean false 否 允许横向滚动 1.0.0
scroll-y boolean false 否 允许纵向滚动 1.0.0
upper-threshold number/string 50 否 距顶部/左边多远时，触发 scrolltoupper 事件 1.0.0
lower-threshold number/string 50 否 距底部/右边多远时，触发 scrolltolower 事件 1.0.0
scroll-top number/string 否 设置竖向滚动条位置 1.0.0
scroll-left number/string 否 设置横向滚动条位置 1.0.0
scroll-into-view string 否 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 1.0.0
scroll-with-animation boolean false 否 在设置滚动条位置时使用动画过渡 1.0.0
enable-back-to-top boolean false 否 iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启。 1.0.0
enable-flex boolean false 否 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。 2.7.3
scroll-anchoring boolean false 否 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。 2.8.2
enable-passive boolean false 否 开启 passive 特性，能优化一定的滚动性能 2.25.3
refresher-enabled boolean false 否 开启自定义下拉刷新 2.10.1
refresher-threshold number 45 否 设置自定义下拉刷新阈值 2.10.1
refresher-default-style string “black” 否 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式 2.10.1
refresher-background string “#FFF” 否 设置自定义下拉刷新区域背景颜色 2.10.1
refresher-triggered boolean false 否 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 2.10.1
enhanced boolean false 否 启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view 2.12.0
bounces boolean true 否 iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) 2.12.0
show-scrollbar boolean true 否 滚动条显隐控制 (同时开启 enhanced 属性后生效) 2.12.0
paging-enabled boolean false 否 分页滑动效果 (同时开启 enhanced 属性后生效) 2.12.0
fast-deceleration boolean false 否 滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效) 2.12.0
binddragstart eventhandle 否 滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } 2.12.0
binddragging eventhandle 否 滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } 2.12.0
binddragend eventhandle 否 滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity } 2.12.0
bindscrolltoupper eventhandle 否 滚动到顶部/左边时触发 1.0.0
bindscrolltolower eventhandle 否 滚动到底部/右边时触发 1.0.0
bindscroll eventhandle 否 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0
bindrefresherpulling eventhandle 否 自定义下拉刷新控件被下拉 2.10.1
bindrefresherrefresh eventhandle 否 自定义下拉刷新被触发 2.10.1
bindrefresherrestore eventhandle 否 自定义下拉刷新被复位 2.10.1
bindrefresherabort eventhandle 否 自定义下拉刷新被中止 2.10.1

效果演示

list.wxml
<!--pages/list/list.wxml-->
<!-- scroll-y属性：允许纵向滚动 -->
<!-- scroll-x属性：允许横向滚动 -->
<scroll-view class="containerl" scroll-y>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
list.wxss
/* pages/list/list.wxss */
.containerl view {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.containerl view:nth-child(1) {
  background-color: lightblue;
}

.containerl view:nth-child(2) {
  background-color: lightgreen;
}

.containerl view:nth-child(3) {
  background-color: lightcoral;
}

.containerl {
  height: 100px;
  width: 100%;
}

效果展示

%title插图%num
swiper

<swiper> 搭配 <swiper-item> 实现页面轮播图的效果 (支持自动播放 autoplay)

操作步骤

打开项目目录，在 pages 文件夹中找到 list 文件夹，修改里面的 list.wxml 和 list.wxss

参数介绍

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,.3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

案例演示

list.wxml
<!--pages/list/list.wxml-->
<swiper indicator-dots autoplay>
<!-- 第一个轮播图 -->
<swiper-item class="swiper-container">
<view class="item">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
list.wxss
/* pages/list/list.wxss */
.swiper-container {
  height: 150px;
}

.item {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: limegreen;
}

swiper-item:nth-child(2) .item {
  background-color: lightcoral;
}

swiper-item:nth-child(3) .item {
  background-color: lightseagreen;
}

效果展示

%title插图%num
text

text 类似于html 的 span 标签，但通过 text 组件的 selectable 属性，实现长按选中文本内容的效果

操作步骤

打开项目目录，在 pages 文件夹中找到 list 文件夹，修改里面的 list.wxml 和 list.wxss

通过长按 text 组件，user-select 与 selectable 属性都可以支持让用户选中文字

参数介绍

相关文档

属性 类型 默认值 必填 说明 最低版本
selectable boolean false 否 文本是否可选 (已废弃) 1.1.0
user-select boolean false 否 文本是否可选，该属性会使文本节点显示为 inline-block 2.12.1
space string 否 显示连续空格 1.4.0
decode boolean false 否 是否解码 1.4.0

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view class="text-container">
  <text>长按复制QQ号 </text>
<text user-select>1365116009</text>
</view>
<view class="text-container">
  <text>长按复制手机号 </text>
<text user-select>110</text>
</view>
<view class="text-container">
  <text>长按复制地址 </text>
<text selectable>https://smmcat.cn</text>
</view>
list.wxss
/* pages/list/list.wxss */
.text-container{
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 3px dashed #66cc;
}

效果展示

%title插图%num
rich-text

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应 UI结构，常用于渲染服务器传入的 html 标签

操作步骤

打开项目目录，在 pages 文件夹中找到 list 文件夹，修改里面的 list.wxml 和 list.wxss

创建 rich-text 并将 html标签结构 设置在 rich-text 中 nodes 属性中

参数说明

属性 类型 默认值 必填 说明 最低版本
nodes array/string [] 否 节点列表/HTML String 1.4.0
space string 否 显示连续空格 2.4.1
user-select boolean false 否 文本是否可选，该属性会使节点显示为 block 2.24.0

案例模拟

list.wxml
<!--pages/list/list.wxml-->
<view class="text-container">
 <rich-text
  nodes="<h1 style='color:red;'>h1标题</h1>">
 </rich-text>
 <rich-text
  nodes="<p style='color:grey;'>我是内容p区域</p>">
 </rich-text>
</view>
list.wxss
/* pages/list/list.wxss */
.text-container{
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 3px dashed #66cc;
}

效果展示

%title插图%num
其他组件

button

相关文档

  • 按钮组件，通过 type 属性调整按钮的类型样式、size 调整按钮尺寸、plain设置镂空按钮
  • 功能比 HTML 中的 button 按钮丰富
  • 通过 open-type 属性可以调用微信提供的各种功能 (客服、转发、获取用户信息等)

image

相关文档

  • 图片组件，通过 mode 属性调整图片的填充方式、拉伸、宽高自适应等
  • image 组件默认宽度约 300px、高度为 240px

navigator

相关文档

  • 页面导航组件
  • 类似于 HTML 中的 a 标签
协同工作

针对大公司的协同开发，会有对应的项目负责、工作规划的体系

概况

权限管理需求

出于管理需要，大公司都会给开发组的人员设置不同的权限

%title插图%num

小程序开发流程

一个小程序的开发，需要经过下图描述的一个过程

%title插图%num

成员管理

小程序成员管理体现在于管理员对小程序项目成员及体院成员的管理

项目成员：

  • 表示参与小程序开发、运营的成员
  • 可登录小程序管理后台
  • 管理员可以添加、删除项目成员，并设置项目成员的角色

体验成员：

  • 表示参与小程序内测体验的成员
  • 可使用体验版小程序，但不属于项目成员
  • 管理员及项目成员均可添加、删除体验成员
%title插图%num

权限管理

  • 开发者权限：可使用小程序开发者工具及对小程序的功能进行代码开发
  • 体验者权限：可以使用体验版小程序
  • 登录权限：可登录小程序管理后台，无需管理远确认
  • 开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
  • 腾讯云管理：云开发相关设置
%title插图%num
设置权限

以最高权限登录小程序后台，在界面上可设置对应成员的权限

%title插图%num
小程序版本

软件开发过程中的不同版本

在软件开发过程中，根据时间节点的不同，会产出不同的软件版本，例如：

  • 开发者编写代码的同时，对项目代码进行自测 (开发版本)
  • 直到程序达到稳定可体验状态时，开发者把体验版本进行体验提示
  • 最后修复完程序的 Bug 后，发布正式版供外部用户使用
%title插图%num
发布上线

上传代码

  • 点击开发者工具顶部工具栏中的 “上传” 按钮
  • 填写 版本号 以及 项目备注
%title插图%num

提交后在后台管理即可查看和管理小程序开发的版本和信息

%title插图%num

发布版本

腾讯官方设置提交审核目的是为了提高微信中各个小程序的质量，以及符合相关的规范；
点击 “提交审核” 按钮后，就可以把小程序提交到腾讯官方进行审核

当审核通过后，管理远的微信中会受到小程序通过审核的通知，此时在审核版本的列表中。
点击 “发布” 按钮之后，即可把 “审核通过” 的版本发布为 “线上版本”。供所有用户访问和使用

%title插图%num

推广小程序

通过小程序二维码进行推广在辨识度上有更好的体验，和树立品牌形象，也方便用户们直接关注和访问；

登录小程序管理后台 → 设置 → 基本信息 → 基本信息 → 小程序码及线下物料下载

通过小程序后台，也可以对小程序的图标、名字、简介进行修改；还可以通过小程序后台查看数据统计

登录小程序管理后台 → 统计 → 点击相应 tab 可以查看相关数据

小程序API

概况

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的功能
例如：获取用户信息、本地存储、支付功能等

三大分类

小程序官方把 API 分为了如下3大类：

事件监听 API

  • 特点：以 on 开头，用来监听某些事件的触发
  • 例子：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步 API

  • 特点1：以 Sync 结尾的 API 都是同步 API
  • 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
  • 例子：wx.setStorageSync(‘key’,’value’) 向本地存储中写入内容

异步 API

  • 特点：类似 jQuery 中的 $ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
  • 例子：wx.request() 发起网络数据请求，通过 success 回调函数接收数据
模板与配置

制作小程序页面和对应的功能方法需要的知识

数据绑定

说明

类似 vue 组件，微信小程序的数据绑定的方法为 Mustache语法，具体操作为：

  • 在.js文件 pages 的 data 中定义数据
  • 在 WXML 中去使用数据
  • 使用 {{}} 双大括号调用 data 中的变量的值

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view>
  <text>ID：{{id}}</text>
</view>
<view>
  <text>年龄：{{age}}</text>
</view>
<view>
  <text>密码：{{password}}</text>
</view>
list.js
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id:'776777',
    age:'23',
    password:'smmmax'

  },
})

效果展示

%title插图%num

Mustache 语法应用场景

mustache语法主要应用场景如下：

  • 绑定内容
  • 绑定属性
  • 运算 (三元运算、算术运算)

无论是绑定内容还是绑定属性，微信小程序中都是使用插值表达式 {{value}} 方式绑定数据

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view class="msg">{{msg}}</view>
<image src="{{img}}" mode="widthFix" class="img"></image>
list.js
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:'这是一段文字，从data中获取的',
    img:'https://smmcat.cn/wp-content/uploads/2022/11/13.png'
  },
})
list.wxss
/* pages/list/list.wxss */
.msg{
  text-align: center;
  color: red;
  font-size: 20px;
}
.img{
  border: 1px solid #ccc;
  width: 300px;
  height: 300px;
  margin-top: 10px;
}

效果展示

%title插图%num
三元运算

Mustache 支持三元运算

通过在插值表达式中插入一段三元运算，实现一些简单的运算并返回结果，

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view class="msg">
{{randomNum}}
</view>
<view class="content">
  {{randomNum >=5 ?'随机数大于或者等于5':'随机数小于5'}}
</view>
JavaScript
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    randomNum:Math.floor(Math.random()*10)
  },
})
list.wxss
/* pages/list/list.wxss */
.msg{
  text-align: center;
  color: red;
  font-size: 20px;
}
.content{
  text-align: center;
}

效果展示

%title插图%num
算术运算

Mustache 支持算术运算

通过在插值表达式引入的值，可在表达式中进行简单的算术运算，得到并返回结果在界面

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view class="msg">
{{randomNum * 100}}
</view>
list.js
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    randomNum:Math.floor(Math.random()*10)
  },
})
list.wxss
/* pages/list/list.wxss */
.msg{
  margin: 100px auto;
  padding: 10px;
  width: 200px;
  border: 3px dashed #66cc;
  text-align: center;
  color: red;
  font-size: 20px;
}

效果展示

%title插图%num
事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务处理

%title插图%num

常用事件

相关文档

类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开，类似html的 click事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发
事件对象

事件对象属性

当事件回调触发的时候，会收到一个事件对象 event，它是详细属性如下所示：

类型 绑定方式 事件描述
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别

target 是触发该事件的源头组件。而 currentTarget 则是当前事件所绑定的组件，举例如下：

%title插图%num

点击内部按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap事件处理函数，
此时，对于外层的 view 来说：

  • e.target 指向的是触发事件的源头组件，因此 e.target 是内部的按钮组件
  • e.currentTarget 指向的是当前正触发事件的哪个组件，因此 e.currentTarget 是当前 view组件
bindtap

bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来相应用户触摸行为

  • 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

案例演示

list.wxml
<!--pages/list/list.wxml-->
<view bindtap="tapName" class="msg"> Click me! </view>
list.js
// pages/list/list.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})
list.wxss
/* pages/list/list.wxss */
.msg{
  margin: 100px auto;
  padding: 10px;
  width: 200px;
  border: 3px dashed #66cc;
  text-align: center;
  color: red;
  font-size: 20px;
}

效果展示

%title插图%num

单击后，事件对象被控制台打印

赋值传参

在事件处理函数中为 data 中数据赋值

通过调用 this.setDate(dataObject) 方法，可以给数据层中的 data 中数据重新赋值，并重新渲染页面

HTML
<!--pages/list/list.wxml-->
<view class="msg">
 当前值为： {{count}}
</view>
<button type="primary" bindtap="chuangeCount">值+1</button>
JavaScript
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 0,
  },

  chuangeCount: function () {
    this.setData({
      count: this.data.count + 1
    })
  },
})
CSS
/* pages/list/list.wxss */
.msg{
  margin: 100px auto;
  padding: 10px;
  width: 200px;
  border: 3px dashed #66cc;
  text-align: center;
  color: red;
  font-size: 20px;
}

效果展示

%title插图%num

事件传参

可以为组件提供 data-* 自定义属性传参，其中 * 代表是参数的名字

HTML
<button bindtap="getDataset" data-info="{{2}}">事件传参</button>
  • info 会被解析为 参数的名字
  • 数值 2 会被解析为 info 的参数的值。如若传的值不加 {{ }} ，都返回为字符串类型

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值

JavaScript
// pages/list/list.js
Page({
  //...
  getDataset: function (e) {
    // dataset 是一个对象 包含了所有通过 data-* 传递过来的参数项
    console.log(e.target.dataset);
    // 通过 dataset 可以访问到具体参数的值
    console.log(e.target.dataset.info);
  },
})

效果展示

%title插图%num

案例演示

通过 e.target.dataset.参数名 获取标签上的 data-参数名 传入的数值并相加在 count 值上，最后在页面中展示

list.wxml
<!--pages/list/list.wxml-->
<view class="msg">
 当前值为： {{count}}
</view>
<button type="primary" bindtap="chuangeCount" data-num="{{5}}">值+5</button>
list.js
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 0,
  },

  chuangeCount: function (e) {
    this.setData({
      count: this.data.count + e.target.dataset.num
    })
  },
})
list.wxss
/* pages/list/list.wxss */
.msg{
  margin: 100px auto;
  padding: 10px;
  width: 200px;
  border: 3px dashed #66cc;
  text-align: center;
  color: red;
  font-size: 20px;
}

效果展示

%title插图%num
bindinput

微信小程序中有 <input> 标签，与 html 标签不同的是，微信的 input 标签的样式为 <input></input>

bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

  • 通过 bindinput 可以为文本框绑定输入事件
HTML
<!--pages/list/list.wxml-->
<input bindinput="inputHandler"></input>
  • 获取事件对象，通过 e.detail.value 获取输入框的值
JavaScript
// pages/list/list.js
Page({

  // ...
  // input 输入框的事件处理函数
  inputHandler:function(e){
 console.log(e.detail.value);
  },
})

案例演示

通过 data 存值，动态显示输入框内容的值

HTML
<!--pages/list/list.wxml-->
<view class="msg">
  {{input}}
</view>
<input bindinput="inputHandler" class="iput"></input>
JavaScript
// pages/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    input: '',
  },

  // input 输入框的事件处理函数
  inputHandler: function (e) {
    this.setData({
      input: e.detail.value
    })
  },
})
CSS
/* pages/list/list.wxss */
.msg{
  margin: 100px auto;
  margin-bottom: 10px;
  min-height: 30px;
  padding: 10px;
  width: 200px;
  border: 3px dashed #66cc;
  text-align: center;
  color: red;
  font-size: 20px;
}
.iput{
  margin: 10px auto;
  width:200px;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

效果展示

%title插图%num
条件渲染

wx:if

在小程序中，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

HTML
<view wx:if="{{condition}}"> Hello word </view>
JavaScript
Page({
  data: {
    condition:true,
  },
})

效果展示

%title插图%num

也可以用 wx:elif 和 wx:else 来添加 else 判断

HTML
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
JavaScript
Page({
  data: {
    type:2
  },
})

效果展示

%title插图%num

基于 block 标签使用 if 条件渲染

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来；
并在 <block> 标签上使用 wx:if 控制属性

<block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

HTML
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view> 
</block>
<block wx:if="{{false}}">
  <view>view3</view>
  <view>view4</view> 
</block>

效果展示

%title插图%num

hidden

在小程序中，直接使用 hidden=”{{ condition }}” 也能控制元素的显示与隐藏，hidden值 true 隐藏，false 显示

hidden 属性不会使元素删除，只是将元素以切换样式的方式 ( display:none/block ) 进行隐藏

HTML
<view hidden="{{ condition }}">条件为 true 隐藏，条件为 false 显示</view>

wx:if 与 hidden 的对比

运行的方式不同

  • wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  • hidden 属性不会使元素删除，只是将元素以切换样式的方式 ( display:none/block ) 进行隐藏

使用建议

  • 频繁切换时，建议使用 hidden
  • 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
列表循环

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示

list.wxml
<view wx:for="{{arr}}" class="listBox">
  索引是:{{index}} --- 当前值是 {{item}}
</view>
list.js
// pages/list/list.js
Page({
  data: {
    arr:['张三','李四','王五','老六']
  },
})
list.wxss
/* pages/list/list.wxss */
.listBox{
  text-align: center;
  width: 300px;
  padding: 5px;
  border: 2px dashed #66cc;
  margin-bottom: 2px;
}

效果展示

%title插图%num

手动指定索引和当前项的变量名

  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名
Vue HTML
<view wx:for="{{arr}}" wx:for-index='idx' wx:for-item='itemName'>
  索引是:{{idx}} --- 当前值是 {{itemName}}
</view>

指定 key 值提高渲染

类似于 Vue 列表渲染中的 :key，小程序再实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，
从而提高渲染的效率

wx:key 选择的目标为整个对象数组中循环不重复的内容，如果没有，也可以直接选择索引 wx-key=”index”

Vue HTML
<view wx:for="{{arr}}" wx:key="id" class="listBox">
  当前值是 {{item.name}}
</view>
JavaScript
Page({
  data: {
    arr: [{
        id: 1,
        name: '屎猫'
      },
      {
        id: 2,
        name: '夜夜'
      },
      {
        id: 3,
        name: '腐喵'
      }
    ]
  },
})
CSS
.listBox{
  text-align: center;
  width: 300px;
  padding: 5px;
  border: 2px dashed #66cc;
  margin-bottom: 2px;
}

效果展示

%title插图%num
全局配置
样式导入

使用 wxss 提供的 @import 语法，可以导入外联样式表；它的权重类似 CSS 的外部式

使用

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束

案例演示

在 pages 目录中创建 common.wxss 文件，并在子项目的 .wxss 文件中使用 @import 导入

list.wxml
<!--pages/list/list.wxml-->
<view class="box">
  你好
</view>
<view class="box">
  我是
</view>
<view class="box">
  SMM
</view>
list.wxss
/* pages/list/list.wxss */
@import 'common.wxss';
.box:nth-child(2){
  background: #66cc;
}
.box:nth-child(3){
  background: rgba(170, 112, 25, 0.8);
}
common.wxss
.box{
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 6px;
  background: #66ccff;
  color: #fff;
}

效果展示

%title插图%num
全局样式表

根目录中的 app.wxss 是作用于全部目录中项目的样式，权重最低；定义的样式会被局部样式取代

使用

编辑 app.wxss，可以设置各个组件的初始样式

案例演示

为所有的内容中的 view 组件设置蓝色背景色

app.wxss
/**
   app.wxss
   作用于全局样式，一般用于声明自定义默认样式
**/

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: #66ccff;
}
pages/list/list.wxml
<view class="box">
  你好
</view>
<view class="box">
  我是
</view>
<view class="box">
  SMM
</view>

效果展示

%title插图%num

新建的也同时继承 app.wxss 样式

局部样式表

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面

注意

  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

案例演示

使用局部样式覆盖全局样式的样式

list.wxml
<view class="box">
  你好
</view>
<view class="box">
  我是
</view>
<view class="box">
  SMM
</view>
app.wxss
view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: #66ccff;
}
list.wxss（局部样式）
view{
  background: red;
  color: #fff;
}

效果演示

%title插图%num
全局项目配置

相关文档

小程序项目的根目录下的 app.json 文件是小程序的全局配置文件，常用的配置项如下：

成员 描述
pages 记录当前小程序所有页面的存放路径
window 全局设置小程序窗口的外观
tabBar 设置小程序底部的 tabBar 效果
style 是否启用新版的组件样式
window

说明

该成员项可设置小程序窗口的样式，小程序窗口由下图标注的区域组成

%title插图%num

常用配置项

属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor Hexcolor #000000 导航栏背景颜色，如#000000 仅支持16进制颜色
navigationBarTextStyle string white 导航栏标题颜色，仅支持black / white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉loading 的样式，仅支持dark / light
enablePullDowrRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

设置背景色、标题文字、标题颜色

app.json
{
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    // 背景颜色
    "navigationBarBackgroundColor": "#66ccff",
    // 标题文字
    "navigationBarTitleText": "初号机",
    // 标题文字颜色 只支持黑色/白色
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果展示

%title插图%num

开启下拉刷新

app.json
/*

  在 app.json 开启下拉刷新时
  会作用于所有页面
  因此，所有页面都开启了下拉刷新

*/

{
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTitleText": "初号机",
    "navigationBarTextStyle": "white",
    // 为所有页面开启下拉刷新 true
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果展示

%title插图%num

设置下拉刷新的背景色、loading样式、上拉触底的距离

app.json
/*

  在 app.json 开启下拉刷新时
  会作用于所有页面
  因此，所有页面都开启了下拉刷新

*/

{
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "window": {
    // loading 样式 亮色/暗色
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTitleText": "初号机",
    "navigationBarTextStyle": "white",
    // 开启下拉刷新
    "enablePullDownRefresh": true,
    // 下拉刷新背景色
    "backgroundColor": "#66cc00",
    // 上拉触底距离 不建议修改
    "onReachBottomDistance": 20
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果展示

%title插图%num
tabBar

介绍

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序通常将其分为：

  • 底部 tabBar
  • 顶部 tabBar
%title插图%num

注意

  • tabBar 中只能配置最少 2 个、最多 5 个 tab 页面标签
  • 当渲染顶部 tabBar 时，不显示 icon ，只显示文本

tabBar 选择的页面路径必须是 pages 列表中声明的路径组中开头的位置

tabBar 的6个组成部分

%title插图%num
  • backgroundColor: tabBar的背景色
  • selectdlconPath: 选中时的图片路径
  • borderStyle: tabBar上边框的颜色
  • iconPath: 未选中时的图片路径
  • selectedcolor: tab选中时的文字颜色
  • color: tab上文字的默认(未选中)颜色

tabBar 节点配置项

tabBar 的成员

属性名 类型 必填 默认值 说明
position String 否 bottom tabBar 的位置，仅支持 bottom/top
borderStyle String 否 black tabBar 的颜色，仅支持 black/white
color HexColor 否 – tab上文字的默认(未选中)颜色
backgroundColor HexColor 否 – tabBar 的背景颜色
list Array 是 – tab页面的列表 (最少2个、最多5个tab)

tabBar 中 每个 list 中参数

属性名 类型 必填 描述
pagePath String 是 页面路径，页面必须在 pages 中预先定义
text String 是 tab上显示的文字
iconPath String 否 未选中时的图标路径，当postion 为 top 时，不显示 icon
selectedIconPath String 否 选中时的图标路径，当postion 为 top 时，不显示 icon

案例模拟

创建一个基础的 tabBar配置，并在页面中显示和实现切换

app.json
{
  // ...
   "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/list/list",
        "text": "测试"
      }
    ],
    "position": "top"
  }
}
index.wxml
<!--index.wxml-->
<view class="container">
  Weixin
</view>
list.wxml
<!--pages/list/list.wxml-->
<view>
  Hello smm
</view>

效果展示

%title插图%num

创建一个带有 icon 和 icon选中效果的 tabBar （图片资源自行准备，并在放置在根目录创建 images 文件夹里）

app.json
{
  // ...
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/cat_over.png",
        "selectedIconPath": "images/cat_on.png",
        "color": "#4e4e4e",
        "selectedColor": "#66ccff"
      },
      {
        "pagePath": "pages/list/list",
        "text": "测试",
        "iconPath": "images/cat2_over.png",
        "selectedIconPath": "images/cat2_on.png"
      }
    ],
    "position": "bottom",
    "color": "#2f2f2f",
    "selectedColor": "#fa4242"
  }
}
index.wxml
<!--index.wxml-->
<view class="container">
  Weixin
</view>
list.wxml
<!--pages/list/list.wxml-->
<view>
  Hello smm
</view>

效果展示

%title插图%num

图标素材

%title插图%num
%title插图%num
%title插图%num
%title插图%num
页面配置

说明

小程序中，app.json 中的 window 节点可以全局配置小程序中每个页面的窗口表示，
如果某些小程序页面想要拥有特殊的窗口表现，此时 “页面级别的 .json配置文件” 就可以实现这种需求

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以 页面配置文件 为准

页面配置文件(xxx/xxx.json) 会覆盖掉全局配置文件(app.json)

常见页面配置

属性名 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色，如 #000000
navigationBarTextStyle String white 当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText String – 当前页面导航栏标题文字内容
backgroundColor HexColor #ffffff 当前页面窗口的背景色
backgroundTextStyle String dark 当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新的效果
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为 px

案例演示

修改单独目录下的页面配置文件(例如：list/list.json)，实现单独样式配置

list.json
/*
  页面配置会覆盖 app.json 中 window 项的全局配置样式
  这个特性可让我们自定义每个页面的一些小风格
  或者 实现功能性的部分（下拉加载/刷新）
*/

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#66cc00",
  "backgroundColor": "#66cc55",
  "enablePullDownRefresh": true,
  "navigationBarTitleText": "列表内容"
}
index.json
{
  "usingComponents": {},
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#66ccff",
  "navigationBarTitleText": "初号机",
  "backgroundColor": "#66cc00"
}
app.json
{
  // ...
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/cat_over.png",
        "selectedIconPath": "images/cat_on.png",
        "color": "#4e4e4e",
        "selectedColor": "#66ccff"
      },
      {
        "pagePath": "pages/list/list",
        "text": "测试",
        "iconPath": "images/cat2_over.png",
        "selectedIconPath": "images/cat2_on.png"
      }
    ],
    "position": "bottom",
    "color": "#2f2f2f",
    "selectedColor": "#fa4242"
  }
}

效果展示

%title插图%num
网络请求
配置请求域名

小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

  • 只能请求 HTTPS 类型的接口
  • 必须将接口域名添加到信任列表中
%title插图%num

配置 request 合法域名

将希望请求的接口域名配置在小程序合法域名列表中；
登录微信小程序后台 → 开发 → 开发管理 → 开发设置 → 服务器域名 → 修改 request 合法域名

注意事项：

  • 域名只支持 https 协议
  • 域名不能使用 IP地址 和 localhost
  • 域名必须经过 ICP备案
  • 服务器域名一个月内最多可申请 5次修改
%title插图%num

配置完成后，在开发者工具中的右上角详情的合法域名项中就有了该域名信息

%title插图%num
发起请求

基本使用

调用 wx.request() 方法，可以发起网络请求，示例代码如下：

JavaScript
  wx.request({
    // 请求的接口地址 必须以 https 协议
    url: 'https://www.escook.cn/api/get',
    // 请求的方式
    method: 'GET',
    // 发送到服务器的数据
    data: {
      name: 'smm',
      age: 23
    },
    // 请求成功后的 回调函数
    success: (res) => {
      console.log(res);
    }
  })

案例演示

发起GET请求，将得到的结果显示在页面中，并在后台打印信息

list.vxml
<!--pages/list/list.wxml-->
<button bindtap='getInfo'>发起GET请求</button>
<view>
  {{info}}
</view>
list.js
// pages/list/list.js
Page({
  data: {
    info: '',
  },
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'smm'
      },
      success: (res) => {
        console.log(res);
        this.setData({
          info: res.data.message
        });
      }
    })
  },
})

效果展示

%title插图%num

后台打印的效果如下

%title插图%num

发起POST请求，将得到的结果显示在页面中，并在后台打印信息

list.wxml
<!--pages/list/list.wxml-->
<button bindtap='getInfo'>发起POST请求</button>
<view>
  {{info}}
</view>
list.js
// pages/list/list.js
Page({
  data: {
    info: '',
  },
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: 'POST',
      data: {
        name: 'smm'
      },
      success: (res) => {
        console.log(res);
        this.setData({
          info: res.data.message
        });
      }
    })
  },
})

效果演示

%title插图%num

后台打印的效果如下

%title插图%num
预加载数据

在很多情况下，需要在页面刚加载的时候，自动请求一些初始化的数据。
此时需要在页面的 onLoad 事件中调用获取数据的函数，示例如下：

list.js
// pages/list/list.js
Page({
  // ...
  /**
   * 生命周期函数--监听页面加载
   */
   getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: 'POST',
      data: {
        name: 'smm'
      },
      success: (res) => {
        console.log(res);
        this.setData({
          info: res.data.message
        });
      }
    })
  },
  onLoad(options) {
     // 获取数据的方法
     this.getInfo()
  }
})
跳过合法域名校验

如果只有 http协议接口，或者后端只提供了 http协议接口，暂时没有提供 https协议接口，需要进行一些操作

操作

需要在微信开发者工具中，临时开启
【不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书】选项，跳过 request 合法域名的校验

注意：跳过 request 合法域名校验选项，仅限在开发调试阶段使用！

%title插图%num
跨域和Ajax的说明

介绍

跨域问题只存在于基于浏览器的 Web开发中，
由于小程序的宿主环境不是浏览器，而是微信客户端。所以小程序不存在跨域的问题

Ajax 技术的核心是提来于浏览器的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，
所以小程序的请求不叫 “Ajax请求“，而是叫做 “发起网络请求“

页面导航

了解如何实现页面之间的导航跳转、下拉刷新、上拉加载更多；与小程序的生命周期函数

说明

页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：

  • <a> href 链接
  • location.href

小程序中实现页面导航的两种方式

声明式导航

  • 在页面上声明一个 <navigator> 导航组件
  • 通过点击 <navigator> 组件实现页面跳转

编程式导航

  • 调用小程序的导航 API，实现页面跳转
声明式导航

导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面

在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 switchTab
示例
<navigator url="/pages/index/index" open-type="switchTab">跳转到首页</navigator>

导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面

在使用 <navigator> 组件跳转到普通非 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 navigate

注意：为了简便，在导航到非 tabBar 页面时，open-type=”navigate” 属性可以省略

示例
<navigator url="/pages/info/info" open-type="navigate">跳转到详情页</navigator>

后退导航

如果要后退到上一页面或多级页面，则要指定 open-type 属性和 delta 属性，其中：

  • open-type 的值必须是 navigateBack，表示要进行后退导航
  • delta 的值必须是整数类型的数字，表示要后退的层级
示例
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

注意：为了简便，如果后退到上一页面，则可以省略 delta属性，因为其默认值为 1

案例演示

list.wxml
<!--pages/list/list.wxml-->

<!--tabBar页面-->
<navigator url="/pages/index/index" open-type="switchTab">跳转到首页</navigator>
<!--非tabBar页面-->
<navigator url="/pages/info/info" open-type="navigate">跳转到详情页</navigator>
info.wxml
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
list.wxss
/* pages/list/list.wxss */
view{
  background: #66cc22;
  color: #fff;
  text-align: center;
  margin: 10px auto;
  max-width: 200px;
}
navigator{
  display: inline-block;
  padding: 20rpx 30rpx;
  background-color: #18adf1;
  margin: 10rpx;
  color: #ffff;
  border-radius: 24rpx;
}

效果展示

%title插图%num
编程式导航

导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面，其中 Object 参数对象的属性列表如下：

属性名 类型 是否必选 说明
url String 是 需要跳转的 tabBar 页面的路径，路径后面不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、调用失败都会执行)

具体的调用示例代码如下：

示例
<!-- 页面结构 -->
<button bindtap="gotoIndex">跳转到首页页面</button>
// 通过编程式导航 跳转到 index 页面
Page({
  gotoIndex() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  }
})

导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面

调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 页面，其中 Object 参数对象的属性列表如下：

属性名 类型 是否必选 说明
url String 是 需要跳转的 tabBar 页面的路径，路径后面不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、调用失败都会执行)

具体的调用代码示例如下：

示例
<!-- 页面结构 -->
<button bindtap="gotoInfo">跳转到信息页面</button>
// 通过编程式导航 跳转到 info 页面
Page({
  gotoInfo() {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  }
})

后退导航

调用 wx.navigateBack(Object object) 方法，可以返回上一页或多级页面。其中 Object 参数对象属性的可选属性列表如下：

属性名 类型 默认值 说明
delta Number 1 返回的页面数，如果 delta 大于现有页面数，则返回带哦首页
success function – 接口调用成功的回调函数
fail function – 接口调用失败的回调函数
complete function – 接口调用结束的回调函数(调用成功、调用失败都会执行)

具体的调用代码示例如下：

示例
<!-- 页面结构 -->
<button bindtap="gotoBack">返回</button>
// 通过编程式导航 后退到上一个页面
Page({
  gotoBack() {
    wx.navigateBack()
  }
})

案例演示

使用编程式导航实现 跳转到 tabBar页面、非 tabBar页面、后退 操作

list.wxml
<!--pages/list/list.wxml-->
<button bindtap="gotoIndex">跳转到首页</button>
<button bindtap="gotoMessage">跳转到详情页</button>
list.js
// pages/list/list.js
Page({
  // 跳转到 非tabBar页面
  gotoMessage() {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },
  // 跳转到 tabBar页面
  gotoIndex() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
})
info.wxml
<!--pages/info/info.wxml-->
<view>
  <button bindtap="gotoBack">返回</button>
</view>
info.js
// pages/info/info.js
Page({
  // 返回上一页
  gotoBack(){
    wx.navigateBack();
  }
})

效果演示

%title插图%num
导航传参

导航式传递参数

navigator 组件的 url 属性用来指定将要跳转到的页面路径。同时，路径的后面还可以携带参数：

  • 参数与路径之间使用 ? 分隔
  • 参数与参数值用 = 相连
  • 不同参数用 & 分隔
示例
<navigator url="/pages/info/info?name=smm&age=24">跳转传参</navigator>

编程式传递传参

在 对应编程式传参的 wx.navigateTo()、wx.switchTab() 函数中的 url 路径的 ? 后面的传递给目标页面参数

示例
  wx.switchTab({
   url: '/pages/index/index?name=smm&age=24'
  })

接收参数

相关文档

在需要传递参数的目标页面的 xxx.js 文件中有监听页面加载的 onLoad() 方法，通过它的options行参中获取

示例
// pages/info/info.js
Page({
  data: {
    query:null
  },
  onLoad(options) {
    // 通过 options 接收传递的参数
    this.setData({
      query:options
    })
  }
})

案例演示

向目标页面传递参数，目标页面接收参数并将值显示在页面中

list.wxml
<!--pages/list/list.wxml-->
<view>
  <navigator url="/pages/info/info?name=smm&age=24">声明式跳转传参</navigator>
  <button bindtap="gotoInfo">编程式跳转传参</button>
</view>
list.js
// pages/list/list.js
Page({
  gotoInfo(){
    // 跳转到 info 页面并传递参数
    wx.navigateTo({
      url: '/pages/info/info?name=aipo&age=20',
    })
  },
})
info.wxml
<!--pages/info/info.wxml-->
<view>
  传过来的值：
  名字：{{query.name}}
  年龄：{{query.age}}
</view>
info.js
// pages/info/info.js
Page({
  data: {
    query:null
  },
   // 生命周期函数--监听页面加载
  onLoad(options) {
    // 接收参数 并渲染到页面
    this.setData({
      query:options
    })
  },

})

效果展示

%title插图%num
页面事件
下拉刷新样式

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据

启用下拉刷新

全局开启下拉刷新

局部开启下拉刷新

  • 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

在实际开发中，推荐使用第二种方式，为需要的页面单独开启下拉刷新的效果

配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新页面的样式，其中：

  • backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
  • backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
示例
{
  "usingComponents": {},
  // 开启下拉刷新
  "enablePullDownRefresh": true,
  // 下拉 背景色
  "backgroundColor": "#efefef",
  // 下拉 loading 样式
  "backgroundTextStyle": "dark"
}
监听下拉刷新

监听下拉刷新

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件

示例
Page({
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  }
})

停止下拉刷新

当执行下拉刷新后，下拉刷新的 loading 效果会一直显示不会主动消失。通过 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新状态

JavaScript
Page({
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
     // ... 代码执行完成
     wx.stopPullDownRefresh()
  }
})

案例演示

执行下拉刷新后，从接口返回一张图片并显示在界面上

images.wxml
Page({
  data: {
    image: ''
  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {
    // 发起网络请求
    wx.request({
      url: 'https://imgapi.cn/api.php',
      data:{
        zd:'pc',
        gs:'json'
      },
      success: (res) =>  
        // 将返回的数据渲染到界面  
        this.setData({
          image: res.data.imgurl
        });
        // 关闭下拉刷新状态
        wx.stopPullDownRefresh();
      }
    })
})
image.json
{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#66cc77",
  "backgroundTextStyle": "dark"
}
image.wxml
<!--pages/image/image.wxml-->
<view>
  <image src="{{image}}" mode="heightFix"/>
</view>

效果展示

%title插图%num
监听上拉触底

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而触发加载更多数据的行为

监听上拉触底事件

在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

示例
Page({
  // 监听上拉触底事件
  onReachBottom() {
      console.log('触发上拉触底事件');
  }
})

注意：只有在内容区域有一定的高度时，才能触发上拉触底事件

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离；
可在全局或页面上的 .json 配置的文件中通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可按照自己需求修改默认值

示例
{
  "onReachBottomDistance": 150
}

案例演示

实现页面加载时向接口发起随机颜色数据请求，并在页面触底时向接口再次发起数据请求，并叠加在原数组中

Vue HTML
<view wx:for="{{colorList}}"
  wx:key="index"
  class="num-item"
  style="background-color: rgba({{item}});">
  {{item}}
</view>
CSS
.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  height: 200rpx;
  margin: 15rpx auto;
  width: 98%;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}
JavaScript
// pages/image/image.js
Page({
  data: {
    colorList: []
  },
  getColors() {
    // 请求随机颜色数据
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res }) => {
        // 将返回的随机颜色 [{x,x,x},{x,x,x}]赋值到对应变量，并重新渲染界面
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      }
    })
  },
  // 生命周期函数--监听页面加载
  onLoad(options) {
    this.getColors()
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    this.getColors();
  }
})

效果展示

%title插图%num

添加 loading 提示效果

相关文档

在上拉触底向服务器请求数据的加载过程中，允许显示 loading 提示样式。
通过 wx.showLoading({}) 显示提示框，通过 wx.hideLoading() 关闭提示框

%title插图%num

wx.showLoading 的具体参数为

属性 类型 默认值 必填 说明
title string 是 提示的内容
mask boolean false 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

节流处理

用户频繁上下滑动时，会频繁多次触发上拉触底事件，一般就会不断的执行向服务器发起加载更多的请求操作
因此我们得为上拉触底事件处理方法做一个节流处理。

在 data 中定义 isloafing 节流阀

  • false 表示当前没有进行任何数据请求
  • true 表示当前正在进行数据请求

在 update() 方法中修改 isloading 节流阀的值

  • 在刚调用 update 时将节流阀设置为 true
  • 在网络请求的 complete 回调函数中，将节流阀重置为 false

在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

  • 如果节流阀值为 true，则阻止当前请求
  • 如果节流阀的值为 false，则发起数据请求
JavaScript
Page({
  data: {
    image: [],
    isloding: false,
  },
  update() {
    // 执行时 设置为 true 阻止再次的请求
    this.setData({
      isOver: true
    })
    // 异步操作结束后 节流阀关 允许再次调用
    complete(){
       isOver: false
    }
  }
  onReachBottom() {
   // 每次触底事件触发前执行判断 若节流阀开 不执行请求
   if (this.data.isOver) return
    this.update()
  }
})

案例演示

页面加载完成后加载图片，并在上拉触底后继续加载图片(节流操作)，在发起请求中途期间呈现加载的样式

image.wxml
<view wx:for="{{image}}" wx:key="index">
  <image src="{{item.url}}" mode="widthFix" />
</view>
image.js
Page({
  data: {
    image: [],
    isOver: false,
  },
  getImage() {
    wx.request({
      url: 'https://image.anosu.top/pixiv/json',
      data: {
        num: 5
      },
      success: (res) => {
        this.setData({ image: res.data });
      }
    })
  },
  updateImage() {
   // 节流阀 如果上一个请求还未结束
   if (this.data.isOver) return
    this.setData({
      isOver: true
    })
    // 显示加载动画
    wx.showLoading({
      title: 'st弹幕装填中...',
    })
    wx.request({
      url: 'https://image.anosu.top/pixiv/json',
      data: {
        num: 5
      },
      success: (res) => {
        this.setData({
          image: [...this.data.image, ...res.data],
          isOver: false
        });
        // 加载动画关闭
        wx.hideLoading();
      }
    })
  },

  // 生命周期函数--监听页面加载
  onLoad(options) {
      this.getImage();
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    this.updateImage();
  }
})
image.wxss
view{
  width: 100%;
  margin: 0;
  background: #66ccff;
}

效果展示

%title插图%num
生命周期
介绍

说明

生命周期(Life Cycle) 是指的一个对象从 创建 → 运行 → 销毁 的整个阶段，强调的是一个时间段。小程序的生命周期指的是：

  • 小程序的启动，表示生命周期的开始
  • 小程序的关闭，表示生命周期的结束
  • 中间小程序运行的过程，就是小程序的生命周期
%title插图%num

生命周期的分类

在小程序中，生命周期分为两类，分别是：

应用的生命周期

  • 特指小程序从启动 → 运行 → 销毁的过程

页面的生命周期

  • 特指小程序中，每个页面的加载 → 渲染 → 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

%title插图%num

小程序的生命周期

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期自动按次序执行

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作；
例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

应用的生命周期

小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

app.js
App({
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {},
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function (options) {},
  // 当小程序从前台进入后台，会触发 onHide
  onHide: function () {},
  // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {}
})
页面的生命周期

相关文档

小程序的页面声明周期函数需要在页面的 .js 文件中进行声明，示例代码如下：

JavaScript
Page({
  // 生命周期函数--监听页面加载，只调用1次
  onLoad(options) {},
  // 生命周期函数--监听页面初次渲染完成，只调用1次
  onReady() {},
  // 生命周期函数--监听页面显示
  onShow() {},
  // 生命周期函数--监听页面隐藏
  onHide() {},
  // 生命周期函数--监听页面卸载，只调用1次
  onUnload() {},
})

onLoad(opetions)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
通过该声明周期函数中调用 wx.setNavigationBarTitle 可立即修改小程序的头部标题内容

WXS脚本
介绍

相关文档、官方文档

wxs 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。
因此小程序中 wxs 的典型应用场景就是 “过滤器“

%title插图%num
wxs 的特点

wxs 和 javaScript 的关系

虽然 wxs 的语法类似于 javaScript，但是 wxs 和 javaScript 是完全不同的两种语言：

wxs 有自己的数据类型

  • number 数值类似、srting 字符串类型、boolean 布尔类型、object 对象类型
  • function 函数类型、array 数组类型、data 日期类型、regexp 正则

wxs 不支持类似于 ES6 及以上的语法形式

  • 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、ect…
  • 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

wxs 遵循 CommonJS 规范

  • module 对象
  • require() 函数
  • module.exports 对象

WXS 适用范围

wxs 典型的应用场景就是” 过滤器”，经常配合 Mustache 语法进行使用

示例
<view> {{m1.toUpper(country)}} </view>

但是，在 wxs 中定义的函数不能作为组件的事件回调函数

错误示例
<button bindtap="m2.toLower">按钮</button>

隔离性

隔离性指的是 wxs 的运行环境和其他 javaScript 代码是隔离的，体现在如下两方面

  • wxs 不能调用 js 中定义的函数
  • wxs 不能调用小程序提供的 API

性能好

  • 在 IOS 设备上，小程序内的 WXS 会比 javaScript 代码快 2~20倍
  • 在 android 设备上，二者的运行效率无差异
内嵌 wxs 脚本

内嵌 wxs 脚本

wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 javaScript 代码可以在 html 中以 <script> 内部书写

wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，
方便在 wxml 中访问模块中的成员：

示例
<view>
  {{m1.toUpper(username)}}
</view>

<wxs module="m1">
  module.exports.toUpper = function (str) {
    return str.toUpperCase()
  }
</wxs>

案例模拟

将数据显示在界面前 预先通过 wxs 提供的方法转换成大写

info.wxml
<view>
  {{m1.toUpper(sayHi)}}
</view>

<wxs module="m1">
module.exports.toUpper = function (str) {
    // // 将文本转为大写形式 zs → ZS
    return str.toUpperCase()
  }
</wxs>
info.js
Page({
  data: {
    sayHi:'hello word'
  }
})
info.wxss
view{
  padding: 10px;
  background-color: #66ccff;
  margin: 20px;
  text-align: center;
}

效果展示

%title插图%num
外联 wxs 脚本

相关文档

外联 wxs 脚本

wxs 代码可以编写在以 .wxs 为后缀名的文件内，类似 javaScript 代码可以写在 .js 文件中一样

示例
// 定义文字转小写模块
function toLower(str) {
  return str.toLowerCase();
}
// 导出模块
module.exports = {
  toLower: toLower
}

一般可以在 微信小程序项目中的 utils 文件夹中定义对应的 wxs 文件，方便使用

引用外联 wxs 脚本

在 wxml 中引入外联的 wxs 脚本，必须为 <wxs> 标签添加 module 和 src 属性，其中：

  • module 用来指定模块的名称
  • src 用来指定要引入的脚本的路径，且必须是相对路径
示例
<!-- 调用 m2 模块中的方法 -->
<view>
  {{m2.toLower(sayHi)}}
</view>
<!-- 引用外联的 tools.wxs 脚本 并命名为 m2 -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

案例模拟

输入框的内容写入英文字母内容后，通过 wxs 定义的过滤器效果，在下方同步呈现小写的字母

info.wxml
<!-- 输入框绑定赋值事件处理函数 -->
<input type="text" bindinput="chuangText" />
<text>转小写</text>
<view>
  <!-- 将得到的结果通过 wxs 动态转小写 -->
  {{m1.toLower(sayHi)}}
</view>
<wxs src="../../utils/tools.wxs" module="m1"></wxs>
tools.wxs
// 定义文字转小写模块
function toLower(str) {
  return str.toLowerCase();
}
// 导出模块
module.exports = {
  toLower: toLower
}
JavaScript
Page({
  data: {
    sayHi:''
  },
  chuangText(e){
    this.setData({
      // 获取输入框数据 并动态赋值给 sayHi
      sayHi:e.detail.value
    })
  },
})

效果展示

%title插图%num
自定义组件
创建组件

创建组件

  • 在项目的根目录中，鼠标右键，创建 components → test 文件夹
  • 在新建的 components → test 文件夹上，鼠标右键。点击 “新建 Component”
  • 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js、.json、.wxml 和 .wxss
%title插图%num
引用组件

局部引用组件

在 页面的 .json 配置文件中引用组件的方式，叫做”局部引用”，该组件只能在当前页面使用。示例代码如下：

示例
// 在页面的 .json 文件中，引入组件
{
  "usingComponents": {
    "my-test":"/components/test/test"
  }
}
<!-- 在页面的 .wxml 文件中，使用组件 -->
<my-test></my-test>

效果展示

%title插图%num

全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做”全局引用”。该组件可在所有页面使用，示例代码如下：

示例
// 在 app.json 文件中，引入组件
{
  // ... 省略其他内容
  "usingComponents": {
    "my-test": "/components/test/test"
  },
}
<!-- 在页面的 .wxml 文件中，使用组件 -->
<my-test></my-test>

效果展示

%title插图%num

全局引用与局部引用场景

根据组件的使用频率和范围，来选择合适的引用方式：

  • 如果某组件在多个页面中经常被用到，建议选择全局引用
  • 如果某组件只在特定的页面中被用到，建议选择局部引用

组件和页面的区别

从表面上看，组件和页面都是由 .js、.json、.wxml、.wxss 四个文件组成。但是组件和页面的 js 与 json 文件有明显不同：

  • 组件的 .json 文件中需要声明 “component”:true 属性
  • 组件的 .js 文件中调用的是 Component() 函数
  • 组件的事件处理函数需要定义到 methods 节点中
组件样式隔离

简介

默认情况下，自定义组件的样式只对当前组件生效。不会影响到组件之外的 UI 结构，如图所示：

  • 组件 A 的样式不会影响 组件C 的样式
  • 组件 A 的样式不会影响 小程序页面样式
  • 小程序页面样式不会影响组件 A 和 C 的样式

好处

  • 防止外界的样式影响组件内部的样式
  • 防止组件的样式破坏外界的样式
%title插图%num

注意事项

  • app.wxss 中的全局 class样式 和 调用组件的页面的 class 样式 对组件无效。
  • 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器

修改组件样式隔离选项

相关文档

默认情况下，自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。
但有时，他们希望在外界能够控制组件内部样式，可以通过 stylesolation 修改组件的样式隔离选项。用法如下：

【用法一】在组件的 .js 文件中新增如下配置

组件.js
// components/test/test.js
Component({
  // 配置对象
  options: {
    styleIsolation: 'isolated'
  }
})

【用法二】或在组件的 .json 文件中新增如下配置

组件.json
{
  // ...
  "styleIsolation": "isolated"
}

stylelsolation 的可选值如下：

可选值 默认值 描述
isolated 是 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
apply-shared 否 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared 否 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件
数据、方法、属性

data 数据

在小程序中，用于组件模板渲染的私有数据，需要定义到 data节点 中，示例如下：

示例
Component({
  // 组件的初始数据
  data: {
    count: 0
  }
})

methods 方法

在小程序中，事件处理函数和自定义方法需要定义到 methods节点 中，示例如下：

示例
Component({
  // 组件的初始数据
  data: {
    count: 0
  },
  // 组件的方法列表
  methods: {
    // 事件处理函数
    addCount() {
      this.setData({
        count: this.data.count + 1
      })
      // 通过 this 直接调用自定义
      this._showCount();
    },
    // 自定义方法建议以 _开头
    _showCount() {
      wx.showToast({
        title: 'count值为：' + this.data.count,
        icon: 'none'
      });
    }
  }
})
<view class="testComponent">
<text>组件区域</text>
  <button bind:tap="addCount">按钮</button>
  <view>
    {{count}}
  </view>
</view>

效果展示

%title插图%num

Properties 属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据。示例代码如下:

组件接收参数

my-test 组件示例
Component({
  // 组件的属性列表
  properties: {
    // 第一种方式 简化的方式
    max:Number,
    // 第二种方式 完整写法
    min:{
      // 值类型
      type:Number,
      // 默认值
      value:10,
    }
  }
})

传递给组件参数

示例
<my-test max="9"></my-test>

使用 this.properties.xx 在组件中使用父级传递过来的参数

示例
Component({
    properties: {
    // 第一种方式 简化的方式
    max: Number,
    // 第二种方式 完整写法
    min: {
      // 值类型
      type: Number,
      // 默认值
      value: 10,
    }
  },
  // 组件的方法列表
  methods: {
    // 事件处理函数
    getMax(){
    console.log(this.properties.max);
   }
  }
})

案例演示

使组件自增的数值大小受调用方的约束，调用页面在组件中传入固定的数值将作为组件的最大值

home.wxml
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>
  <my-test max="9"></my-test>
</view>
test.wxml
<!--components/test/test.wxml-->
<view class="testComponent">
<text>组件区域</text>
  <button bind:tap="addCount">按钮</button>
  <view>
    {{count}}
  </view>
</view>
test.js
// components/test/test.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 第一种方式 简化的方式
    max: Number,
    // 第二种方式 完整写法
    min: {
      // 值类型
      type: Number,
      // 默认值
      value: 10,
    }
  },
  data: {
    count: 0
  },
  methods: {
    addCount() {
      // 如果自增的 count 值大于等于 父级传入的值
      if (this.data.count >= this.properties.max) return
      this.setData({
        count: this.data.count + 1
      });
      this._showCount();
    },
    _showCount() {
      wx.showToast({
        title: 'count值为：' + this.data.count,
        icon: 'none'
      });
    }
  }
})

效果展示

%title插图%num
data 与 properties 区别

在小程序的组件中，properties 属性和 data 数据的用法相同。它们都是可读可写的，只不过：

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据

实际上，data 和 properties 对象指向的是同一个下标。因此 this.data === this.properties 返回为 true

JavaScript
Component({
  properties: {
    // 完整写法
    max: {
      // 值类型
      type: Number,
      // 默认值
      value: 9,
    }
  },
  data: {
    count: 0
  },
  methods: {
    getMax(){
      // data 和 properties 都能获取对方的值
      console.log(this.properties.count); // 0
      console.log(this.data.max); // 9
    }
  },
})

使用 setData 修改 properties 的值

由于 data 属性和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染；
也支持使用 set.Data() 为 properties 中的属性重新赋值；

wxml
 <view class="testComponent">
  <text>组件区域</text>
  <button bind:tap="addCount">+1</button>
  <view>
    max的值:{{max}}
  </view>
</view>
js
Component({
  // 定义属性
  properties: {
    max: Number,
  },
  methods: {
    addCount() {
      // 使用 setData 修改属性的值
      this.setData({
        max: this.properties.max + 1
      });
    },
})

效果展示

%title插图%num
数据监听器

数据监听器用于监听和相应任何属性和数据字段的变化，从而指向特定的操作。
它的作用类似于 vue 中的 watch 侦听器。在小程序中语法如下：

示例
Component({
  observers: {
    '字段A,字段B': function (字段A的新值, 字段B的新值) {
      // 执行操作
    }
  }
})

案例演示

实现 两个值的改变，通过数据监听器的监听，动态的改变另外一个值

wxml
<view class="testComponent">
  <text>组件区域</text>
  <view>
    {{n1}} + {{n2}} = {{sum}}
  </view>
  <button bind:tap="addN1">n1 自增</button>
  <button bind:tap="addN2">n2 自增</button>
</view>
JavaScript
Component({
  // 数据节点
  data: {
    n1: 0,
    n2: 0,
    sum: 0
  },
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      });
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      });
    }
  },
  // 数据监听节点
  observers: {
    // 监听 n1 和 n2 数据的变化
    'n1,n2': function (n1, n2) {
      // 通过监听器 自动计算 sum 的值
      this.setData({
        sum: n1 + n2
      })
    }
  }
})

效果展示

%title插图%num

监听对象中属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

示例
Component({
  observers: {
    '对象.属性A,对象.属性B': function (属性A的新值, 属性B的新值) {
      // 触发此监听器的3 种情况
      /*
        为【属性A赋值】使用 setData 设置 this.data.对象.属性 时触发
        为【属性A赋值】使用 setData 设置 this.data.对象.属性 时触发
        【直接为对象赋值】 使用 setData 设置 this.data.对象 时触发
      
      */
    }
  }
})

监听对象中所有属性的变化

在监听器 observers 中需要监听的对象的属性若太多，为了方便，可以使用通配符 ** 来监听对象中所有属性变化

JavaScript
// components/test3/test3.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    obj: {
      name: 'apio',
      sex: '女',
      like: '画画'
    }
  },
  observers: {
    // 监听对象中所有属性 若其中一个发生变化就触发该函数
    'obj.**': function (obj) {
      // ...
    }
  }
})

案例演示

通过点击三个按钮（R、G、B），控制界面颜色对应数值的自增，并呈现对应的rgb颜色样式

wxml
<view class="colorBox" style="background: rgb({{fullColor}});">
  颜色值：{{fullColor}}
</view>
<button size="mini" type="default">R</button>
<button size="mini" type="primary">G</button>
<button size="mini" type="warn">B</button>
wxss
.colorBox{
  width: 100%;
  line-height: 400rpx;
  font-size: 46rpx;
  color: white;
  text-shadow: 0prx,0rpx,2rpx,black;
  height: 400rpx;
  text-align: center;
}
js
Component({
  data: {
    rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0,0,0'
  },
  methods: {
    changeR() {
      // 修改 rgb 对象上 r 属性的值
      this.setData({
        'rgb.r': this.data.rgb.r + 15 > 255 ? 255 : this.data.rgb.r + 15
      })
    },
    changeG() {
      // 修改 rgb 对象上 g 属性的值
      this.setData({
        'rgb.g': this.data.rgb.g + 15 > 255 ? 255 : this.data.rgb.g + 15
      })
    },
    changeB() {
      this.setData({
        // 修改 rgb 对象上 b 属性的值
        'rgb.b': this.data.rgb.b + 15 > 255 ? 255 : this.data.rgb.b + 15
      })
    }
  },
  observers: {
    /*
    监听对应数据的变化的事件 可以使用 "rgb.r,rgb.g,rgb.b"
    但是这里被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性变化
    */ 
    'rgb.**': function (obj) {
      this.setData({
        // 为 fullColor 对应的颜色进行赋值
        fullColor: `${obj.r},${obj.g},${obj.b}`
      })
    }
  }
})

效果展示

%title插图%num
纯数据字段

介绍

概念：纯数据字段指的是那些不用于界面渲染的 data 字段

有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。
带有这种特征的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能

使用

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合正则表达式的字段将成为纯数据字段

示例
Component({
  options:{
    // 指定所有 _ 开头的数据字段为 纯数据字段
    pureDataPattern:/^_/
  }
  data: {
    a:true, // 普通数据字段
    _b:true // 纯数据字段
  }
})

例子

下方所示，addNum 数据既不用于渲染页面，也不作为组件参数的传递。为了优化页面更新，设置为数据字段

示例
Component({
  options: {
    pureDataPattern: /^_/
  },
  data: {
    count: 0,
    // 将 addNum 改造成 数据字段
    _addNum: 1
  },
  methods: {
    addCount() {
      this.setData({
        count: this.data.count + this.data._addNum
      })
    }
  }
})
组件的生命周期

小程序组件可用的全部生命周期并顺序如下表所示

生命周期函数 参数 描述说明
created – 在组件实例刚刚被创建时执行
attached – 在组件实例进入页面节点树时被执行
ready – 在组件在视图层布局完成后执行
moved – 在组件实例被移动到节点树另一个位置时执行
detached – 在组件实例被从页面节点树移除时执行
error Object Error 每当组件方法抛出错误时执行

组件主要的生命周期函数

在小程序中，最主要的生命周期函数有 3 个。分别是 created、attached、detached。它们各自的特点如下：

组件实例刚被创建好的时候，created生命周期函数会被触发

  • 此时还不能调用 setData
  • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

在组件完全初始化完毕，进入页面节点树后。attached 生命周期函数会被调用

  • 此时，this.setData 已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行 (例如发请求获取初始数据)

在组件离开页面节点树后，detached 生命周期函数会被触发

  • 退出一个页面时，会触发页面每个自定义组件的 detached 生命周期函数
  • 此时适合做一些清理性质的工作 (例如解绑事件监听)

lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明 (这是推荐的方式，其优先级最高)

示例
Component({
  // 推荐用法 若在此处定义 生命周期函数会忽略 对应的旧式定义的生命周期函数的方法
  lifetimes: {
    attached() {}, // 在组件实例进入页面节点树时执行
    detached() {}, // 在组件实例被从页面节点树移除时执行
  },
  // 以下是旧式定义方式
  attached() {}, // 在组件实例进入页面节点树时执行
  detached() {}, // 在组件实例被从页面节点树移除时执行
})
组件所在页面的生命周期

简介

有时候，自定义组件的行为依赖于页面状态的变化，此时组件内就需要用到组件所在页面的生命周期

案例说明

例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是：

生命周期函数 参数 描述说明
show – 组件所在页面被展示时执行
hide – 组件所在的页面被隐藏时执行
resize Object Size 组件所在的页面尺寸变化时执行

通过监听 show 事件，即可判断组件对应的页面是否展示。从而执行初始化的操作

pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下：

示例
Component({
   // 组件所在页面生命周期函数
   pageLifetimes: {
    show() {}, // 页面被展示
    hide() {}, // 页面被隐藏
    resize(size) {}, // 页面尺寸变化
  }
})

给组件绑定对应的 所在页面周期函数后，能在控制台看到页面切换时触发的事件和事件所挂载的提示

JavaScript
Component({
  pageLifetimes: {
    show() {
      console.log('页面被展示');
    }, 
    hide() {
      console.log('页面被隐藏');
    }, 
    resize(size) {}, 
  },
})

效果展示

%title插图%num

案例演示

每次访问页面，页面的组件都随机显示一串颜色代码，并显示为背景

wxml
<view class="colorBox" style="background: rgb({{fullColor}});">
  颜色值：{{fullColor}}
</view>
js
Component({
  data: {
    fullColor: '0,0,0',
  },

  methods: {
    _randomColor(){
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      console.log(r, g, b);
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    }
  },
  pageLifetimes: {
    show() {
      this._randomColor();
    }
  }
})

效果展示

%title插图%num
插槽

在自定义组件的 wxml 结构中，可以提供一个 <slot> 节点(插槽)，用于承载组件使用者提供的 wxml 结构

%title插图%num

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位。这种个数上限制叫做单个插槽

示例
<!-- 组件的封装者 -->
<view class="wrapper">
  <view>
    这里是组件的内部节点
  </view>
  <!-- 对于不确定的内容，可以使用 <slot> 进行占位，具体内容由组件的使用者觉得 -->
  <slot></slot>
</view>
<!-- 组件的使用者 -->
<component-tag-name>
  <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>
    这里是插入到组件 slot 中的内容
  </view>
</component-tag-name>

启用多个插槽

在小程序的自定义组件中，需要使用多个 <slot> 插槽时，可以在组件的 .js 文件中，通过如下方式启用

示例
Component({
  options: {
    // 在组件定义时的选项中启用多 slot 支持
    multipleSlots: true
  }
})

定义多个插槽

可以在组件的 .wxml 中使用多个 <slot> 标签，以不同的 name 来区分不同的插槽。（类似 vue 具名插槽）

组件示例
<!-- 组件模板 -->
<view class="wrapper">
  <!-- name 为 before 的第一个 slot 插槽 -->
  <slot name="before"></slot>
  <view>
    这是一段固定的文本内容
  </view>
  <!-- name 为 after 的第一个 slot 插槽 -->
  <slot name="after"></slot>
</view>
引用组件的页面
<view>
  <my-test4>
    <view slot="before">
      这是插入到 before插槽 的内容
    </view>
    <view slot="after">
      这是插入到 after插槽 的内容
    </view>
  </my-test4>
</view>

效果展示

%title插图%num
父子组件通信

父子组件之间的通讯的 3 种方式

相关文档 (增加了本地存储传递参数、全局变量传递参数的方式)

属性绑定

  • 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

事件绑定

  • 用于子组件向父组件传递数据，可以传递任意数据

获取组件实例

  • 父组件还可以通过 this.selectComponent() 获取子组件实例对象
  • 这样就可以直接访问子组件的任意数据和方法

父向子传值 – 属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下

存疑：测试时发现，当前版本 1.06 微信开发者工具下的小程序允许父向子传入对象，
与文档描述的 “只能传普通类型数据” 的描述不符

父组件传值
<view>
  <my-test4 num="{{count}}"></my-test4>
</view>
 Page({
    data: {
      count: 0
    }
  })
子组件接收
<text>子组件接收到父级传递的参数为 {{num}}</text>
// components/test4/test4.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      num:Number
  },
})

子向父传参 – 事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据，使用步骤如下：

  1. 在父组件的 .js 文件中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
  2. 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件
  3. 在子组件的 .js 中，通过调用 this.triggerEvent(‘自定义事件名称’,{/* 参数对象 */}) 将数据发送到子组件
  4. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
父组件
  <!-- 通过自定义事件 changeInfo 监听接收子组件发送的值 -->
  <my-test smm="{{obj}}" bind:changeInfo="setMyData"></my-test>
 Page({
    data: {
      obj:{
        name:'zs',
        age:34
      }
    },
    setMyData(e){
      // 接收子组件传递过来的 事件对象 中 e.detail 值
      this.setData({
        obj:e.detail
      })
    }
  })
子组件
Component({
  properties: {
      smm:Object
  },
  methods: {
    changeData(){
      // 将父级接收过来的对象增加一项
      this.setData({
        'smm.like':'画画'
      });
      // 向父级传递 改变后的对象 参数
      this.triggerEvent('changeInfo',this.properties.smm);
    }
  }
})

案例模拟

将父级传递过来的值在子组件中自增，并通过事件绑定的方式将当前值传给父级，使父级页面的值与组件同步

home.wxml
<view class="wrapper">
 子组件中，count 值为 {{count}}
 <button type="primary" bindtap="addCount">+1</button>
</view>
home.js
Component({
  properties: {
    count: Number
  },
  methods: {
    addCount() {
      // 将父级接收过来的对象执行自增
      this.setData({
        count: this.properties.count + 1
      });
      // 向父级传递 改变后的对象 参数
      this.triggerEvent('sync', this.properties.count);
    }
  }
})
my-test.wxml
<view>
  <my-test count="{{num}}" bind:sync="setMyData">
  </my-test>
  <view>
  父组件中，count 值为 {{num}}
</view>
my-test.js
 Page({
    data: {
      num: 0,
    },
    setMyData(e){
      // 接收子组件传递参数 并赋值
      this.setData({
        num:e.detail
      })
    }
  })

效果展示

%title插图%num

获取组件实例

可在父组件里调用 this.selectComponent(“id或class选择器”)，获取子组件的实例对象。从而访问子组件的任意数据和方法。

调用子组件时需要传入一个选择器，例如：this.selectComponent(“.my-component”)

示例
  <my-test4 count="{{count}}" class="customA"></my-test4>
  <button bindtap="getChild" type="primary">获取组件实例</button>

  Page({
    data: {
      count: 0
    },
    getChild() {
      // 获取组件 可使用类名或id等方式获取 但不能直接使用 标签选择器
      // 直接选择 'my-test4' 标签 返回的为 null
      const child = this.selectComponent('.customA');
      // 调用子组件方法 使子组件中 count 值自增
      child.setData({
        count: child.properties.count + 1
      })
      // 也可调用子组件 methods 中的定义的 addCount 方法
      child.addCount();
    }
  })
behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”

%title插图%num

组件中若有一部分代码完全一样，就没有必要再次声明。可以封装出来放在 behavior 中，对应组件需要时调用

工作方式

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，，它的属性、数据和方法会被合并到组件中

创建 behavior

调用 Behavior(Object object) 方法可创建一个共享的 behavior 实例对象，供所有组件使用：

示例
//调用 Behavior 方法创建实例
module.exports = Behavior({
  // 属性节点
  properties: {},
  // 私有数据节点
  data: {
    'username': 'zs'
  },
  methods: {}
  // 其他节点
})

导入并使用 behavior

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法

示例
const myBehavior = require('../../behavior/my-behavior');
Component({
  // 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中 即可生效
  behaviors:[myBehavior]
})

behavior 中所有可用的节点

可用的节点 类型 是否必填 描述
properties Object Map 否 同组件的属性
data Object 否 同组件的数据
methods Object 否 同自定义组件的方法
behaviors String Array 否 引入其它的 behavior
created Object Map 否 生命周期函数
attached Function 否 生命周期函数
ready Function 否 生命周期函数
moved Function 否 生命周期函数
detached Function 否 生命周期函数

同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，此时可以参考如下三种同名时的处理规则：

  1. 同名的数据字段 data
  2. 同名的属性 properties 或方法 methods
  3. 同名的生命周期函数

关于详细的覆盖和组合规则，可以参考 官方文档 给出的说明；

vant UI组件库
使用 npm包

目前小程序已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是在小程序中使用 npm 包有如下 3 个限制：

  • 不支持依赖于 Node.js 内置库 的包
  • 不支持依赖于 浏览器内置对象 的包
  • 不支持依赖于 C++ 插件 的包

总结：虽然 npm 上的有很多，但是能提供小程序使用的包 为数不多

vant Weapp介绍

Vant weapp 是有赞前端团队开源的一套小程序UI组件库，助力开发快速搭建小程序应用。它所使用的是 MIT开源许可协议。对商业使用比较友好

%title插图%num
%title插图%num

官方文档地址：https://youzan.github.io/vant-weapp

安装 Vant组件库

官方教程

在小程序项目中，安装 Vant 组件库 主要分为如下3步：

  1. 通过小程序安装 (建议指定版本为 @1.3.3)
  2. 构成 npm包
  3. 修改 app.json

初始化包管理工具

终端
npm init -y

npm 下载

使用 npm 构建前，请先阅读微信官方的 npm 支持

终端
# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

project.config.json
{
  // ...
  "setting": {
    // ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

%title插图%num

【测试】导入 vant 按钮组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可，界面通过 <van-button> 使用

app.json
{
    // ...
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
}
index.wxml
<!--index.wxml-->
<view class="container">
<view>
  按钮类型
</view>
  <van-button type="default">默认按钮</van-button>
  <van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<view>
  加载状态
</view>
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
<view>
  按钮尺寸
</view>
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>
</view>

效果展示

%title插图%num
定制 Vant主题样式

通过 CSS自定义属性 的方式，重新给 vant 组件的默认样式赋值，用于改变 vant 对应组件的 默认样式

前置知识：CSS自定义属性

简介

在 html 的 css 里允许设定自定义属性，开头以双减号命名的属性 被视为 自定义属性；在作用域下的子级类或标签可通过 var() 来使用

HTML
  <style>
        :root{
            --main-bj-color:red;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 10px;
            background-color: var(--main-bj-color);
        }
        .title{
            width: 300px;
            height: 300px;
            margin: 10px;
            background-color: var(--main-bj-color);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="title"></div>
</body>

效果展示

%title插图%num

定制 vant主题样式

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件

打开 app.wxss 中，写入 css 变量，即可对全局生效，改变默认样式

app.wxss
page{
  --button-danger-background-color:#990000;
  --button-danger-border-color:'#66cc';
  --button-info-background-color:#66cc;
  --button-info-border-color:rgba(83, 83, 241, 0.8);
}

定义 vant 按钮组件，设定 type=”danger” 和 “info”，生成警示和信息按钮

page.wxml
<view class="container">
  <van-button type="danger">危险按钮</van-button>
  <van-button type="danger">危险按钮</van-button>
  <van-button type="info">信息按钮</van-button>
</view>

效果展示

%title插图%num
后记

由于将整个笔记写在一个页面上，页面负荷较大。故将后记扩展知识放置在新的页面中。欢迎继续查看

微信小程序笔记 – 后记