一篇搞定微信小程序

组件

视图类容器组件

view

• 普通视图区域
• 类似于html中的div，是一个块级元素
• 常用来实现页面的布局效果
  

基本使用

<view class="container">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>

.container1 view{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
.container1 view:nth-child(1){
	background-color: lightgreen;
}
.container1 view:nth-child(2){
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
	background-color: lightcoral;
}
.container1{
	display: flex;
	/**分散布局**/
	justify-content: space-around; 
}

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果
  

基本使用

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y="true">
  <view>view A</view>
  <view>view B</view>
  <view>view C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
.container1 view:nth-child(1){
	background-color: lightgreen;
}
.container1 view:nth-child(2){
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
	background-color: lightcoral;
}
.container1{
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

swiper和swiper-item

• 轮播图组件和轮播图item组件
  

基本使用

<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<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>

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1).item{
  background-color: lightgreen;
}
swiper-item:nth-child(2).item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3).item{
  background-color: lightcoral;
}

常用属性

基础内容类组件

text

• 文本组件
• 类似于html中的span标签，行内元素
  

基本使用

• 通过selectable属性，实现长按选中文本内容的效果

<!--pages/list/list.wxml-->
<view>
  手机号
  <text selectable="true">11111111111111</text>
</view>

rich-text

• 富文本组件
• 支持把html字符串渲染为wxml结构
  

基本使用

通过 rich-text 组件的** nodes** 属性节点，把 HTML 字符串染为对应的 UI 结构

<!--pages/list/list.wxml-->
<view>
  <rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
</view>

其他组件

button

• 按钮组件
• 功能比HTML中的button按钮丰富
• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
  

基本使用

<!--pages/list/list.wxml-->
<view>
<view>---------通过type指定按钮类型-------------</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
</view>
<view>---------size=“mini”小尺寸按钮-------------</view>
<button size="mini">默认按钮</button>
<view>---------plain镂空按钮-------------</view>
<button size="mini" plain="true">默认按钮</button>

image

• 图片组件
• 默认宽度约为300px，高度约为240px
  

基本使用

<view>
<!-- 空白图片也会占空间 -->
<image></image>
<image src=""></image>
</view>

mode属性

navigator

• 页面导航组件
• 类似于html中的a标签
  

小程序API

事件监听类API

特点：以on开头，用来监听某些事件的触发

同步API

特点：

• 以Sync结尾的
• 同步API的执行结果，可以通过函数返回值直接获取，如果出错直接抛出异常
  

异步API

特点：类似于JQuery中的$.ajax(option)函数，需要通过success、fail、complete接收调用的结果

模板语法

数据绑定

基本原则

1. 在data中定义数据

在对应页面的js文件中，把数据定义到data对象即可

// pages/list/list.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:"init data",
    msgList:[{msg:"hello"},{msg:"world"}]
  },
})

2. 在WXML中使用数据

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。

<view>{{要绑定的数据名称}}</view>

事件绑定

事件是渲染层到逻辑层的通讯方式

常用事件

1. bintap语法格式

<button type="primary" bind:tap="test"></button>

test(e: any){
  console.log(e);
},

2. bindinput语法格式

事件对象的属性列表

当事件回调触发时，会收到一个事件对象event，属性如下表

PS：

1. target事件和currentTarget事件的区别

2. 点击事件函数不能直接传参数，参考下图

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

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

