微信小程序开发入门与实战(数据监听)

简介: 微信小程序开发入门与实战(数据监听)

数据、方法和属性


1、 data 数据


组件模板渲染的私有数据如 👇

/***组件的方法列表*/methods: {
addCount(){
this.setData({
count:this.data.count+1        })
this._TiShi()
    },
_TiShi(){
wx.showToast({
title: 'count是'+this.data.count        })    
    }
},

2、methods 方法


在小程序组件中,事件处理函数和自定义方法需要定义到 methods 节点中,

示例代码如 👇

/***组件的方法列表*/methods: {
addCount(){
this.setData({
count:this.data.count+1        })
this._TiShi()
    },
_TiShi(){
wx.showToast({
title: 'count是'+this.data.count        })    
    }
},

3、properties 属性


在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据。

示例代码如 👇

WXML<text1max="5"></text1>//默认值是15这里设置最大值为5,覆盖了最大值COMPONENT<view>添加的值为:{{count}}</view><buttonbindtap="addCount">点击按钮</button>JS/***组件的属性列表*/properties: {
max:{
type:Number,
value:15    }
},
/***组件的方法列表*/methods: {
addCount(){
if(this.data.count>=this.properties.max) return;
this.setData({
count:this.data.count+1        })
this._TiShi()
    },
//提示框_TiShi(){
wx.showToast({
title: 'count是'+this.data.count        })    
    }
},

4、 data 和 properties 的区别


在小程序的组件中,properties 属性和 data 数据的用法相同,它们都是可读可写的 区别如 👇

  1. data 更倾向于存储组件的私有数据
  2. properties 更倾向于存储外界传递到组件中的数据

测试两者是否相等如 👇

/***组件的属性列表*/properties: {
max:{
type:Number,
value:15    }
},
/***组件的初始数据*/data: {
count:1},
proData(){
console.log(this.data.max);
console.log(this.data.count);
console.log(this.data===this.properties);
}

5、使用 setData 修改 properties 的值


由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值

示例代码如 👇

properties: {
max:{
type:Number,
value:15  }
},
methods: {
addCount(){
if(this.data.count>=this.properties.max) return;
this.setData({
count:this.data.count+1,
max:this.properties.max+1      })
  },
}

数据监听器


1、什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中

数据监听器的基本语法格式如 👇

'字段A''字段B':function(A值,B值){
}

2、监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化

代码实习

WXML-------------<viewclass="ColorBox"style="background-color: rgb({{funllColor}});">颜色的值为:{{funllColor}}</view><buttonsize="mini"bindtap="RValue"type="default">R</button><buttonsize="mini"bindtap="GValue"type="primary">G</button><buttonsize="mini"bindtap="BValue"type="warn">B</button><view>颜色的RGB值为:{{rgbValue.r}}-{{rgbValue.g}}-{{rgbValue.b}}
</view>WXSS-------------<viewclass="ColorBox"style="background-color: rgb({{funllColor}});">颜色的值为:{{funllColor}}</view><buttonsize="mini"bindtap="RValue"type="default">R</button><buttonsize="mini"bindtap="GValue"type="primary">G</button><buttonsize="mini"bindtap="BValue"type="warn">B</button><view>颜色的RGB值为:{{rgbValue.r}}-{{rgbValue.g}}-{{rgbValue.b}}
</view>WXJS-------------//components/text1/text1.jsComponent({
/***组件的属性列表*/properties: {
  },
/***组件的初始数据*/data: {
rgbValue:{
r:0,
g:0,
b:0      },
funllColor:'0,0,0'  },
observers:{
"rgbValue.r, rgbValue.g,rgbValue.b":function(r,g,b){
this.setData({
funllColor:`${r},${g},${b}`
      })
    }
  },
/***组件的方法列表*/methods: {
RValue(){
this.setData({
"rgbValue.r":this.data.rgbValue.g+5>255?255: this.data.rgbValue.r+5      })
  },
GValue(){
this.setData({
"rgbValue.g":this.data.rgbValue.g+5>255?255: this.data.rgbValue.g+5    })
  },
BValue(){
this.setData({
"rgbValue.b":this.data.rgbValue.b+5>255?255: this.data.rgbValue.b+5    })
  },
  }
})

如 👇

4.gif

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
934 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
908 1
|
4月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
62 0
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
720 0
|
17天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
19天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
18 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
71 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
536 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
86 0
微信小程序更新提醒uniapp