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

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

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

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

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

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

二、本地存儲傳遞數據

提示：利用微信小程序提供的本地存儲 wx.setStorageSync 與 wx.getStorageSync 進行傳值。

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

三、使用路由傳遞數據

傳遞：

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

接收：

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

注意：如若因為傳遞的是對象類型的數據，到另一個頁面獲取時會發(fā)現是"[object,object]"，解決方法是利用JSON.stringify()和JSON.parse()

傳遞：

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

接收：

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

四、父子組件之間傳值

  • 父向子傳值使用的是屬性綁定，子組件中 的 properties 對象 進行接收父組件傳遞過來的值
  • 子向父傳值使用的是自定義事件，父組件通過自定義事件中的 事件對象e 來接收子組件傳遞過來的值

父向子傳值

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

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

給組件起的自定義名字是 child 那么 我們渲染的時候就 在 index 父組件 里寫上一組 <child><child> 標簽即可

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

子組件

<view>
  這是父組件傳遞過來的值 name: {{ name }}-----age {{age}}
</view>
 
// 接受父組件傳遞過來的值
  properties: {
    name:{
      type:String,
      value:'我是默認值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默認值： 100'
    }
  },

子向父傳值

  • 子組件

WXML

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

JS

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

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

WXML

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

JS

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

附：解決微信小程序跳轉url傳參對象數據過長報錯的問題

最近開發(fā)微信小程序 碰到的一個小問題，那就是 跳轉url的時候，傳對象數據過長的問題，小程序在傳對象的時候要先用JSON.stringify()轉換一下，接受頁面在用JSON.parse()再轉換回來。

但是這樣有一個問題，數據過長會報錯，或者是只拿到了一部分

這個時候我們就需要用到兩個 方法

encodeURIComponent(obj) 跳轉url時的轉換方法 decodeURIComponent(options.obj) 頁面接收參數頁面的轉換方法

這樣就OK了?。。?！

總結

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

相關文章

最新評論