小程序模板网

小程序踩坑记《三》复杂数据的传递,长按与点击事件冲突

2017-11-29 防风粥

一:复杂数据的传递页面跳转进行数据传递是一个必不可少的功能,有很多应用场景需要使用比如买商品的流程是“选择商品” - “购物车” - “物流信息” - “确认订单”,所以在这几个不同 ...

 
 
 

一:复杂数据的传递

页面跳转进行数据传递是一个必不可少的功能,有很多应用场景需要使用

比如买商品的流程是“选择商品” -> “购物车” -> “物流信息” -> “确认订单”,所以在这几个不同页面进行跳转的时候,相应的数据也需要传递下去

在android中,我们可以用Intent 来进行数据的传递,新界面通过getIntent来进行获取

在IOS中,一般是通过controller 的属性来进行传值

在React-Native中,可以在navigator.push 方法传递对象

上面三种进行数据的传递都很简单,而且也很方法。

而在小程序中,我们可以看到,页面跳转和传递数据是通过

代码实现

 

			
  1. wx.navigateTo({
  2. url: 'page?a=1&b=2',
  3. success: function (res) {
  4. // success
  5.  
  6. },
  7. fail: function (err) {
  8. // fail
  9. },
  10. complete: function () {
  11. // complete
  12. }
  13. });

他是通过url字段来控制跳转的页面,同时路径“?”后面的表示传递的参数,这跟http的GET请求传参一致

在新页面获取参数信息也很简单

 

			
  1. Page({
  2. data: {},
  3. onLoad: function(options) {
  4. console.log(options)
  5. }
  6. });

可以直接在每个页面的onLoad 回调中来进行获取。

看了上面的代码,你会疑问这不是很简单吗?还需要你来说吗?两句代码搞定的事

确实,如果你只是做简单的数据传递是很简单

但是,回到最上面说的那个问题,如果页面层级比较多,数据比较多且复杂的时候,你会抓狂,因为wx.navigateTo 的url自动是String类型,也就是说你不能直接传递对象,如果数据很多的话,会是一件很痛苦的事

 

			
  1. wx.navigateTo({
  2. url: "page?productId=1&count=2&name=zhangzy&phone=13488888888&address=xxx"
  3. });

代码可读性极差而且非常繁琐,万一那个字段忘记拼进去,很容易出bug

所以,我们必须要做改变,需要优化

结合上篇文章《返回上级页面并传递数据》封装另外一个大同小异的方法

 

			
  1. class Router {
  2.  
  3. navigateTo(obj) {
  4. wx.navigateTo({
  5. url: obj.url,
  6. success: function (res) {
  7. // success
  8. obj.success && obj.success(res);
  9. if (obj.data) {
  10. setTimeout(() => {
  11. let pages = getCurrentPages()
  12. let curPage = pages[pages.length - 1];
  13. if(curPage.startPageForData) {
  14. curPage.startPageForData(obj.data);
  15. } else {
  16. curPage.setData(obj.data);
  17. }
  18. }, 1000);
  19.  
  20. }
  21. },
  22. fail: function (err) {
  23. // fail
  24. obj.fail && obj.fail(res);
  25. },
  26. complete: function () {
  27. // complete
  28. obj.complete && obj.complete();
  29. }
  30. });
  31.  
  32. }
  33. }
  34.  
  35. Router = new Router();
  36. module.exports = Router;

实际上还是基于微信提供的wx.navigateTo接口,在跳转成功之后,我们获取页面栈里面最上层的一个,也就是最新打开的那个页面,从而进行数据绑定或是执行对应的startPageForData方法,上面我们加了1000毫秒的延时,主要是当页面跳转之后,可能没那么快注册的栈里面,不延时可能获取的还是之前页面数



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17991.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询