微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例

相关项目案例:

场景如下

需求是:

分析:

app.json

... "pages": [     "pages/index/index",     "pages/cityselector/cityselector”, ...

而利用全局数据, 把大象装进冰箱分三步

  • 设置全局数据
  • 城市选择页面 修改全局数据
  • 首页 读取、渲染全局数据

截图

  • 首页定位处与搜索框
    pages/index/index.wxml
    微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例
  • 城市选择页面
    pages/cityselector/cityselector.wxml
    微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例

  • 选定城市后,退回首页,“银川”需要变为新选定的加勒比海盗城市

开始实战

第一步 设置全局数据

加勒比海盗5app.js中,添加全局数据:

App({   onLaunch: () => {   ...   }   defaultCity: ‘银川’  //全局数据 })

第二步 修改全局数据

加勒比海盗5城市选择页面里,我加勒比海盗5们选好城市后,对全局数据进行修改。

pages/cityselector/cityselector.js

.... let appInstance = getApp();  Page({   data: {     city: "杭州市”,   //用来保存我加勒比海盗5们选定的加勒比海盗城市     ....     },    ....    //选择城市   bindCity: function (e) {     this.setData({       city: e.currentTarget.dataset.city,  //将我加勒比海盗5们选定的加勒比海盗城市名保存到本页面的加勒比海盗数据中     ...     })     ...     appInstance.defaultCity = this.data.city //对全局数据进行修改      //返回首页     wx.switchTab({       url: '../index/index'     })   }, 

加勒比海盗全局数据”>首页 读取渲染修改后的加勒比海盗全局数据

pages/index/index.js

let appInstance = getApp();  Page({   data: {     location: appInstance.defaultCity   },   onLoad: function() {   … …    },   onShow: function() { //每次打开页面都会调用一次     this.setData({       location: appInstance.defaultCity //利用全局数据修改本页面数据     })   } })

展示层中渲染出来

pages/index/index.wxml

<navigator url="../cityselector/cityselector” … … >{{location}}</navigator>

相关资料:

相关项目:
微信小程序 城市/区县定位选择器 带拼音搜索 可直接使用

微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例

http://blog.csdn.net/beijiyang999/article/details/73109815加勒比海盗5

发表评论

电子邮件地址不会被公开。 必填项已用*标注