南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作

南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作
咨询热线:400-0377-106
技术动态当前位置: 首页 > 信息资讯 > 技术动态

技术动态

微信小程序-参数传递与事件处理

开发过程中经常会遇到从一个页面携带数据到另一个页面的情况,所以需要知道以下信息,什么是事件?有哪些传递方式?如果传递数组呢?如果传递对象呢?

一、事件

什么是事件

  • 事件是视图层到逻辑层的通讯方式
  • 事件可以将用户的行为反馈到逻辑层进行处理
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层对应的事件处理函数
  • 事件对象可以携带额外信息,如id, dataset, touches

事件处理的使用

通过在wxml中设置bindtap、catchtap等,在js中写对应的实现方法(不过这种方式目前有个缺点,点击的时候没有点击效果),使用方法如下

以下摘自微信小程序官方教程,在wxml中绑定一个事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

然后在对应的js中写出事件的具体实现

Page({
  tapName: function(event) {
    console.log(event)
  }
})

事件分类
事件分为冒泡事件和非冒泡事件

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递

一般使用场景中,例如一个列表的item中有多个点击事件需要处理,就可以使用catchtap阻止向上冒泡

二、参数传递

参数传递有两种方式

  1. 在wxml中使用navigator跳转url传递参数
  2. 在wxml中绑定事件后,通过data-hi="参数"的方式传递

(1)navigator跳转url传递字符串参数

代码如下,将要传递到另一个页面的字符串testId的值赋值到url中

<navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}">
    ...
</navigator>

在js页面中onLoad方法中接收

Page({
    onLoad: function(options) {
        var testId = options.testId
        console.log(testId)
    }
})

(2)navigator跳转url传递数组
如果一个页面要将一个数组,如相册列表传递到另一个页面

<navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}">
    ...
</navigator>

传递到js后从options中得到的是个字符串,每个图片的url通过','分隔,所以此时还需要对其进行处理,重新组装为数组

Page({
    data: {
         // 相册列表数据
        albumList: [],
    },    
    onLoad: function (options) {
        var that = this;

        that.setData({
            albumList: options.albumList.split(",")
        });
    }
})

(3)wxml中配置data-testid传递字符串

这种方式一般是在wxml中绑定事件,同时设置需要传递的数据,如果需要传递多个,可以写多个data-[参数]的方式进行传递

<view bindtap="clickMe" data-testId={{testId}}">
    ...
</view>

在js页面中自定义方法clickMe中接收

Page({
    clickMe: function(event) {
        var testId = event.currentTarget.dataset.testid;
        wx.navigateTo({
            url: '../../pages/test/test'
        })
    }
})

注意:通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写

(4)wxml中配置data-albumlist传递数组

其实原理同上,上代码

<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
    ...
</view>

在js页面中自定义方法clickMe中接收

Page({
    clickMe: function(event) {
        var albumList = event.currentTarget.dataset.albumlist.split(",");
        wx.navigateTo({
            url: '../../pages/test/test'
        })
    }
})

作者:花郎
链接:http://www.jianshu.com/p/a3481a255842
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

此文关键字: 南阳网络公司,南阳网站制作,南阳网页设计,南阳做网站,南阳APP开发,南阳微信小程序,南阳全景制作,南阳网络营销,南阳微信营销,南阳vr全景制作,南阳做微信小程序,南阳做VR全景
南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作
  • 友情链接: 全景街 南阳APP开发 南阳网站制作 全景通 南阳网络公司 APP开发公司 南阳月季 南阳朴心堂
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作新域网络:高端网站定制、网站优化营销、微平台、微官网开发、APP移动客户端开发、400电话、微信小程序开发、VR全景制作
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作网站备案号   豫ICP备12011957号-1
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作河南省南阳市汉画街汉画馆往北100米路东
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作(86)0377-62138038  13723049490
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作全景通-VR场景自动化营销系统
  • 你可以选择以下任何一种方式在线咨询:
  • 南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作南阳网络公司,南阳网站制作,南阳做网站,南阳网页设计,南阳网络营销,南阳微信营销,南阳APP开发,南阳微信小程序开发,南阳VR全景制作
  • TEL:0377-60555400
新域网络可以  网站设计、网站规划、网站建设、 网站优化、网站推广、河南网站建设、优秀网站建设、顶尖网站设计、SEO优化、网络营销、微信小程序开发、VR全景制作