微信小程序之页面数据绑定及页面跳转传参
2017-07-17 17:28
971 查看
在写前面的小程序入门项目时,发现有两个很常用而且觉得也算比较重要的知识点,这里记录下:
在wxml文件布局如下:
在js中设置好变量如下:
就这样data里面的message属性就可以通过view组件展示出来了,看了上面的写法,也很容易明白,组件展示数据信息时是通过
如果在数据信息展示出来后,后面要更新这个属性信息的展示的话,就不能简单的通过
通过该函数更新之后,页面上会自动的更新展示,而不需要我们去进行额外的操作,微信将数据的展示与更新进行了分离,只要你使用特定的方法修改属性值,界面就会自动更新,这样的实方式比起android中的手动通知更新要方便很多
我从
那如果我在跳转的同时要向
参数是传过去了,那在
如上所示,我们在新页面的
上面的代码通过for循环实现了一个列表,并为每一项绑定了点击事件,而
接下来再来看看点击事件中如何获取该
没错,就像代码中写的,在点击事件中我们可以通过
页面数据绑定
比如你的页面需要显示一个Hello字符串,这个这个字符串可能会根据某些情况会动态变化,这个时候就需要进行数据绑定展示了
在wxml文件布局如下:
<view>{{message}}</view>
在js中设置好变量如下:
Page({ data: { message: "Hello", number: 1 } });
就这样data里面的message属性就可以通过view组件展示出来了,看了上面的写法,也很容易明白,组件展示数据信息时是通过
{{}}这的写法与data里面的属性进行绑定的。
如果在数据信息展示出来后,后面要更新这个属性信息的展示的话,就不能简单的通过
this.data.message="Hello World"来实现,因为这样是无法达到改变数据信息的目的的。小程序中改变数据信息要求使用函数setData()
函数来实现。例如上面我们修改message`的值的话需要进行如下操作:
this.setData({ message: "Hello World" });
通过该函数更新之后,页面上会自动的更新展示,而不需要我们去进行额外的操作,微信将数据的展示与更新进行了分离,只要你使用特定的方法修改属性值,界面就会自动更新,这样的实方式比起android中的手动通知更新要方便很多
页面跳转参数
小程序中从一个页面跳转到另外一个页面有几种方式,这里我以wx.navigateTo()跳转进行说明:
我从
index页面跳转到
logs页面,很简单
wx.navigateTo({ url: '../log/logs })
那如果我在跳转的同时要向
logs页面传递参数该怎么办呢,也很简单,直接在url后拼接相关参数即可(与http中的get请求的传参方式是一样的)
wx.navigateTo({ url: '../video/video?message=' + this.data.message + "&number=" + this.data.number })
参数是传过去了,那在
logs页面中该如何获取这些参数呢?其实也很简单:
onLoad: function (options) { var message = options.message; var number = options.number; }
如上所示,我们在新页面的
onLoad函数中就可以直接获取到传递过来的参数信息。
点击View传参
在我前面的文章 微信小程序之入门项目中点击视频列表中的某一项跳转到视频播放页面,而在点击列表中的某一项时,需要获取当前项的数据信息,如果我想通过点击事件就将这些数据信息作为参数传递过去该怎么做呢?代码如下:<view wx:for="{{tab.videos}}" wx:for-item="video" data-video="{{video}}" wx:key="*this" bindtap="onItemClick">
上面的代码通过for循环实现了一个列表,并为每一项绑定了点击事件,而
view组件实现中有一个属性是微信没有提供的:
data-video,这个属性是我们手动添加上去的,微信中如果要在wxml中传递参数到点击事件中的话则可以通过
data-**的形式进行传参(**号即为参数名称),此处是将每一项数据
video作为参数进行传递,同时参数名称为
video
接下来再来看看点击事件中如何获取该
video信息:
onItemClick: function (event) { var video = event.currentTarget.dataset.video; var url = video.url; var title = video.title; }
没错,就像代码中写的,在点击事件中我们可以通过
event.currentTarget.dataset获取传过来的
video信息,这个参数在调试的时候也是可以通过event对象看到的
相关文章推荐
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
- 足球视频小程序开发之页面数据绑定及跳转传参
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 微信小程序 —— 页面的跳转和数据传递
- 微信小程序 页面跳转及数据传递详解
- 微信小程序页面跳转与事件绑定,传值
- 微信小程序页面跳转事件绑定/冒泡,非冒泡事件
- 微信小程序入门——页面跳转、数据传递、数据接收
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 【微信小程序】微信小程序页面跳转的数据传递
- 微信小程序 详解页面跳转与返回并回传数据
- 足球视频小程序开发-页面数据绑定及跳转传参
- 微信小程序 页面跳转事件绑定的实例详解
- 微信小程序自学第二课:app及页面的生命周期、使用setData绑定数据
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序 页面跳转传递数据
- 微信小程序页面跳转传参填充数据的小案例
- 微信小程序入门bug--页面跳转,js数据无法在wxml中出现
- 微信小程序 页面跳转和数据传递实例详解
- 原创:微信小程序页面跳转展示缓冲提示