当前位置:源码库-建站教程-网站开发-微信小程序开发-微信小程序开发之界面跳转传值实现方法

微信小程序开发之界面跳转传值实现方法

时间:2018-05-13来源:网站源码库 编辑:源码库 文章热度:
通过url传值
首先调用一个点击到详情的方法,主要是通过微信API的wx.navigateTo
toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var    //获取标题
    wx.navigateTo({                                   //保留本页面,跳转到另一个页面
      url: '/pages/detail/detail?title='+title,       //传    url+值
    })
  }

然后详情页面接收值

 onLoad: function (options) {
    var    console.log('详情'+title);
  }
通过设置全局变量传值
在app.js里面设置一个全局变量host
App({
  onLaunch: function () {
  },
  globalData: {
    userInfo: null,
    host:'https://www.xzylogic.xyz/wx_Json_Img/bdy.json',
  }
})

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

 toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var    //获取标题
    const app=getApp();                               //获取app
    app.globalData.host=title;                        /给全局变量重新复制,然后在详情取出值
    console.log(title);
  }
通过本地缓存传值,据腾讯官方说,本地缓存可以设置10MB
首先传值,通过调用腾讯的APIwx.setStorage
// toDetail:在wxml页面指定绑定的方法
  toDetail: function(e){
    var index = e.currentTarget.dataset.index;        //获取下标
    var    //获取标题
    wx.setStorage({                                   //设置本地缓存
      key: "title",
      data: title
    })
     wx.navigateTo({                                   //保留本页面,跳转到另一个页面
     url: '/pages/detail/detail',                       //页面路径   传    url+值
     })
  },

然后详情获取缓存

onLoad: function (options) {
    wx.getStorage({
      key: 'title',
      success: function(res) {
        var        console.log('获取的值: '+title);
      },
    })
  }

注:相关教程知识阅读请移步到微信小程序开发频道。
相关微信小程序开发
热门标签

微信小程序开发Rss订阅微信小程序开发搜索