小程序之组件和API总结
文章目录
- 小程序之组件和API总结
- 前言
- 一、组件
- 1.1 视图容器
- 1.2 基础内容
- 1.3 表单组件
- 1.4 导航组件 `navigator`
- 1.5 媒体组件
- 1.10 自定义组件
- 二、事件
- 三、API
- 四、网络数据请求
- 五、第三方npm包
- 六、分包
- 总结
前言
一、组件
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 中的成员