小程序之组件和API总结

小程序之组件和API总结

---

---

前言

---

一、组件

1.1 视图容器

1.1.1 普通视图容器 view

1.1.2 可滚动的视图容器 scroll-view

1.1.3 轮播图容器组件和轮播图item组件 swiper 和 swiper-item

在<swiper-item>中可以包含文本或图片， 其宽/高默认为 100% 。

<swiper class="swiper-container" indicator-dots="true">
  <swiper-item>
    <view>A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
</swiper>

1.2 基础内容

1.2.1 文本组件，类似于HTML中的span text

1.2.2 富文本组件,支持把 HTML 字符串渲染为 WXML 结构 rich-text

1、HTML String方式渲染

<rich-text nodes='{{ nodes )}'></rich-text>

Page ({ 
	data: { 
		nodes: '<div style="line-height: 60px; color:red;">Hello World!</div>'
	} 
})

2、节点方式渲染

元素节点

文本节点

Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})

1.3 表单组件

1.3.1 按钮组件 button

1.4 导航组件 navigator

1.4.1 声明式导航

导航到 tabBar 页面 <navigator url="..." open-type="switchTab">...</navigator>

url的写法是/pages加目标文件夹加文件加文件夹名字 从mine页面导航到score页面应该这样写 /pages/score/score

导航到非tabBar 页面 <navigator url="..." open-type="navigate">...</navigator>

后退导航(后退上一级省略delta) <navigator open-type="navigateBack" delta="1">...</navigator>

1.4.2 编程式导航

导航到 tabBar 页面 wx.switchTab(object)

导航到 非tabBar 页面 wx.navigateTo(object)

后退导航 wx.navigateBack(object)

1.4.3 导航传参

声明式导航传参

编程式导航传参 只有 wx.navigateTo(Object object) 方法可以带参数

在onLoad中接收导航参数

1.5 媒体组件

1.5.1 图片组件 image

⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问

1.10 自定义组件

1.10.1 创建组件

1.10.2 引用组件

局部引用

全局引用

1.10.3 组件和页面的区别

1.10.4 自定义组件样式

1、组件样式隔离

app.wxss 中的全局样式对组件无效

只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

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

2、修改组件的样式隔离选项

1.10.5 数据、方法和属性

data 数据

methods 方法

properties 属性

data 和 properties 的区别(本质上是一样的)

使用 setData 修改 properties 的值

数据监听器observers

纯数据字段

某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用

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

1.10.6 插槽

单个插槽

多个插槽

开启多个插槽属性 multipleSlots

定义多个插槽 以不同的 name 来区分不同的插槽

使用多个插槽 需要用 slot 属性来将节点插入到不同的 <slot> 中

1.10.7 父子组件之间的通信

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

子组件自定义一个属性接收父组件的数据

在子组件js文件的properties中定义与自定义属性同名属性接收数据

2、事件绑定 用于实现子向父传值，可以传递任何类型的数据

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

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

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

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

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

1.10.8 behaviors

1、 用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”

2、 创建 behavior 新建一个behaviors文件夹，并创建js文件，在其里面调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象

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

4、所有可用的节点

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

二、事件

2.1 常见事件

2.1.1 单击触摸事件 bindtap

2.1.2 文本框输入响应事件 bindinput

2.2 事件回调函数

2.2.1 更新data的数据 setData({})

this.setData和this.data的区别	备注
this.setData	this.setData里面存储的是this.data的副本，要更新视图层数据必须使用setData
this.data	仅仅是对data的数据操作，并不会影响视图层，所以其不能赋值，只能作为操作数

2.2.2 事件传参 data-参数名="参数值"

获取参数值 e.target.dataset.参数名

2.2.3 事件对象 event

target与currentTarget区别	备注
target	触发该事件的源头组件
currentTarget	当前事件所绑定的组件

2.2.4 表单输入框与data双向绑定

1、表单value属性绑定数据并添加bindinput事件

2、通过e.detail.value获取当前表单输入框的内容

3、在事件回调函数中通过setData方法设置数据 = e.detail.value

三、API

2.1 事件监听 API

2.1.1 监听页面的下拉刷新事件

onPullDownRefresh() 监听当前页面的下拉刷新事件

wx.stopPullDownRefresh() 停止下拉刷新的效果

2.1.2 监听上拉触底事件

onReachBottom() 可监听当前页面的上拉触底事件

2.2 同步 API 以 Sync 结尾

2.2.1 添加loading提示效果

显示loading效果wx.showLoading({ title: '数据加载中',})

隐藏loading效果 wx.hideLoading()

2.3 异步 API

2.3.1 类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

四、网络数据请求

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

4.1.1 只能请求 HTTPS 类型的接口

4.1.2 必须将接口的域名添加到信任列表中

