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

首先，我们先创建一个新的项目。可以看到创建的新的小程序有一个默认的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
    })
  }
})