小程序|页面传参的三种方式

m0_59259076

已于 2023-04-10 10:21:42 修改

阅读量511

点赞数

分类专栏：笔记文章标签： angular.js 前端 angular

于 2022-03-18 15:36:11 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59259076/article/details/123575924

版权

笔记专栏收录该内容

77 篇文章

订阅专栏

本文介绍了在小程序中页面间参数传递的三种方式，重点讲解了通过URL query参数传递的方法。首先，将文章ID绑定到每个文章的WXML中，然后在页面JS中通过event对象和dataset获取当前文章的ID，从而实现参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要正确展示文章详情页面的内容，首先需要将文章的id号由post页面传递到post-detail页面，这样，post-detail页面才能知晓它要显示哪篇文章。这涉及页面间的参数传递与通信。目前，在MNA框架中有以下几种参数传递方式：

使用全局变量（关于全局变量，本书后面的章节中会讲到）；
使用缓存；
通过页面导航url的query参数传递。

基本上参数的传递只有以上3种方式，其他的比如像事件信号的传参方式（一个页面emit
发送信号，一个页面on监听信号，这种在AngularJS里很常见的传参方式，小程序是不能天
然支持的)，其实都是这些基本思路的变种。
开发者在学习完缓存后应该很容易想到。其实，使用缓存数据库存储data,js初始化数据，又在post.js中读取缓存数据，这其实就是页面间的参数传递。仔细想想，是不是这样？
1、2两种都涉及全局变量，笔者个人不推荐这种污染全局的传参方式，而且我们的需求仅仅是两个页面间传递参数，完全不需要干扰全局。所以，选用方法3来做页面间的参数传递。
要想在post,js中获取到postId,就必须知道当前点击的文章是哪一篇文章。我们首先将postld绑定到每一篇文章的wxml中，使postId成为文章wxml的一个属性。注意，postId已经定义在了data.js中了。

1、绑定postId

  <block wx:for="{{ postList }}" wx:for-item="item" wx:for-index="idx">
  <!-- 不要再block标签或tempale标签上绑定事件！！ -->
    <view catchtap="onTapToDetail" data-post-id="{{ item.postId }}">
      <template is="postItemTpl" data="{{ ...item }}" />
    </view>
  </block>

2、在post.js中添加如下代码：

  onTapToDetail:function(event){
    // 下面这行代码获取postId:
    var postId=event.currentTarget.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: './post-detail/post-detail?id=' + postId,
    });
  },

控制台显示postId，说明id确实已经传过来了。

每篇文章的id都被绑定在了该文章的view容器上，剩下的工作就是，如何获取当前文章的id了。

上述代码中，我们通过event.currentTarget.dataset.postId,这段代码成功地拿到了当前文章
的postId。
event事件对象是由MNA框架在调用onTapToDetail函数时传递的参数。在event事件对
象中，有一个currentTarget代表事件绑定的当前组件。
重点是dataset对象，dataset对象里包含当前组件中所有属性名以data-开头的自定义属性
值。我们在代码清单6-5中的view上绑定了data-post-id,所以通过dataset.postId将可以拿到
当前组件的postId。.
组件自定义属性名有以下规则：

必须以data-开头。
多个单词由连字符“”链接。
单词中最好不要有大写字母，如果有大写字母，除单词第一个字母外，其余大写字母
将被转化成小写。
在js中获取自定义属性值时，多个单词将被转化驼峰命名。

举例子：

组件的属性定义
组件的自定义数据	dataset中变量名
data-post	dataset.post
data-post-id	dataset.postId
data-pOST-ID	dataset.postId
data-postId	dataset.postId

我们只需要以这种格式传给页面（url的query参数）就好了：

      url: './post-detail/post-detail?id=' + postId,