4.2 配置 request 合法域名

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

4.2.2 注意事项

域名只支持 https 协议

域名不能使用 IP 地址或 localhost

域名必须经过 ICP 备案

服务器域名一个月内最多可申请 5 次修改

4.2.3 跳过 request 合法域名校验

后台仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，需要开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项

4.3 发起 GET 请求

getInfo() {
  wx.request({
    url: 'https://www.escook.cn/api/get',
    data: {
      name: 'chx',
      age: 21
    },
    success: (res) => {
      console.log(res.data);
    }
  })
}

4.4 发起POST请求

postInfo() {
  wx.request({
    url: 'https://www.escook.cn/api/post',
    method: 'POST',
    data: {
      name: 'chx',
      age: 21
    },
    success: (res) => {
      console.log(res.data);
    }
  })
}

五、第三方npm包

5.1 小程序对 npm 的支持与限制

5.1.1 与pc端不同,每次下完新的包之后要先删除miniprogram_npm这个包,再重新在工具里构建npm

5.2 Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库

5.2.1 安装 Vant 组件库

先初始化 npm init -y

https://youzan.github.io/vant-weapp/#/quickstart

5.2.2 使用 Vant 组件

在 app.json 的 usingComponents 节点中引入需要的组件，即可在wxml中直接使用组件

5.2.3 使用 CSS 变量来实现定制主题样式

查询需要的官网的主题样式并把@修改为--，放在page选择器上

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

5.3 API Promise化

5.3.1 基于回调函数的异步 API 的缺点 容易造成回调地狱的问题，代码的可读性、维护性差

5.3.2 什么是 API Promise 化

指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API

提高代码的可读性、维护性，避免回调地狱的问题

5.3.3 实现 API Promise 化

安装 npm install --save miniprogram-api-promise

使用

//app.js
import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wxp = wx.p = {}
promisifyAll(wx,wxp)

5.4 全局数据共享

5.4.1 小程序中的全局数据共享方案 mobx-miniprogram 配合 mobx-miniprogram-bindings

1、mobx-miniprogram 用来创建 Store 实例对象

2、mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

5.4.2 安装 MobX 相关的包 npm install --save mobx-miniprogram mobx-miniprogram-bindings

5.4.3 创建 MobX 的 Store 实例

建立store文件夹和store.js文件

5.4.4 在页面中使用store

1、将 Store 中的成员绑定到页面中

2、在页面上使用 Store 中的成员

5.4.5 在组件中使用store

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

2、在组件上使用 Store 中的成员

六、分包

6.1 分包 把一个完整的小程序项目，按需划分为不同的子包，用户在使用时按需进行加载

6.2 分包的好处

6.2.1 可以优化小程序首次启动的下载时间

6.2.2 在多团队共同开发时可以更好的解耦协作

6.3 分包前项目的构成

6.3.1 项目中所有的页面和资源都被打包到了一起，导致项目体积过大，影响首次启动的下载时间

6.4 分包后项目的构成

6.4.1 小程序项目由 1 个主包 + 多个分包组成

主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源

分包：只包含和当前分包有关的页面和私有资源

6.5 分包的加载规则

6.5.1 在小程序启动时，默认会下载主包并启动主包内页面, 所以tabBar 页面需要放到主包中

6.5.2 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

6.5.3 非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

6.6 分包的体积限制

6.6.1 整个小程序所有分包大小不超过 16M（主包 + 所有分包）

6.6.2 单个分包/主包大小不能超过 2M

6.7 配置分包

6.7.1 在app.json的subpackages节点配置分包

分包名称 root

分包别名 name

分包的页面pages

6.7.2 打包原则

小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中

主包也可以有自己的 pages（即最外层的 pages 字段）

tabBar 页面必须在主包内

分包之间不能互相嵌套

6.7.3 引用原则

主包无法引用分包内的私有资源

分包之间不能相互引用私有资源

分包可以引用主包内的公共资源

6.8 独立分包

6.8.1 概念 可以独立于主包和其他分包而单独运行

6.8.2 独立分包和普通分包的区别 是否依赖于主包才能运行

6.8.3 独立分包的应用场景 将某些具有一定功能独立性的页面配置到独立分包中

6.8.4 独立分包的配置方法

添加independent：true

6.8.5 引用原则

主包无法引用独立分包内的私有资源

独立分包之间，不能相互引用私有资源

独立分包和普通分包之间，不能相互引用私有资源

特别注意：独立分包中不能引用主包内的公共资源

6.9 分包预下载

6.9.1 在进入小程序的某个页面时，由框架自动预下载可能需要的分包

6.9.2 配置分包的预下载

在app.json中，使用 preloadRule 节点定义分包的预下载

6.9.3 分包预下载的限制

---

总结