• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序——详细讲解页面传值(多种方法)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、使用navigator的url带参传值

(1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B

<navigator url="../index/pageB?user_id=\'12345678\'">index4</navigator>

注:?后面为你要传递的值

这样在pageB页面js的onload函数里面,使用setData方法可以获取到传递过来的值,并将它赋值给pageB页面初始数据
在pageB页面的data里面声明一个初始数据

data: {
    user_id:\'\'
 },

然后在onload函数中进行操作,页面加载时获取

onLoad: function (options) {
    this.setData({
      user_id:options.user_id
    })
    console.log(this.data.user_id)
  },

 

(2)在一般情况下我们要传多个值,与上面的差不多,只是多加了一个&,下面我代码示范

pageA

<navigator url="../index/pageB?user_id=\'12345678\'&user_name=\'lhs\'">index</navigator>

pageB

data: {
    user_id:\'\',
    user_name:\'\'
  },
onLoad: function (options) {
    this.setData({
      user_id:options.user_id,
      user_name: options.user_name,
    })
    console.log(this.data.user_id)
    console.log(this.data.user_name)
  },

 

(3)当然也可以在js页面传值,比如使用wx.navigateTo、wx.redirectTo等,下面我让大家看看与navigator对应关系

 

从上面可以看出navigator的open-type="navigate"(不写默认值是navigate)等于wx.navigateTo

好了,我接着使用wx.navigateTo使用传值;首先在pageA绑定一个点击事件

<button catchtap="pageB">index</button>

在事件中写入参数,当然如果是传多个参数的话就要在后面加&

pageB: function () {
    wx.navigateTo({
      url: \'../logs/logs?user_id=\' + 520,
    })
  },

详细:

1、wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。(可带参)

2、wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。(可带参)

3、wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(不可带参)

4、wx.reLaunch:关闭所有页面,打开到应用内的某个页面(可带参)

5、wx.navigateBack :关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。(没有url属性,不可带参)

总结:

switchTab这种导航方式,不能带参,也就是说不能通过url进行传参,解决方法就是如果要跳转到tab页面,使用reLaunch方法

 

 

2、利用getCurrentPages进行页面传值

(1).getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

pageA:dataFromB和dataFromC都是从pageB和pageC获取的,暂时没有数据

<text class=\'currentPage\'>当前页面:[pageA.wxml]</text>
<view class=\'container\'>
    <text>{{name}}</text>    
    <text>{{dataFromB}}</text>
    <text>{{dataFromC}}</text>
</view>

<button type = "primary" catchtap=\'goToPageB\'>跳转到pageB</button>

pageA的样式

page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage{
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: red;
    line-height: 80rpx;
    color: #fff;

}
.container{
    width: 600rpx;
    height: 300rpx;
    background-color: red;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
    color: #fff;
}
View Code

pagaA要初始化数据,绑定goTopageB跳转到pageB

data: {
    name: \'花泽香菜\',
    dataFromB: \'\',
    dataFromC: \'\'
  },
goToPageB: function () {
  // 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层
    wx.navigateTo({
      url: \'../pageB/index\',
    })
  },

 

pageB:array[index]是传值给pageA的数据,这里绑定goToPageC函数跳到pageC

<text class=\'currentPage\'>当前页面:[pageB.wxml]</text>
<view class=\'container\'>
    <!-- <text>{{name}}</text> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            国籍:{{array[index]}}
        </view> 
    </picker>
</view>

<button type = "primary" catchtap=\'goToPageC\'>跳转到pageC</button>

pageB的样式

page {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage {
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: #0ff;
    line-height: 80rpx;
}

.container {
    width: 600rpx;
    height: 300rpx;
    background-color: #0ff;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}
View Code

初始化pageB数据,这里是通过getCurrentPages获取页面栈给pageA传值的

data: {
    array: [\'德国\', \'日本\', \'英国\', \'法国\', \'比利时\'],
  },
// 传值
  bindPickerChange: function (e) {
    let pages = getCurrentPages();
  
    let currPage = null; //当前页面
    let prevPage = null; //上一个页面

    if (pages.length >= 2) {
      currPage = pages[pages.length - 1]; //最后一个元素为当前页面。
      prevPage = pages[pages.length - 2]; //上一个页面
      console.log(currPage + "," + prevPage);
    }
    if (prevPage) {
      //给pageA页面赋值
      prevPage.setData({
        dataFromB: \'国籍:\' + this.data.array[e.detail.value]
      });
    }
    //给当前页面赋值
    this.setData({
      index: e.detail.value
    })
  },
  goToPageC: function () {
    wx.navigateTo({
      url: \'../pageC/index\',
    })
  },

 

pageC:通过绑定goToPageA函数跳回pageA页面

<text class=\'currentPage\'>当前页面:[pageC.wxml]</text>
<view class=\'container\'>
    <!-- <text>{{name}}</text> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            作品:{{array[index]}}
        </view> 
    </picker>
</view>

<button type = "primary" catchtap=\'goToPageA\'>跳转到pageA</button>

pageC样式

page {
   display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}
.currentPage {
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: pink;
    line-height: 80rpx;
}
.container {
    width: 600rpx;
    height: 300rpx;
    background-color: pink;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}
View Code

初始化数据,这里是通过wx.navigateBack返回pageA,如果使用wx.navigateTo返回pageA是没有传值

/**
   * 页面的初始数据
   */
  data: {
    array: [\'恋爱循环\', \'大丈夫\'],
  },
  bindPickerChange: function (e) {
    let pages = getCurrentPages();

    let currPage = null; //当前页面
    let prevPage = null; //上一个页面

    if (pages.length >= 2) {
      currPage = pages[pages.length - 1]; //最后一个元素为当前页面。
      prevPage = pages[pages.length - 3]; //pageA页面
      console.log(currPage + "," + prevPage);
    }
    if (prevPage) {
      //给上一个页面赋值
      prevPage.setData({
        dataFromC: \'代表作品:\' + this.data.array[e.detail.value]
      });
    }
    //给当前页面赋值
    this.setData({
      index: e.detail.value
    })
  },
  goToPageA: function () {
    // 关闭当前页面,返回上一页面或多级页面。
    wx.navigateBack({
      delta:2
    })
  },

 运行效果:

注意:

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
  • 小程序页面栈最多有十个,多了就不能使用wx.navigateTo跳转

 

(2)页面栈

从上图可知使用wx.navigateBack页面不断出栈,直到目标返回页;即pageA使用wx.navigateTo跳到pageB,pageB使用wx.navigateTo跳到pageC,pageC使用wx.navigateBack跳到pageA,而页面栈是一路出栈的直到返回pageA,这时页面栈就只有一个pageA

举个例子,pagaA查看页面栈的数量:

总数是1,而这个页面栈就是pageA了

 

 

3. globalData全局对象

在 app.js 中定义全局变量

globalData: {
    userInfo: null,
    globalName:"lhs"
  }

在其他页面可以取到全局变量

let app = getApp();    
console.log(app.globalData.globalName)

 

 

4、数据缓存

数据缓存,类似于cookie,localstorage,sessionstorage等本地缓存的方法,只不过微信小程序有它自己的本地缓存API。当然,为什么非要使用这种方法呢?

当然有第一二种方法不能用的情况,举个例子,同样要将页面A的内容传递给页面B,但是页面B和页面A没有父子页面关系,说简单一点,就是A页面和B页面没有跳转关系,但是B页面就是要从A页面拿数据,前面提到页面带参跳转就没有用了,如果页面层级太多,页面栈的方法也就没有,所以就要用到我们的第三种方法,数据缓存,将页面A的数据本地缓存,然后在B页面的onLoad函数中使用就行

 (1)wx.setStorage(OBJECT)和wx.getStorage(OBJECT)(异步接口)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

首先在页面A的onload中使用wx.setStorage将要B页面需要的值存储起来,如果需要存储多个值,可以封装成数组或者对象键值对的形式

data: {
    info:{\'name\': \'周杰伦\',
      \'phone\': \'123456789\',
      \'address\': \'台北\'}  
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.setStorage({
      key: \'information\',
      data: that.data.info,
      success(res){//等同于success:function(res),es6的写法,es6在小程序中都可以使用,推荐使用
     。。。。。。。
        }
    })    
  },

在B页面我们只需要使用wx.getStorage()就可以拿到你需要的值了

data: {
    name:\'\',
    phone:\'\',
    address:\'\'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.getStorage({
      key: \'information\',
      success: function(res) {
        console.log(res.data)
        that.setData({
          name: res.data.name,
          phone: res.data.phone,
          address: res.data.address
        })
      }
    })  
  },

当然现在我们可以在A页面采取页面跳转跳到B页面看有没有获取到数据,其实也没有必要,答案当然是获取到了

注:这里还有一个同步 wx.setStorageSyncwx.getStorageSync,使用方法一样

 

(2).wx.clearStorage和wx.clearStorageSync(异步,同步清除缓存)

这种方法的弊端就在这儿,清除缓存,什么时候清除合理,都是值得思考的问题
我想一般就是在退出登录的时候执行吧,不能过早,也不能过晚,时机很重要

 

(3).wx.removeStorage(OBJECT)和wx.removeStorageSync(OBJECT)(异步,同步)

从本地缓存中异步移除指定 key
使用方法和存储数据一样,OK,不多做赘述

 

(4).wx.getStorageInfo(OBJECT)和wx.getStorageInfoSync(异步,同步

wx.getStorageInfo异步获取当前storage的相关信息,比如说已经占用了多少存储空间

wx.getStorageInfo({
  success: function(res) {
    console.log(res.keys)//当前storage中所有的key
    console.log(res.currentSize)//当前占用的空间大小, 单位kb
    console.log(res.limitSize)//限制的空间大小,单位kb
  }
})

wx.getStorageInfoSync()同步获取当前storage的相关信息

try {
  const res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // Do something when catch error
}

看到这里大家应该注意到,结尾有Sync的为同步。

同异步区别:

1、同步方法会堵塞当前任务,直到同步方法处理返回。
2、异步方法不会塞当前任务。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap