从点击事件看微信小程序的数据传递

最近用微信小程序做了一个电影类APP，业务逻辑不难，但在做最后一个页面时遇到了一个诡异的问题，这个问题让我对小程序框架里的事件和数据绑定有了更深的认识。

问题是这样的：
该小程序有4个页面，分别是“影院热映home”、“即将上映comingSoon”、“电影查询search”和点击以上3个页面中每条具体的电影条目会跳转到的“详情页面detail”。

这个问题刚好出在从“影院热映”点击电影条目到“详情页面”处，要么无法显示电影具体信息，要么点击不同条目总是显示同一条电影的信息。

因为从不同页面点击电影条目，绑定的点击事件都会将页面跳转到对应详情页面，而详情页面的detail.wxml文件是确定的。那么无法正确显示电影信息，一定是detail.wxml文件绑定的数据出问题了。

所以从detail.wxml的数据来源即detail.js找问题。

// pages/detail/detail.js
var subjectUtil = require("../../utils/subjectUtil.js");
Page({data:{movie:{}},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数this.loadMovie(options.id);console.log(options);},loadMovie: function(id) {wx.showToast({title: '加载中',icon: 'loading',duration: 10000});var page = this;//var id = wx.getStorageSync('id');wx.request({url: 'https://api.douban.com/v2/movie/subject/'+id,//需要传递具体的id才能加载电影；header: {'Content-type': 'json'},success: function(res){var subject=res.data;//subjectUtil.processSubject(subject);page.setData({movie:subject});},complete:function(e) {wx.hideToast();}});},
})

wx.request()是微信小程序自带的发起HTTPS网络请求的API，我所需的资源从url: ‘https://api.douban.com/v2/movie/subject/‘+id 获取，这个API接口带一个id参数，不同的电影有不同的id。所以详情页出问题代表数据源出问题，数据源出问题代表id出问题，现在的关键是看id出什么问题。

要想了解id的问题，首先要知道id在哪里，其次知道点击电影条目之后怎么到详情页面去的。

从API接口请求回来的资源是一个对象，对象里有大量的数据，比如图片、评分等，id就是其中一个。

好了，已经知道id的位置，那这个id又是怎么到detail.js中去的呢？

其实，这个id是绑定到任何一个页面的WXML里的。

<!--movieTpl.wxml-->
<template name="movies"><block wx:for="{{movies}}"><view class="movie" bindtap="detail" id="{{item.id}}"><view class="pic"><image src="{{item.images.medium}}" mode="aspectFit" /></view><view class="movie-info"><view class="base-info"><text>{{item.basicInfo}}</text></view></view></view><view class="hr"></view></block>
</template>

<view class="movie" bindtap="detail" id="{{item.id}}">这段代码里id这个属性绑定的值{{item.id}}就是某一条电影的id。

所以电影的id一开始就应该存在于对应页面的wxml代码里，比如存在于home.wxml里。
上面这段代码里的bindtap=”detail”代表一个点击事件，在页面上点击view组件后，会激活对应js文件里的detail函数，并跳转到detail页面。

//home.js
detail:function(e) {//点击事件e为参数wx.navigateTo({url: '../detail/detail',})}

function(e)里的参数e是点击对应组件后返回的事件处理函数的参数，这个参数类型是object，里面有一个currentTarget的对象，这个对象有个属性id，这个id表示当前组件的id，用 e.currentTarget.id就可以得到当前组件的id。还记得吗，组件的id被赋值为{{item.id}}，此处的item表示列表渲染时，每一个数组元素的值，这个值就是某部电影对象的详细信息，{{item.id}}表示某部电影的id。也就是详情页面通过API接口获得信息需要的id。

到现在为止，id仍然只在“影院热映”这个页面里，需要这个id的是详情页面，那怎么才能把id传递到详情页面里去呢？

有两种方法：

利用缓存，在home.js缓存id，然后从detail.js处取出。
利用页面跳转带去参数

这里以方法1为例。

//home.js
detail:function(e) {//点击事件e为参数wx.setStorageSync('id', e.currentTarget.id)wx.navigateTo({url: '../detail/detail',})}

wx.setStorageSync()之后，id就存到了本地，detail.js从本地取出来使用即可。

loadMovie: function() {var page = this;var id = wx.getStorageSync('id');wx.request({url: 'https://api.douban.com/v2/movie/subject/'+id,//需要传递具体的id才能加载电影；header: {'Content-type': 'json'},success: function(res){var subject=res.data;//subjectUtil.processSubject(subject);page.setData({movie:subject});},complete:function(e) {wx.hideToast();}});```

好了，到现在为止，已经明白了点击组件跳转到电影详情这个功能背后的id是如何传递的了。

那么回到最开始，为什么我在点击home页面时，detail页面会出错呢？因为我同时使用了两种传递id的办法，而且将detail: function(e){}作为全局函数写在app.js供其他页面引用的时候因为粗心大意出了问题，不过这个问题也让我对微信MINA框架里的数据缓存有了进一步的理解。要把这个问题讲明白还需要一些图片和代码，下一篇文章再总结吧。

从点击事件看微信小程序的数据传递相关推荐

微信小程序之数据传递
本文主要介绍,页面跳转间的数据传递.传递的数据类型主要有1,基本数据类型:2,对象:3,数组集合: 先告诉你,本质上都是string类型传递.但是对于对象和数组集合的传递需要小小的处理一下传递时的数据 ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
微信小程序——页面之间传递值
微信小程序--页面之间传递值小程序页面传值的方式: 1.正向传值:上一页面 --> 下一页面 url传值本地储存全局的app对象 2.反向传值:下一页面 --> 上一页面本地储 ...
小程序素材抓取软件_如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
微信小程序过滤html,微信小程序中数据过滤的实现方法介绍（代码）
本篇文章给大家带来的内容是关于微信小程序中数据过滤的实现方法介绍(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 因为微信小程序的wxml和js的内部实现机制是分开编译的.所 ...
《微信小程序》数据访问实例详解
如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚 ...
微信小程序android错误,微信小程序首页数据初始化失败的解决方法
一. 问题描述用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认 ...

从点击事件看微信小程序的数据传递

从点击事件看微信小程序的数据传递相关推荐

最新文章

热门文章