微信小程序之页面传值(路由、页面栈、globalData、缓存)

ゞ浴缸里的玫瑰 2023-02-19 03:27 32阅读 0赞

## 微信小程序之页面传值(路由、页面栈、globalData、缓存) ##

感谢下面博主分享的文章，稍作整理当做小程序学习笔记。  
https://blog.csdn.net/qq\_28685759/article/details/78292012  
https://www.cnblogs.com/cckui/p/10212398.html

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

*  固定参数传递：通过`navigator标签的url属性`，实现跳转和传递参数
    
        <navigator url="../detail/detail?id=1&name=名称">点此进入 detail</navigator>
 *  在detail页面的`onLoad方法`中取值
    
        onLoad: function (options) {  
        	console.log(options.id,options.name)
        }

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

>  *  那么我们需要先把实体转成string类型进行传递
>  *  在详情页面接受到在逆向转成实体
> 
> 如下面这段示例：
> 
>     //这里我们跳转详情界面
>     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)
>       }

### 方式二：从列表取值 ###

> 方法：从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页
> 
>  *  在列表页通过data-id=’\{ \{item.id\}\}'给各个项目绑定一个 id ；
>  *  在详情页通过 onload 拿到 id;

`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 还没有生成

页面栈应用场景：

> 例如，在首页 index 进入列表页 list，再进入详情页 detail 后，如果需要能从detail页一键返回到index页，并且传值给index页，这里就可以用页面栈来实现。

`首页`：

<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
        }

### 方式六：input 搜索传值 ###

*  `bindinput`: 键盘输入时触发，event.detail = \{value, cursor, keyCode\}，keyCode 为键值
 *  `bindconfirm`: 点击完成按钮时触发，event.detail = \{value: value\}

<view class='search'>
        <image src='/images/search.png'></image>
        <input placeholder='Find your favourite food' auto-focus bindinput="bindKeyInput" bindconfirm='goSearch' ></input>
        <text bindtap='goSearch'>搜索</text>
    </view>

// pages/search/search.js 
    Page({  
      data: { 
        inputValue: ''
      }, 
    
      bindKeyInput(e) { 
        this.setData({ 
          inputValue: e.detail.value
        })
        console.log(this.data.inputValue)
      },
    
      // 进入搜索结果页 -> list
      goSearch() { 
        let content = this.data.inputValue
        if (!content) { 
          console.log('内容为空')
          return
        } 
    
        wx.navigateTo({ 
          url: `/pages/list/list?content=${ content}`,
        })
      }
    })