微信小程序有哪些传值(传递数据)方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序有哪些传值(传递数据)方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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:{}
        
})

文章来源地址https://www.toymoban.com/news/detail-458641.html

到了这里，关于微信小程序有哪些传值(传递数据)方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！