小程序模板网

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

2021-06-01 鹿行锦
首先,我们先创建一个新的项目。可以看到创建的新的小程序有一个默认的HelloWorld的Demo.如下图
这里先介绍一下微信小程序的数据绑定

微信小程序的基于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



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

  },
  onLoad: function (options) {
     this.setData({
      twomotto: options.motto
    })
  }
})


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25891.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询