微信小程序傳值(傳遞數據)的一些方法匯總

更新時間：2023年06月07日 14:55:53 作者：牙膏不好吃

在微信小程序的開發(fā)中,我們會經常遇到頁面間數據傳遞或者相互影響的問題,下面這篇文章主要給大家介紹了關于微信小程序傳值(傳遞數據)的一些方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1、使用全局變量傳遞數據

利用app.js 中的 globalData 將數據存儲為全局變量，在需要使用的頁面通過getApp().globalData獲取數據

app.js

App({
        globalData:{
            data: { name: 'demo' }
        }
    })

使用組件

let app = getApp()
app.globalData.data

2、使用本地存儲數據傳遞

使用小程序提供緩存

同步緩存：wx.setStorageSync 與 wx.getStorageSync

異步緩存：wx.setStorage 與 wx.getStorage

移除本地緩存：wx.removeStorageSync（同步）、wx.removeStorage（異步）

// 將數據存儲在本地緩存中指定的 key 中
    wx.setStorgaeSync('data','hello')
// 從本地緩存中同步獲取指定 key 的內容
    wx.getStorageSync('data')
// 從本地緩存中移除指定 key
    wx.removeStorgae('data')

3、使用路由傳遞數據

傳遞組件

wx.navigateTo({
      url: 'test?id=1',
      success: (res)=> {
        // 通過 eventChannel 向被打開頁面?zhèn)魉蛿祿?
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })

使用組件

Page({
      onLoad: function(option){
        console.log(option.query)
        // 監(jiān)聽 acceptDataFromOpenerPage 事件，獲取上一頁面通過 eventChannel 傳送到當前頁面的數據
        eventChannel.on('acceptDataFromOpenerPage', (data)=> {
          console.log(data)
        })
      }
    })

4、父子組件使用selectComponent('#頁面id')，triggerEvent('方法名'，'值')

<view id='demo' bind:returnDate='handleReturnDate'><view>
    Page({
        handleData(data){
           this.selectComponent("#demo").showModal(data);
        }
        // 子組件傳遞過來的值
        handleReturnDate(data){
             console.log(data)
        }
    })
    Component({
        methods:{
            // 父組件傳遞過來的數據
            showModal(data){
                console.log(data)
            },
            submit(){
                // 子組件傳遞數據給父組件
               this.triggerEvent("returnDate", sportsGuidance);
            }
        }
    })

5、子組件通過properties接收：

父組件parent

parent.wxml
    <view>
        <child :name='jack'></child>
    </view>
parent.json
     {
        "usingComponents": {
            "child":"/child/child",
        },
        "navigationBarTitleText": "父組件的導航標題"
    }

子組件 child

child.wxml

<view>
        父組件傳遞過來的name:{{name}}
    </view>

child.js

 Component({
    // 接受父組件傳遞過來的屬性
    properties:{
        name:String //簡化的定義方式
        //name:{
            //type:String,
            //value:''
        //}
    },
    // 私有數據，可用于模板渲染
    data:{},
    // 組件生命周期聲明對象
    lifetime:{
    },
    // 組件所在頁面的生命周期聲明對象
    pageLifetimes:{
    },
    // 事件響應函數和任意的自定義方法
    methods:{}
})