用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序数据绑定以及跳转传参,事件机制简介

纸飞机 2018-3-8 09:38

分享者:水山一村,来自授权地址一:数据绑定以及跳转传参首先,我们先创建一个新的项目。可以看到创建的新的有一个默认的HelloWorld的Demo.如下图这里先介绍一下微信小程序的数据绑定微信小程序的基于MINA框架开发 ...

分享者:水山一村,来自

授权地址

一:数据绑定以及跳转传参

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

二:事件机制

在微信小程序中,可以看到同为点击事件,有的是bindtap而有的是catchtap,那么这两者有什么区别呢?为了进一步了解微信小程序的事件机制,在原DEMO的基础上增加了一个简单的页面。效果如下。


红黄绿分别代表三个view。 红是最外层的, 黄绿依次为中底层。 每一层view对应着一个点击事件。(outtap,midtap,innertap)。

Page({
  outtap(event){
     console.log("out:"+event);
  },
   midtap(event){
    console.log("mid:"+event)
  },
   innertap(event){
    console.log("innertap:"+event)
  }
})

首先先把所有的事件都改为bindtap。分别点击inner层,middle层,out层。再看看日志上打印出来的数据。

<view id="out" class="out" bindtap="outtap">
                out
 <view id="middle" class="middle" catchtap="midtap">
                 middle
    <view id="inner" class="inner" bindtap="innertap">
                    inner
    view>
 view>
view>

点击innertap.png

点击midtap.png

点击toptap.png

可以看到,当为view的点击时间为bindtap的时候, 点击最底层的innerview的时候,除了触发innertap的点击方法之外,事件还会往上进行传递,依次触发midtap和outtap方法。

然后我们把middle的bindtap改成catchtap,再分别点击三个视图层。(顺序 inner middle out)

点击innertap.png

点击midtap.png

点击toptap.png

可以看到,当mid层使用了catchtap后,事件执行到mid层之后,便不会再往上进行传递。

从上面的截出来的图片中, 我们可以看到点击了控件之后,返回的是一个Object对象,那么这个对象里面包含什么信息呢。查看官方文档。



其中type为事件类型,timeStamp为事件生成的时间戳,target为触发事件的组件的一些属性值集合,currentTarget当前组件的一些属性值集合,touches为触摸事件,包含的信息为触摸点信息的数组,detail为额外的信息集合。

以下为事件的一些详细信息。




从官方的文档中,我们可以发现,事件分为两种,一种是冒泡事件,另一种是非冒泡事件。
a.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
b.非冒泡事件:当一个组件上的事件被出发后,该事件不会向父节点传递。

显然bindtap属于冒泡事件,catchtap属于非冒泡事件。
除了bindtap之外,wxml的其他冒泡事件还有以下事件。

冒泡事件列表.png

注:除上表之外的其他组件自定义事件都是非冒泡事件,如

的submit事件,的input事件,的scroll事件。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