Page({
  /**
   * 页面的初始数据
   */
  data: {
    count: 0
  },
  methods:{
    changeCount(){
      this.setData({
        count: this.data.count++
      })
    }
  },

实现文本框与data之间的数据同步

条件渲染

wx:if

结合block标签使用wx:if

hidden

PS:wx:if与hidden对比

列表渲染

wx:for

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

wx:key

WXSS模板样式

定义

WXSS (WeChat Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

与CSS的关系

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

新增特性

• rpx尺寸单位
• @import样式导入.
  

rpx

定义

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

实现原理

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

样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

语法格式

@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下：
@import "common.wxss";

全局样式与局部样式

全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

局部样式

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

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

全局配置

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

pages

记录当前小程序所有页面的存放路径

window

全局设置小程序窗口的外观

小程序窗口的组成部分

常用配置项

tabBar

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

• 底部tarBar
• 顶部tarBar

PS：

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

组成部分

配置项

style

是否启用新版的组件样式

页面配置

作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置与全局配置的关系

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

常见配置项

网络数据请求

网络请求限制

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

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

配置request合法域名

配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 ->服务器域名 ->修改 request 合法域名
PS：

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

GET请求

POST请求

在页面刚加载时请求数据

注意事项

跳过request合法域名检验

仅能在开发与调试阶段跳过

关于跨域和ajax的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所
以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”

页面导航

页面导航指的是页面之间的相互跳转

声明式导航

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

导航到tarBar页面

tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url属性和 open-type 属性，其中:

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

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

导航到非tarBar页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面
在使用 组件跳转到普通的非 tabBar 页面时，则需要指定url属性和 open-type 属性，其中:

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

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
PS:为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略

后退导航

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

• open-type 的值必须是 navigateBack，表示要进行后退导航
• delta 的值必须是数字，表示要后退的层级

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
PS：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

编程式导航

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

导航到tarBar页面

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

导航到非tarBar页面

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

后退导航

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

导航传参

声明式导航传参

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

• 参数与路径之间使用?
• 分隔参数键与参数值用=相连
• 不同参数用 &分隔

编程式导航传参

调用 wx.navigateTo(0bject object)方法跳转页面时，也可以携带参数，代码示例如下：

在onload里接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下:

下拉刷新

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

启用下拉刷新

全局

在 app.json 的 window节点中，将enablePullDownRefresh 设置为 true

局部

在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
PS：在实际开发中，推荐使用第2种方式，为需要的页面单独开启下拉刷新的效果

配置下拉刷新窗口的样式

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

• backgroundcolor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
  

监听页面的下拉刷新事件

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

停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading 效果会一直显示，不会主动消失，所以需要手动隐藏loading 效果。此时，调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。示例如下：

上拉触底

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

监听页面的上拉触底事件

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

配置上拉触底的距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

生命周期

定义

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

分类

应用生命周期

特指小程序从启动 ->运行->销毁的过程

页面生命周期

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

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

生命周期函数

定义

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

作用

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

分类

应用生命周期函数

定义：特指小程序从启动->运行->销毁期间依次调用的那些函数
小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

页面周期函数

特指小程序中，每个页面从加载->渲染 ->销毁期间依次调用的那些函数

WXS

定义

WXS(WeiXin Script)是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。

使用场景

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

WXS与JS的区别

基础语法

内嵌脚本

wxs 代码可以编写在 wxml文件中的标签内，就像Javascript 代码可以编写在 html文件中的

定义外联的WSX脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下:

使用外联的WSX脚本

在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径

自定义组件

创建组件

引用组件

局部引用

全局引用

全局引用VS局部引用

样式

样式隔离

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

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

PS：

• app.wxss中的全局样式对组件无效
• 只有 class 选择器会有样式隔离效果，d 选择器、属性选择器、标签选择器不受样式隔离的影响
• 建议:在组件和引用组件的页面中建议使用 class 选择器不要使用 id、属性、标签选择器!
  

修改组件

stylelsolation

data数据

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

method方法

properties属性

生命周期

定义

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

pageLifetimes

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

插槽

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

单个插槽

启用多个插槽

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

组件通信

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

属性绑定

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

事件绑定

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

1. 在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

2. 在父组件的 wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

3. 在子组件的js 中，通过调用 this.triggerEvent(‘自定义事件名称’’,{/*参数对象 */})，将数据发送到父组件

4. 在父组件的js 中，通过 e.detail 获取到子组件传递过来的数据

获取组件实例

可在父组件里调用 this.selectComponent(“id或class选择器”)，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(“.my-component”)。

behaviors

定义

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

工作方式

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

创建behavior

导入并使用behavior

behavior中所有可用的节点

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

npm

使用npm包的支持与限制

vant Weapp

定义

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

安装Vant组件库

Vant Weapp - 轻量、可靠的小程序 UI 组件库

定制全局主题样式

Vant Weapp 使用 CSS 变量来实现定制主题。关于 CSS 变量的基本用法，请参考 MDN 文档:
使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

API Promise化

基于回调函数的异步API的缺点

缺点:容易造成回调地狱的问题，代码的可读性、维护性差!

定义

API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。

全局数据共享

定义

小程序中全局数据共享方案

Mobx

安装Mobx相关的包

创建MobX的Store实例

将Store成员绑定到页面中

将Store中的成员绑定到组件中

分包

定义

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

好处

• 可以优化小程序首次启动的下载时间
• 在多团队共同开发时可以更好的解耦协作
  

分包前项目的构成

分包后项目的构成

分包加载原则

分包的体积限制

基本用法

配置方法

打包原则

引用原则

独立分包

定义

与普通分包的区别

应用场景

配置方法

引用原则

分包预下载

定义

在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

配置

限制