小程序随笔2：数据绑定与传递参数

这里先介绍一下微信小程序的数据绑定

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

Page({
  data: {
    motto: '我是Hello World', //这里做了修改
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

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

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

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

接下来，我们实现页面跳转到另一个页面并且将参数传递过去。
这里我是新建了一个叫second.js文件，如图

second相关文件

实现跳转首先将修改过的motto设置成点击事件，点击事件gotosecond。

<view class="usermotto">
    <text bindtap="gotosecond"  class="user-motto">{{motto}}</text>
  </view>

然后在index.js中添加方法。

//跳转到第二页
  gotosecond(){
    wx.navigateTo({
      url: '../second/second?tips=我是首页传入的abc',
    })
  },

接下来在second.wxml来显示我们要传过去的参数，此处做了数据绑定。

<!--pages/second.wxml-->
<view  class="container">
  <text>{{tips}}</text>
</view>

最重要在second.js里面对穿过来的参数进行处理。

// pages/second.js
Page({
  data:{
    tips:""
  },
  onLoad(options) {
    this.setData({
      tips:options.tips
    })
  }
})

此处只有学习记录，不喜勿喷。