轮播图小圆点效果
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="3000" circular>
<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>
基础内容组件text和rich-text
text selectable支持长按选中效果
<view>
<text selectable>13354687999</text>
</view>
rich-text渲染html标签
<rich-text nodes="<h1>标题</h1>"></rich-text>
按钮
<!--pages/list/list.wxml-->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">小尺寸按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<button size="mini" plain>小尺寸按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
app.json里的 “style”: “v2”,控制样式版本
添加图片
<!--pages/list/list.wxml-->
<image></image>
<image src="/1.png" mode="aspectFill"></image>
事件绑定
1.数据绑定
2.属性绑定
3.计算（三元运算、算术运算）
事件绑定
target指向触发事件的源头，currentTarget指向当前事件所绑定的组件
修改数据
this.setData({})设置新数据
this.data访问旧数据
事件传参
使用data-参数=值 字符串
使用data-参数={{值}} 数字
<button type="primary" bindtap="btn2" data-info="{{2}}">anniu2</button>
bindinput获取文本框最新的值
文本框与数据同步
创建msg数据
data:{
info:'你好',
msg:'中午好！',
},
渲染到页面上
<input value="{{msg}}" bindinput="inputheader"></input>
修改数据
inputheader(e){
this.setData({
msg:e.detail.value
})
}
重新编译后
条件渲染
结合block
block不会渲染多余节点 只起到包裹作用
hidden控制元素的显示与隐藏
列表渲染
渲染列表
data:{
info:'你好',
msg:'中午好！',
arr1:['1','2','66']
},
<view wx:for="{{arr1}}">
索引是:{{index}},item项是:{{item}}
</view>
wx:for 渲染指定数组。默认情况下，当前循环项为item，索引为index。
手动指定索引项的名字
wx:key
data:{
userList:[
{id:1,name:'桑酒'},
{id:2,name:'冥夜'},
{id:3,name:'桑佑'}
]
},
<view wx:for="{{userList}}" wx:key="id">
{{item.name}}</view>
渲染唯一key值提高渲染效率
rpx自动适配
样式导入
@import "相对路径";
全局样式和局部样式
写在app.wxss中的样式
写在页面.wxss样式中的为局部样式
局部样式和全局样式冲突时会使用局部样式 局部样式权重大于等于全局样式时才会覆盖
设置window
设置导航栏的标题
修改app.json中window的navigationBarTitleText
设置背景色
修改navigationBarBackgroundColor（不支持文本如red 只支持数字）
设置标题文字颜色
修改navigationBarTextStyle 可选值只有black和white
全局开启下拉刷新
app.json中window的"enablePullDownRefresh": true
设置下拉刷新时窗口的背景色
“backgroundColor”: “#efefef”
设置下拉刷新时loading的样式
修改 “backgroundTextStyle”:“dark”
即三个小圆点
设置上拉触底的距离
“onReachBottomDistance”: 默认为50
tabBar
tab项的配置
最少两个最多五个 页面跳转
"tabBar": {"list": [
{
"pagePath":"pages/list/list",
"text": "list"
},{
"pagePath":"pages/index/index",
"text": "index"
}
配置tabBar
tabBar的页面必须放在开头的位置
"tabBar": {"list": [
{
"pagePath":"pages/list/list",
"text": "list",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
},
{
"pagePath":"pages/home/home",
"text": "home",
"selectedIconPath": "/images/tabs/home-active.png",
"iconPath": "/images/tabs/home.png"
},
{
"pagePath":"pages/message/message",
"text": "message",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
}
页面配置
建议在页面上打开下拉刷新 不在全局打开
网络数据请求
配置request合法域名
发起get请求
发起post请求
页面刚一加载就会出现Onload
跳过request合法域名校验
小程序中不存在Ajax和跨域
不显示警告内容
在project.config.json里的setting里
"checkSiteMap":False,
作业一：本地生活
！打错字就会显示不出来
首先新建页面路径app.json里的pages
修改window属性
增加tabBar
创建轮播图数据的列表
Page({
/**
* 页面的初始数据
*/
data: {
swipperlist:[]
},
//获取轮播图数据的方法
getSwipperlist(){
wx.request({
url: 'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
console.log(res)
this.setData(
{
swipperlist:res.data
}
)
}
})
},
渲染轮播图
在wxml里使用循环放入图片
<swiper>
<swiper-item wx:for="{{swipperlist}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
调整样式
wxss里
swiper{
height: 350rpx;
}
swiper image{
width: 100%;
height: 100%;
}
加小圆点 循环播放
<swiper indicator-dots circular>
加入九宫格数据
data: {
swipperlist:[],
gridlist:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwipperlist()
this.getGridlist()
},
getGridlist(){
wx.request({
url: 'https://www.escook.cn/categories',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
gridlist:res.data
})
}
})
},
放九宫格内容进去
<view class="grid-list">
<view class="grid-item" wx:for="{{gridlist}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
调整布局
.grid-list{
display: flex;
flex-wrap: wrap;/*如果放不下允许换行*/
border-left: 1rpx solid #efefef;/*加边框线*/
border-top: 1rpx solid #efefef;
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;/*纵向布局*/
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;/*加边框线*/
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;/*想要30px 进行转换×2*/
height: 60rpx;
}
.grid-item text{
font-size: 24rpx;/*12号字体*2*/
margin-top: 10rpx;
}
.img-box{
display: flex;/*将图片放到一行上展示*/
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image{
width: 45%;
}
<view class="img-box" >
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
页面导航
页面导航即页面之间的跳转，浏览器中实现的方式为
1.<a>链接
2.location.href
小程序页面导航
1.声明式
2.编程式
注意：这里的url路径最后都是只带名称，不用.js那些后缀
声明式导航：
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
lurl 表示要跳转的页面的地址，必须以 / 开头
lopen-type 表示跳转的方式，必须为 switchTab
示例代码如下：
<navigator url="/pages/contact/contact" open-type="switchTab">跳转</navigator>
跳转非tabBar页面
在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
lurl 表示要跳转的页面的地址，必须以 / 开头
lopen-type 表示跳转的方式，必须为 navigate
示例代码如下：
<navigator url="/pages/information/information" open-type="navigate">到非导航页面</navigator>
简写：
<navigator url="/pages/information/information" >到非导航页面</navigator>
后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
l open-type 的值必须是 navigateBack，表示要进行后退导航
l delta 的值必须是数字，表示要后退的层级
示例代码如下：
<navigator open-type="navigateBack" delta="1">后退</navigator>
delta默认为1，可以省略
编程式导航
调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
| 属性 | 类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 需要跳转的 tabBar 页面的路径，路径后不能带参数 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
| 跳转到tabBar页面 |
<button bindtap="goto">跳转到</button>
goto(){
wx.switchTab({
url: '/pages/contact/contact',
})
跳转到非tabBar页面
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
| 属性 | 类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 需要跳转到的非 tabBar 页面的路径，路径后可以带参数 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
goto(){
wx.navigateTo({
url: '/pages/information/information',
})
},
<button bindtap="goto">跳转到非</button>
后退
| 属性 | 类型 | 默认值 | 是否必选 | 说明 |
|---|---|---|---|---|
| delta | number | 1 | 否 | 返回的页面数，如果 delta 大于现有页面数，则返回到首页 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
goback(){
wx.navigateBack(
{delta:1}
)
},
可省略至
goback(){
wx.navigateBack()},
<button bindtap="goback">跳转到非</button>
导航传参
声明式：navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔
代码示例如下：
<navigator url="/pages/information/information?name=zs&age=20">传参</navigator>
编程式：调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：
goto(){
wx.navigateTo({
url: '/pages/information/information?x=12',
})
},
在onload中接受导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：
onLoad(options) {
console.log(options)
}
参数转存到data里
data: {
query:{}
},
onLoad(options) {
console.log(options)
this.setData({
query:options
})
},
下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
启用下拉刷新有两种方式：
①全局开启下拉刷新
在 app.json 的 window 节点中，将nablePullDownRefresh 设置为 true
②局部开启下拉刷新
在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：
backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
实现下拉刷新后重置为0，按+1可以增加
json文件中开启下拉刷新
"enablePullDownRefresh":true
js文件中
data: {
count:0,
},
adddata(){
this.setData({
count:this.data.count+1
})
},
onPullDownRefresh() {
this.setData({
count:0,
})
},
wxml中
<view>count={{count}}</view>
<button bindtap="adddata">+1</button>
当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：
onPullDownRefresh() {
this.setData({
count:0,
})
wx.stopPullDownRefresh()
},
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。
上拉触底案例
1 - 定义获取随机颜色的方法
data: {
colorlist:[]
},
getcolor(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'get',
success:({data:res})=>{
this.setData({
colorlist:[...this.data.colorlist,...res.data]
})
}
})
},
onLoad(options) {
this.getcolor()
},
2 -渲染 UI 结构并美化页面效果
<view wx:for="{{colorlist}}" wx:key="index" class="num-item" style="background-color: rgb({{item}});">{{item}}</view>
/* pages/contact/contact.wxss */
.num-item{
border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #efefef;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
4 - 上拉触底时获取随机颜色
onReachBottom() {
this.getcolor()
},
5 - 添加 loading 提示效果
getcolor(){
wx.showLoading({
title: '数据加载中',
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'get',
success:({data:res})=>{
this.setData({
colorlist:[...this.data.colorlist,...res.data]
})
},
complete:()=>{
wx.hideLoading()
}
})
6 - 对上拉触底进行节流处理
①在 data 中定义 isloading 节流阀
lfalse 表示当前没有进行任何数据请求
ltrue 表示当前正在进行数据请求
②在 getColors() 方法中修改 isloading 节流阀的值
在刚调用 getColors 时将节流阀设置 true
在网络请求的 complete 回调函数中，将节流阀重置为 false
③在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制
如果节流阀的值为 true，则阻止当前请求
如果节流阀的值为 false，则发起数据请求
生命周期
在小程序中，生命周期分为两类，分别是：
① 应用生命周期
特指小程序从启动 -> 运行 -> 销毁的过程
② 页面生命周期
特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程
其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：
生命周期函数
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
小程序中的生命周期函数分为两类，分别是：
① 应用的生命周期函数
特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
② 页面的生命周期函数
特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
应用的生命周期函数
小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：
页面的生命周期函数
小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：
修改页面标题：在onready里修改wx.setNavigationBartitle
wxs
WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。
wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。
虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：
①wxs 有自己的数据类型
number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
function 函数类型、array 数组类型、 date 日期类型、 regexp 正则
②wxs 不支持类似于 ES6 及以上的语法形式
不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
支持：var 定义变量、普通 function 函数等类似于 ES5 的语法
③wxs 遵循 CommonJS 规范
module 对象
require() 函数
module.exports 对象
内嵌wxs脚本
wxs 代码可以编写在 wxml 文件中的 标签内，就像 Javascript 代码可以编写在 html 文件中的
外联wxs脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下：
在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：
lmodule 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径
示例代码如下：
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
①wxs 不能调用 js 中定义的函数
②wxs 不能调用小程序提供的 API
作业2
实现九宫格页面数据跳转
将view组件改成navigator 并跳转传参
<navigator class="grid-item" wx:for="{{gridlist}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</navigator>
修改页面标题
将传入的参数存储到data里然后在onready函数里修改
data: {
query:{},
},
onLoad(options) {
this.setData({
query:options
})
},
onReady() {
wx.setNavigationBarTitle({
title:this.data.query.title,
})
},
获取商铺列表数据
data: {
query:{},
shoplist:[],
page:1,
pagesize:10,
total:0
},
onLoad(options) {
this.setData({
query:options
})
this.getshoplist()
},
getshoplist(){
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pagesize
},
success:(res)=>{
this.setData({
shoplist:[...this.data.shoplist,...res.data],
total:res.header['X-Total-Count']-0
})
}
})
},
美化样式
/* pages/shoplist/shoplist.wxss */
.shop-item{
display: flex;
padding: 15rpx;
margin: 15rpx;
border-radius: 8rpx;
border: 1rpx solid #efefef;/*加边框线*/
box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
.thumb image{
width: 250rpx;
height: 250rpx;
display: block;/*把图片底下的间隙去掉*/
margin-right: 15rpx;
}
.info{
display: flex;
font-size: 24rpx;
flex-direction: column;
justify-content: space-around;
}
.shop-title{
font-weight: bold;
}
<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shoplist}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话：{{item.phone}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
实现上拉触底和节流
// pages/shoplist/shoplist.js
Page({
/**
* 页面的初始数据
*/
data: {
query:{},
shoplist:[],
page:1,
pagesize:10,
total:0,
isloading:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
query:options
})
this.getshoplist()
},
getshoplist(){
//展示loading效果
this.setData({
isloading:true
})
wx.showLoading({
title: '数据加载中',
})
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pagesize
},
success:(res)=>{
this.setData({
shoplist:[...this.data.shoplist,...res.data],
total:res.header['X-Total-Count']-0
})
},
complete:()=>{
wx.hideLoading()
this.setData({
isloading:false
})
},
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(this.data.isloading) return
this.setData({
page:this.data.page+1
})
this.getshoplist()
},
判断是否还有下一页数据
onReachBottom() {
if(this.data.page*this.data.pagesize>=this.data.total){
return wx.showToast({
title: '数据加载完毕!',
icon:'none'
})
}
开启下拉刷新
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
cb回调函数解决下拉刷新关闭问题
onPullDownRefresh() {
//重置
this.setData({
page:1,
shoplist:[],
total:0
})
this.getshoplist(()=>{
wx.stopPullDownRefresh()
})
},
getshoplist(cb){
//展示loading效果
this.setData({
isloading:true
})
wx.showLoading({
title: '数据加载中',
})
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pagesize
},
success:(res)=>{
this.setData({
shoplist:[...this.data.shoplist,...res.data],
total:res.header['X-Total-Count']-0
})
},
complete:()=>{
wx.hideLoading(),
this.setData({
isloading:false
}),
//wx.stopPullDownRefresh()
cb&&cb()
},
})
},
使用wxs处理手机号
function splitphone(str){
if(str.length!==11) return str
var arr=str.split('')
arr.splice(3,0,'-')
arr.splice(8,0,'-')
return arr.join('')
}
module.exports={
splitphone:splitphone
}
<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shoplist}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话：{{tools.splitphone(item.phone)}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
局部引用
在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。
{
"usingComponents": {
"my-test1":"/components/test/test"
}
}
在页面的.wxml文件中使用组件
<my-test1></my-test1>
全局引用
在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。
组件和页面的区别
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：
- 组件的 .json 文件中需要声明 “component”: true 属性
- 组件的 .js 文件中调用的是 Component() 函数
- 组件的事件处理函数需要定义到 methods 节点中
组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构：
组件 A 的样式不会影响组件 C 的样式
组件 A 的样式不会影响小程序页面的样式
小程序页面的样式不会影响组件 A 和 C 的样式
app.wxss 中的全局样式对组件无效
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项
| 可选值 | 默认值 | 描述 |
|---|---|---|
| isolated | 是 | 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响 |
| apply-shared | 否 | 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 |
| shared | 否 | 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件 |
自定义组件：数据、方法和属性
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：
在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：
data 更倾向于存储组件的私有数据
properties 更倾向于存储外界传递到组件中的数据
由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：
数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：
组件的 .js 文件代码如下：
数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：
案例
如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例代码如下：
纯数据字段指的是那些不用于界面渲染的 data 字段。
在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：
使用纯数据字段改造数据监听器案例
组件全部的生命周期
| 生命周期函数 | 参数 | 描述说明 |
|---|---|---|
| created | 无 | 在组件实例刚刚被创建时执行 |
| attached | 无 | 在组件实例进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完成后执行 |
| moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
| detached | 无 | 在组件实例被从页面节点树移除时执行 |
| error | Object Error | 每当组件方法抛出错误时执行 |
在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点如下：
1.组件实例刚被创建好的时候，created 生命周期函数会被触发
- 此时还不能调用 setData
- 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
2.在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
- 此时， this.data 已被初始化完毕
- 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
3.在组件离开页面节点树后， detached 生命周期函数会被触发
- 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
- 此时适合做一些清理性质的工作
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
