欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序傳值常用的4種方式

 更新時(shí)間：2023年05月29日 15:19:14   作者：z_星河  
微信小程序開(kāi)發(fā)中的大部分知識(shí)點(diǎn)和前端開(kāi)發(fā)是一模一樣的,這篇文章主要給大家介紹了關(guān)于微信小程序傳值常用的4種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

// 步驟一：在全局app.js文件中定義數(shù)據(jù)
App({
  globalData: {
    userName: '全局變量傳值',
  }
})
 
// 步驟二：獲取應(yīng)用實(shí)例，不然無(wú)法調(diào)用全局變量
const app = getApp()
 
// 步驟三：調(diào)用全局變量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

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

提示：利用微信小程序提供的本地存儲(chǔ) wx.setStorageSync 與 wx.getStorageSync 進(jìn)行傳值。

　設(shè)值：wx.setStorageSync('title', title)
　取值：var title=wx.getStorageSync('title')

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

傳遞：

// 跳轉(zhuǎn)的同時(shí)攜帶數(shù)據(jù)拼接在URL后面，跳轉(zhuǎn)到的頁(yè)面利用onLoad()方法的參數(shù)options即可獲取到傳遞的參數(shù)
wx.navigateTo({
     url: `跳轉(zhuǎn)路由?data=${data}`,
})

接收：

onLoad(options){
    console.log(options)
}

注意：如若因?yàn)閭鬟f的是對(duì)象類型的數(shù)據(jù)，到另一個(gè)頁(yè)面獲取時(shí)會(huì)發(fā)現(xiàn)是"[object,object]"，解決方法是利用JSON.stringify()和JSON.parse()

傳遞：

const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳轉(zhuǎn)url?data=${data}`
})

接收：

onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
}

四、父子組件之間傳值

  • 父向子傳值使用的是屬性綁定，子組件中 的 properties 對(duì)象 進(jìn)行接收父組件傳遞過(guò)來(lái)的值
  • 子向父傳值使用的是自定義事件，父組件通過(guò)自定義事件中的 事件對(duì)象e 來(lái)接收子組件傳遞過(guò)來(lái)的值

父向子傳值

  • 創(chuàng)建一個(gè) components 文件夾 用于存放子組件。在 components 文件夾下創(chuàng)建我們的子組件 child , 創(chuàng)建成任何名字都可以，這里創(chuàng)建成 child 。

  • 創(chuàng)建好以后就是引入，把子組件 child 引入到父組件 index 中去。 這里說(shuō)明一下，此案例創(chuàng)建了兩個(gè)頁(yè)面，一個(gè)是 pages 節(jié)點(diǎn)下的 index 路由頁(yè)面，一個(gè)是 components 節(jié)點(diǎn)下的 child 組件  。     
//在父組件的 json 文件中的 usingComponents節(jié)點(diǎn)下 引入
{
  "usingComponents": {
    "child":"../../components/child/child"
  }
}
  • 渲染子組件內(nèi)容到父組件上

給組件起的自定義名字是 child 那么 我們渲染的時(shí)候就 在 index 父組件 里寫(xiě)上一組 <child><child> 標(biāo)簽即可

  • 父組件
<child name="{{ name }}" age="{{ age }}" ></child>
export default{
    data(){
        return{
            name:"老五",
            age:50
        }
    }
}

子組件

<view>
  這是父組件傳遞過(guò)來(lái)的值 name: {{ name }}-----age {{age}}
</view>
 
// 接受父組件傳遞過(guò)來(lái)的值
  properties: {
    name:{
      type:String,
      value:'我是默認(rèn)值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默認(rèn)值： 100'
    }
  },

子向父?jìng)髦?/strong>

  • 子組件

WXML

<!-- 點(diǎn)擊按鈕向父組件傳值 -->
<button bindtap="send">點(diǎn)擊按鈕向父組件傳值</button>

JS

?
?  data: {
    msg:'我是子組件的值'
  },
  methods: {
    send(){
      this.triggerEvent('send',this.data.msg)
    }
  },
  • 父組件

父組件中定義一下這個(gè)自定義事件bindsend="send"

WXML

<child  name="{{ name }}" age="{{ age }}" bindsend="send"></child>

JS

 // 父組件接受子組件傳遞過(guò)來(lái)的值
  send(e){
    console.log(e.detail);
  }

附：解決微信小程序跳轉(zhuǎn)url傳參對(duì)象數(shù)據(jù)過(guò)長(zhǎng)報(bào)錯(cuò)的問(wèn)題

最近開(kāi)發(fā)微信小程序 碰到的一個(gè)小問(wèn)題，那就是 跳轉(zhuǎn)url的時(shí)候，傳對(duì)象數(shù)據(jù)過(guò)長(zhǎng)的問(wèn)題，小程序在傳對(duì)象的時(shí)候要先用JSON.stringify()轉(zhuǎn)換一下，接受頁(yè)面在用JSON.parse()再轉(zhuǎn)換回來(lái)。

但是這樣有一個(gè)問(wèn)題，數(shù)據(jù)過(guò)長(zhǎng)會(huì)報(bào)錯(cuò)，或者是只拿到了一部分

這個(gè)時(shí)候我們就需要用到兩個(gè) 方法

encodeURIComponent(obj) 跳轉(zhuǎn)url時(shí)的轉(zhuǎn)換方法 decodeURIComponent(options.obj) 頁(yè)面接收參數(shù)頁(yè)面的轉(zhuǎn)換方法

這樣就OK了?。。。?/p>

總結(jié)

到此這篇關(guān)于微信小程序傳值常用的4種方式的文章就介紹到這了,更多相關(guān)微信小程序傳值方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論