微信小程序的页面交互1

一、page()函数

每个页面的s代码全部写入对应的js文件的page()函数里面。点击编译,就可以显示js代码的运行效果。注意,每个页面的page()函数是唯一的。

page()函数格式如下:

javascript 复制代码
page({
data{
//data里面写入页面初始数据
eg:msg:'hello';
}, //data的值是一个对象
//页面生命周期回调函数:以onload()函数为例【当不需要做特定的事情时它可以不写】
onload:function(){
console.log("onload()函数执行了")
}
//页面事件处理函数:以onPullDownRefresh()为例
onPullDownRefresh:function(){
console.log("onPullDownRefresh()函数执行了")
}
})

二、微信小程序的 页面生命周期

就是:加载-》渲染-》销毁的过程。

(1)每个页面都有生命周期。如果想要在某个特定的时机进行特定的处理可以通过页面生命周期回调函数来完成。

(2)页面生命周期回调函数用于实现在特定的时间点执行特定的操作,随着页面生命周期的变化,页面生命周期回调函数会自动执行。

(3)页面生命周期回调函数:

onLoad() 监听页面加载,且一个页面只会在创建完成后触发一次。就相当于出生
onShow() 监听页面显示,只要页面显示就会触发此函数
onReady()监听页面的初次渲染,一个页面只会调用一次
onHide() 监听页面隐藏,只要页面隐藏就会触发此函数
onUnload()监听页面卸载,只要页面被释放就会触发此函数

三、微信小程序的 页面事件处理函数

(1)上拉、下拉、滚动页面等都是通过页面事件处理函数来完成。它用于监听用户行为

(2)页面事件处理函数:

onPullDownRefresh() 监听用户下拉刷新事件
onReachBottom() 监听页面上拉触底事件
onPageScroll() 监听滚动会连续调用
onShareAppMessage()用户点击页面右上角分享按钮时触发

四、数据绑定

(1)微信小程序的数据绑定实现数据的显示与修改。通过组件绑定事件可以监听用户操作行为,然后在对应的事件处理函数中进行相应的业务处理。

在wxml里映射数据运用Mustache语法 又称双大括号语法 {{ }}

(2)绑定事件前要加上bind/catch

(3)常用绑定事件:
1》点击事件:

tap (手指触摸后马上离开)

点击"按钮一"后,控制台显示:

2》长按事件:

longpress (手指触摸后,超过350ms再离开,如果指定了事件回调函数并且触3发了这个事件,tap事件将不再触发)

3》触摸事件:

touchstart (手指触摸动作开始)

touchmove (手指触摸后移动)

touchcancel (手指触摸动作被打断。例如来电提醒、弹窗)

touchend (手指触摸动作结束)

4》其他事件

input (键盘输入时触发)

submit (携带form中的数据触发submit事件)

5》事件分类

冒泡事件:点击事件、长按事件、触摸事件 (bind不阻止事件冒泡)
非冒泡事件:其他事件 (catch阻止事件冒泡)

若要为组件绑定事件,可以通过组件添加"bind+事件名称"属性 或 "catch+事件名称"绑定

点击"大家好",因为我们使用了catch阻止了向father冒泡,所以控制台不显示father,只有v1

6》如何获取输入框的值?

wxml页面上:使用input事件或者change事件

js上:输入e.detail.value

五、setData()方法

完成数据的设置与更改 (也就是对数据值进行修改与新增)

六、条件渲染

根据不同的判断条件来渲染不同的结果

(1)通过标签wx:if wx:elif wx:else控制属性来完成

(2)hidden属性 控制某一组件的显示与隐藏

<!-- wx:if 条件渲染未显示的部分它的结构代码会彻底消失,但是hidden属性未显示的部分它的结构代码一直存在在wxml里 -->
<!-- 要频繁切换一个控件是否显示还是隐藏------使用hidden -->

相关推荐
说私域2 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
Rubin935 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子6 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598246 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug9 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo9 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢32 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机38 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28141 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读