条件渲染
wx:for 使用默认索引 循环项
wx:for 指定索引项 循环项
wx:key
swiper标签使用
wx:if
hidden
block标签
输入框绑定事件
事件传参
app.json
window
全局下拉刷新功能
上拉加载页面
tabBar
底部导航list配置
页面配置
例子：
网络数据请求
两个限制
配置合法域名
不校验合法域名
注意
发起GET请求
发起POST请求
页面初次加载 请求数据
页面导航
声明式导航
1. 导航到tabBar页面
2. 导航到非tabBar页面
3. 后退导航/后退页面
编程式导航
1.导航到tabBar页面
1.导航到非tabBar页面
this.pageRouter.navigateTo({
url: './new-page'
})
this.pageRouter 获得的路由器对象具有更好的基路径稳定性。通常情况下，使用 this.pageRouter.navigateTo 代替 wx.navigateTo 是更优的。
3. 后退导航/后退页面
导航传参
1. 声明式导航传参
2. 编程式导航传参
在onload中接收传参
页面事件
下拉刷新
1. 开启
2. 样式
3. 监听
4. 停止
当完成下拉刷新的操作后 手动停止当前的下拉刷新动画效果
上拉触底事件
实现屏幕的上滑操作 加载更多数据（分页）
1. 监听
需要注意的是 这里应该要用到节流 同一时间只允许加载一次 防止用户同一时间多次上拉 防止频繁的发起网络请求
2. 配置
3. 节流请求
getColors() 请求列表数据
生命周期
应用内生命周期函数
页面的生命周期函数
wxs
介绍
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意
1 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
3 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
4 WXS 函数不能作为组件的事件回调。
5 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
应用
区别
基础语法
1. 内嵌wxs脚本
2. wxs外联脚本
建议放置在utils文件夹下
3. 页面引入wxs外联脚本
编译模式
设置每次保存代码之后 刷新展示的页面
自定义组件
新建组件
因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{ "component": true }
在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件引用
分为局部引用和全局引用
1. 局部引用组件
全局组件
组件 与 页面的区别
组件样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
组件样式隔离
- 样式隔离
- 样式隔离注意点
- 修改组件样式隔离选项
组件参数接收
参数的接收有两种方式 1. 完整定义属性的方式 2. 简化定义属性的方式
使用： this.properties.max
1. properties与data的区别
由于data与properties在本质上是没有区别的
因此 仍然可以使用setData修改properties内的参数：
this.setData({
max: this.properties.max + 1
})
组件数据监听
数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
支持监听单个数据、多个数据、单个子数据、所有子数据、全部数据
含义
监听扩展
// 当前代码含义： 监听对象rgb所有属性的变化
组件的纯数据字段
定义：
某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。以指定这样的数据字段为“纯数据字段”，它们将仅仅被记录在 this.data 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。
指定“纯数据字段”的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。
Component({
options: {
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
},
data: {
a: true, // 普通数据字段
_b: true, // 纯数据字段
},
methods: {
myMethod() {
this.data._b // 纯数据字段可以在 this.data 中获取
this.setData({
c: true, // 普通数据字段
_d: true, // 纯数据字段
})
}
}
})
组件的生命周期
- 其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
- 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
- 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
- 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
使用
组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
Component({
// 新方式 推荐
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 不推荐
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
组件所在页面的生命周期
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。
在组件内使用
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
插槽slot
单个
定义： 组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。
// 组件内 <!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
// 页面内 <!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
多个
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
// 组件 .js文件
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
// 组件 <!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
// 页面<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
父子组件之间的通信
1. 属性绑定 父向子传值
2. 事件绑定 子向父传值
使用：
// 父页面 .wxml文件
// <!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
// <!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
// 父页面 .js文件
Page({
onMyEvent(e) {
// 接收 子组件传递的参数 e.detail
e.detail // 自定义组件触发事件时提供的detail对象
}
})
// 子组件 .wxml文件 <!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
// 子组件 .js文件
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = { age: 12, name: 'zs' } // detail对象，提供给事件监听函数 // （传递给父的参数）
var myEventOption = {} // 触发事件的选项 // 如下 可不选
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
触发事件的选项有：
使用：this.triggerEvent(‘myevent’, { age: 12, name: ‘zs’ }, { bubbles: true, composed: true })
官网
3. 获取子组件实例
// 父 .js文件
// 页面获取子组件实例
getSon () {
// 获取子组件
// sonSendClass 为.wxml页面 组件声明的class属性
const child = this.selectComponent('.sonSendClass');
// 使用子组件的setData方法 更改子组件参数
child.setData({
buttonWord: child.properties.buttonWord === '这不是按钮' ? '这是按钮' : '这不是按钮',
count: child.data.count + 1
})
}
// 父 .wxml文件
<son-send bindparameter="parameterSend" class="sonSendClass"></son-send>
<button type="warn" class="weui-btn" bindtap="getSon">获取子组件实例</button>
// 子 .js文件
// components/sonSend/sonSend.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 获取子组件传递的参数 两种方式：
// buttonWord: String,
buttonWord: {
type: String,
value: '这是按钮'
}
},
/**
* 组件的初始数据
*/
data: {
count: 0
}
})
扫一扫
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
