足球视频小程序开发-页面数据绑定及跳转传参

摘要: 足球视频小程序开发-页面数据绑定及跳转传参具体开发步骤

在写前面的小程序入门项目时，发现有两个很常用而且觉得也算比较重要的知识点，这里记录下：

页面数据绑定

比如你的页面需要显示一个

Hello

字符串，这个这个字符串可能会根据某些情况会动态变化，这个时候就需要进行数据绑定展示了

在wxml文件布局如下：

1	<view>{{message}}</view>

在js中设置好变量如下：

1 2 3 4 5 6

Page({ data: { message: "Hello", number: 1 } });

就这样data里面的message属性就可以通过view组件展示出来了，看了上面的写法，也很容易明白，组件展示数据信息时是通过

1

{{属性名称}}

这的写法与data里面的属性进行绑定的。

如果在数据信息展示出来后，后面要更新这个属性信息的展示的话，就不能简单的通过

this.data.message="Hello World"来实现，因为这样是无法达到改变数据信息的目的的。小程序中改变数据信息要求使用函数

setData()

函数来实现。例如上面我们修改

message`的值的话需要进行如下操作：

1 2 3

this.setData({ message: "Hello World" });

通过该函数更新之后，页面上会自动的更新展示，而不需要我们去进行额外的操作，微信将数据的展示与更新进行了分离，只要你使用特定的方法修改属性值，界面就会自动更新，这样的实方式比起android中的手动通知更新要方便很多

页面跳转参数

小程序中从一个页面跳转到另外一个页面有几种方式，这里我以

wx.navigateTo()

跳转进行说明：
我从

index

页面跳转到

logs

页面，很简单

1 2 3

wx.navigateTo({ url: '../log/logs })

那如果我在跳转的同时要向

logs

页面传递参数该怎么办呢，也很简单，直接在url后拼接相关参数即可(与http中的get请求的传参方式是一样的)

1 2 3

wx.navigateTo({ url: '../video/video?message=' + this.data.message + "&number=" + this.data.number })

参数是传过去了，那在

logs

页面中该如何获取这些参数呢？其实也很简单：

1 2 3 4

onLoad: function (options) { var message = options.message; var number = options.number; }

如上所示，我们在新页面的

onLoad

函数中就可以直接获取到传递过来的参数信息。

点击View传参

在我前面的文章 微信小程序之入门项目中点击视频列表中的某一项跳转到视频播放页面，而在点击列表中的某一项时，需要获取当前项的数据信息，如果我想通过点击事件就将这些数据信息作为参数传递过去该怎么做呢？代码如下：

1	<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

信息：

1 2 3 4 5

onItemClick: function (event) { var video = event.currentTarget.dataset.video; var url = video.url; var title = video.title; }

没错，就像代码中写的，在点击事件中我们可以通过

event.currentTarget.dataset

获取传过来的

video

信息，这个参数在调试的时候也是可以通过event对象看到的.