• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序 参数传递详解

微信小程序 参数传递详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了小程序 参数传递等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪。

有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切。

微信小程序-参数传递

这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下.

一、通过事件进行参数传递

先来看眼小程序对事件的定义:

#什么是事件?

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

很明确的指出了是视图层【wxml】到逻辑层【js】的通信方式,时间对象可以携带额外信息,用这个事件来传递参数肯定没错了,接下来我们就来实际看下例子:

视图.wxml

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

逻辑.js

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

log打印

微信小程序 参数传递详解

可以看到 dataset 里面就是我们设置的data-hi="MINA"的值了。现在我们来看下刚刚我们写的, 首先 bindtap,以bind开头的就是要给他绑定个事件,这个事件的名字就是“=”号后面的数值就是绑定的事件名称,需要在 逻辑【js】层定义上。 然后就是传值了,注意到的朋友可以看到 我们这里写了data-hi 和我们平时写js的传值是同一个定义方法。这个data-*就对应事件的属性target里的dataset 值。这里我们需要调用的话就是 event.target.dataset.hi就能取到data-hi所对应的值。

这里需要注意下 data的定义名称: 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。

官方示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
 
Page({
 bindViewTap:function(event){
  event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
  event.target.dataset.alphabeta == 2 // 大写会转为小写
 }
})

二、navigator 跳转url传参

*.wxml

<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

*.js 跳到新页面之后在onload里面直接接收参数,接收方法也就是 options.[参数值]

Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

好啦,今天就写到这里,我顺便把文档链接写上,上面写的文档里都有。我只是把它们搬出来了,用我的话说了一遍。 …(⊙_⊙;)…

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

更多微信小程序 参数传递详解相关文章请关注微课江湖!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-30小程序开发的简单实例代码
  • 2018-11-30微信小程序使用image组件显示图片的方法
  • 2018-11-30微信小程序中自定义分享按钮的实现过程
  • 2018-11-30微信小程序开发常用的方法总结(代码)
  • 2018-11-30详解picker日期和时间选择器
  • 2018-11-30关于微信小程序进行微信支付的步骤
  • 2018-11-30wxss字体组件及API的思维导图详细介绍
  • 2018-11-30微信小程序中列表渲染的实现代码
  • 2018-11-30微信小程序官方常见问答汇总FAQ
  • 2018-11-30微信小程序swiper组件构建轮播图代码分享

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序的轮播图swiper问题
    • 微信小程序云开发API 查询筛选条件
    • 如何使微信小程序解析 H5文件
    • 微信小程序 框架(MINA)
    • 微信小程序 选择器(时间,日期,地区)实例详解
    • MINA 文件结构
    • 微信小程序页面跳转传参详解
    • 微信小程序 模板(template)
    • 带你了解小程序创业会有哪些坑?
    • 微信小程序 Page()函数的介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有