微信小程序之界面跳转传值

1. 通过url传值
首先调用一个点击到详情的方法,主要是通过微信API的wx.navigateTo

toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var title = this.data.listDatas[index].title;     //获取标题
    wx.navigateTo({                                   //保留本页面,跳转到另一个页面
      url: '/pages/detail/detail?title='+title,       //传    url+值
    })
  }

然后详情页面接收值

 onLoad: function (options) {
    var title=options.title;
    console.log('详情'+title);
  }

2.通过设置全局变量传值
在app.js里面设置一个全局变量host

App({
  onLaunch: function () {
  },
  globalData: {
    userInfo: null,
    host:'http://www.xzylogic.xyz/wx_Json_Img/bdy.json',
  }
})

然后在跳转详情的方法里面重新赋值

 toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var title = this.data.listDatas[index].title;     //获取标题
    const app=getApp();                               //获取app
    app.globalData.host=title;                        /给全局变量重新复制,然后在详情取出值
    console.log(title);
  }

3.通过本地缓存传值,据腾讯官方说,本地缓存可以设置10MB
首先传值,通过调用腾讯的APIwx.setStorage,下面的例子是异步缓存,还有同步缓存。关于微信小程序缓存的博客

// toDetail:在wxml页面指定绑定的方法
  toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var title = this.data.listDatas[index].title;     //获取标题
    wx.setStorage({                                   //设置本地缓存
      key: "title",
      data: title
    })
     wx.navigateTo({                                   //保留本页面,跳转到另一个页面
     url: '/pages/detail/detail',                       //页面路径   传    url+值
     })
  },

然后详情获取缓存

onLoad: function (options) {
    wx.getStorage({
      key: 'title',
      success: function(res) {
        var title=res.data;
        console.log('获取的值: '+title);
      },
    })
  }
posted @ 2018-05-06 21:33  我的网名  阅读(109)  评论(0)    收藏  举报