• 微信小程序——页面之间传递值


    小程序页面传值的方式:

    1.正向传值:上一页面 -->  下一页面

    1. url传值
    2. 本地储存
    3. 全局的app对象

    2.反向传值:下一页面 -->  上一页面

    1. 本地储存
    2. 全局的app对象

    正向传值

    1. url传值

     通过url传值的需要通过option来获取参数值。

     更多详情可以访问小程序-navigateTo章节

     A页面:

    wx.navigateTo({
      url: 'test?id=1'
    })

    如果传的是变量,可以自己拼接一下:

    wx.navigateTo({
      url: '../fighting/fighting?' + "gknumber= " + id,
    })

    //或者
    wx.navigateTo({
      url: `../fighting/fighting?gknumber=${id}`,
    })

    B页面:

    Page({
      data:{
        id:'',
      },
      onLoad: function(option){
        this.setData({
          id:option.id
        })
      }
    })

    2.本地存储:

    关于缓存,可以先访问小程序-数据缓存稍作了解。

    A页面:

    wx.setStorageSync('username', 'ddd')

    B页面:

    Page({
      data:{
        username:'',
      },
      onLoad: function(){
       var username = wx.getStorageSync('username')
       this.setData({
           username: username
        })
      }
    })

    3.全局的app对象

    关于app对象,可以访问小程序-注册程序了解相关信息。

    A页面:

    var app = getApp();
    app.username='ddd';

    B页面:

    var app = getApp();
    var username = app.username;

    再说一下反向传值,看了上面那几种方法,你应该知道反向传值有哪几种方式了。对,就是方法2和方法3:

    反向传值

    1.本地存储:

    B页面:

    wx.setStorageSync('username', 'ddd');
    //返回上一页
    wx.navigateBack();

    A页面:

    Page({
      data:{
        username:'',
      },
      onShow: function(){
       var username = wx.getStorageSync('username')
       this.setData({
           username: username
        })
      }
    })

    2.全局的app对象

    B页面:

    var app = getApp();
    app.username='ddd';

    A页面:

    var app = getApp(); 
    
    Page({
      data:{
        username:'',
      },
      onShow: function(){
       var username = app.username;
       this.setData({
           username: username
        })
      }
    })

    参考链接:https://www.cnblogs.com/sese/p/9469699.html

  • 相关阅读:
    alt、title和label
    css3-transform
    word break和word wrap
    聊聊svg
    JS严格模式
    JS提前声明和定义方式
    js跨域
    IE7append新的元素自动补充完整路径
    HTML5摇一摇
    基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
  • 原文地址:https://www.cnblogs.com/lfri/p/11979053.html
Copyright © 2020-2023  润新知