微信小程序之页面传值

以你之姓@ 2023-03-04 09:27 163阅读 0赞

# 方式一：通过url带参数传递 #

固定参数传递：通过`navigator标签的url属性`，实现跳转和传递参数

<navigator url="../detail/detail?id=1&name=名称">点此进入 detail</navigator>

在detail页面的`onLoad方法`中取值

onLoad: function (options) { 
    	console.log(options.id,options.name)
    }

`知识延伸`：我们要传递的实体是object类型

如下面这段示例：

//这里我们跳转详情界面
    queryItemClick: function (e) {
        var that = this
        //拿到点击的index下标
        var index = e.currentTarget.dataset.index
        //将对象转为string
        var queryBean = JSON.stringify(that.data.queryList[index])
        wx.navigateTo({
          url: '../queryResult/queryResult?queryBean=' + queryBean,
        })
      }

这里我们用JSON.stringify()函数将实体转成string类型进行传递，那么我们在看看接收参数

/***重点内容*
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that=this
        var queryBean = JSON.parse(options.queryBean);
        that.setData({
          queryBean: queryBean
        })
        //console.log(that.data.queryBean)
      }

# 方式二：从列表取值 #

list页面

<view class="list">
      <view class='box' wx:for='{
       {list}}' wx:key='{
       {index}}' data-id='{
       {item.id}}' bindtap='goDetail'>
        <image src='{
       {item.img}}'></image>
        <view class='tip'>
          <text>{
       {item.title}}</text>
          <text class='price'>￥{
       {item.price}}</text>
        </view>
      </view>
    </view>

// 进入详情页时 传递 id
    goDetail (e) {
        // 通过e.currentTarget.dataset.属性，接收自定义属性  data-属性
        console.log(e.currentTarget.dataset.id),
        wx.navigateTo({
            url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
        })
    }

详情页：detail.js文件，接收传递的参数id

onLoad: function (options) {
        console.log(options.id)
    },

# 方式三：通过页面栈传值 #

`getCurrentPages()`函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，

第一个元素为首页，最后一个元素为当前页面

注意：

*  不要尝试修改页面栈，会导致路由以及页面状态错误
 *  不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成

页面栈应用场景：

`首页`：

<view>{
       {tag}}</view>

//index.js 
    Page({
      data: {
        tag: ''
      }
    })

`详情页`：返回上一页面或多级页面。可通过 `getCurrentPages()`获取当前的页面栈，决定需要返回几层。

<view bindtap='backToIndex'> 点此返回首页 </view>

// pages/detail/detail.js
    Page({
      data: {
        tag: '土豆'
      },
      
      backToIndex () {
        let pages = getCurrentPages() // 获取页面栈，pages为一个数组，里面存储了从首页到当前页的所有页面，如下图所示
        console.log(pages)
        let tag = this.data.tag // 拿到当前页的tag
        wx.navigateBack({
          delta: 2,
          success () {
            pages[0].setData({
              tag: tag    // 将当前detail页的tag赋值给首页index中的tag
            })
          }
        })
      },
    })

# 方式四：通过globalData #

在 app.js 中定义全局变量

globalData：{
         name: '姓名'
     }

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

let app = getApp();    
    console.log(app.globalData.userInfo) // 姓名

# 方式五：通过 缓存 setStorage #

web中的本地存储和小程序中的本地存储的区别
    
    1. 写代码的方式不一样
       web:   localStorage.setItem("key","value")   localStorage.getItem("key")
       小程序：wx.setStorageSync("key","value")   wx.getStorageSync("key")
    2. 存的时候   有没有做类型转换
       web: 不管存入的是什么类型的数据，最终都会先调用以下 toString()把数据变成字符串再存入
       小程序：不存在类型转换这个操作，存什么类型的数据，获取的时候就是什么类型。

添加缓存：单个密钥允许存储的最大数据长度为1MB，所有数据存储上限为10MB。

// 存储信息到storage 
    // 异步存储
    set() {
        wx.setStorage({
            key: 'user',
            data: 'cck',
            success: ()=> {
                console.log('存储成功');
            }
        })
    },
    
    // 同步存储
    set() {
        try {
            wx.setStorageSync('user', 'cck')
        } catch (e) { }
    }

获取缓存：从本地缓存中异步获取指定key的内容

// 异步
    wx.getStorage({
      key: 'user',
      success (res) {
        console.log(res.data)
      }
    })
    
    // 同步
    try {
      var value = wx.getStorageSync('user')
      if (value) {
        // Do something with return value
      }
    } catch (e) {
      // Do something when catch error
    }

移除缓存：从本地缓存中移除指定 key

// 异步
    wx.removeStorage({
      key: 'user',
      success (res) {
        console.log(res.data)
      }
    })
    
    // 同步
    try {
      wx.removeStorageSync('user')
    } catch (e) {
      // Do something when catch error
    }