URL參數(shù)傳遞：可以通過(guò)URL參數(shù)的方式將數(shù)據(jù)傳遞給小程序頁(yè)面。

Storage存儲(chǔ)：可以通過(guò)Storage API將數(shù)據(jù)存儲(chǔ)在本地，然后在小程序頁(yè)面中讀取。

全局變量：可以將數(shù)據(jù)存儲(chǔ)在小程序的全局變量中，然后在小程序頁(yè)面中讀取。

數(shù)據(jù)綁定：可以通過(guò)數(shù)據(jù)綁定的方式將數(shù)據(jù)傳遞給小程序頁(yè)面。

自定義事件：可以通過(guò)自定義事件的方式將數(shù)據(jù)傳遞給小程序頁(yè)面。

WebSocket：可以通過(guò)WebSocket協(xié)議將數(shù)據(jù)傳遞給小程序頁(yè)面。

數(shù)據(jù)庫(kù)：可以通過(guò)小程序提供的數(shù)據(jù)庫(kù)API將數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中，然后在小程序頁(yè)面中讀取。

1、使用全局變量傳遞數(shù)據(jù)

利用app.js 中的 globalData 將數(shù)據(jù)存儲(chǔ)為全局變量，在需要使用的頁(yè)面通過(guò)getApp().globalData獲取數(shù)據(jù)

app.js

???

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

使用組件

???

let app = getApp()
     
app.globalData.data

2、使用本地存儲(chǔ)數(shù)據(jù)傳遞

使用小程序提供緩存

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

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

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

?

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

3、使用路由傳遞數(shù)據(jù)

傳遞組件

???

wx.navigateTo({
      url: 'test?id=1',
      success: (res)=> {
        // 通過(guò) eventChannel 向被打開(kāi)頁(yè)面?zhèn)魉蛿?shù)據(jù)
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })

使用組件

???

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

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

<view id='demo' bind:returnDate='handleReturnDate'><view>

    Page({
          
        handleData(data){
           this.selectComponent("#demo").showModal(data);
        }
        // 子組件傳遞過(guò)來(lái)的值
        handleReturnDate(data){
             console.log(data)
        }
    })

    Component({
        
        methods:{
            // 父組件傳遞過(guò)來(lái)的數(shù)據(jù)
            showModal(data){
                console.log(data)
            },
            submit(){
                // 子組件傳遞數(shù)據(jù)給父組件
               this.triggerEvent("returnDate", sportsGuidance);
            }
        }
    })

5、子組件通過(guò)properties接收：

父組件parent

parent.wxml

    <view>
        <child :name='jack'></child>
    </view>

parent.json

     {
        "usingComponents": {
            "child":"/child/child",
        },
        "navigationBarTitleText": "父組件的導(dǎo)航標(biāo)題"
    }

子組件 child

child.wxml

???

<view>
        父組件傳遞過(guò)來(lái)的name:{{name}}
    </view>

child.js

???

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

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458641.html

到了這里，關(guān)于微信小程序有哪些傳值(傳遞數(shù)據(jù))方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！