微信小程序开发微信小程序开发微信小程序(应用号)

微信小程序数据绑定以及跳转传参

2017-02-16  本文已影响273人  水山一村
首先,我们先创建一个新的项目。可以看到创建的新的小程序有一个默认的HelloWorld的Demo.如下图
Demo.png
这里先介绍一下微信小程序的数据绑定

微信小程序的基于MINA框架开发的。每一个页面由 .js(必须) .wxml(必须) .wxss(非必需) .json(非必须) 这四个文件组成,且命名必须相同。
我们打开pages文件夹下面的index.js.修改

Page({
  data: {
    motto: '第一页的Hello World',//这里做了修改
    userInfo: {}
  }

将motto对应的值做了一下简单的修改,编译,可以看到主页的HellowWorld也已经做了相应的变化。在看看 .wxml文件

 <text class="user-motto">{{motto}}</text>

可以看到有这么一段代码,而中间的{{motto}} 也刚好对应了.js里面的motto。没错,这就是微信小程序的数据绑定。 通过{{ 对应.js中的对应的data}}来进行绑定。

接下来,我们要将这个我们修改过的motto设置成点击事件,跳转到另一个页面并且将参数传递过去。

先添加点击事件 gotologs
 <view class="usermotto">
    <text class="user-motto" bindtap="gotologs">{{motto}}</text>
  </view>
在.js里面添加方法。
gotologs() {
   wx.navigateTo({
     url: '../logs/logs?motto='+this.data.motto
   })
 }

由于使用的是ES6语法,你需要在项目里面勾上 ES5转ES6

Paste_Image.png
接下来修改logs.wxml来显示我们要传过去的参数。
 <view class="usermotto">
    <text class="user-motto">{{twomotto}}</text>
  </view>
当然,你需要先在logs.js里面对穿过来的参数进行处理。
Page({
  data: {

  },
  onLoad: function (options) {
     this.setData({
      twomotto: options.motto
    })
  }
})
上一篇下一篇

猜你喜欢

热点阅读