微信小程序传值以及获取值方法（微信小程序有哪些传值(传递数据)方法）

URL参数传递：可以通过URL参数的方式将数据传递给小程序页面    
    
    。

Storage存储：可以通过Storage API将数据存储在本地   
    
    
，然后在小程序页面中读取    


     


     


。

全局变量：可以将数据存储在小程序的全局变量中


     


     


    ，然后在小程序页面中读取




 




 




。

数据绑定：可以通过数据绑定的方式将数据传递给小程序页面   

   

   。

自定义事件：可以通过自定义事件的方式将数据传递给小程序页面     

     

     

。

WebSocket：可以通过WebSocket协议将数据传递给小程序页面




  




  




。

数据库：可以通过小程序提供的数据库API将数据存储在数据库中 




 




 


，然后在小程序页面中读取
  


  


  。

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 向被打开页面传送数据 res.eventChannel.emit(acceptDataFromOpenerPage, { data: test }) } })

使用组件

Page({ onLoad: function(option){ console.log(option.query) // 监听 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:{} })