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

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

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

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

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

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

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

傳遞：

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

接收：

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

注意：如若因為傳遞的是對象類型的數(shù)據(jù)，到另一個頁面獲取時會發(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 對象 進行接收父組件傳遞過來的值
• 子向父傳值使用的是自定義事件，父組件通過自定義事件中的 事件對象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"
  }
}

• 渲染子組件內(nèi)容到父組件上

給組件起的自定義名字是 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);
  }

附：解決微信小程序跳轉(zhuǎn)url傳參對象數(shù)據(jù)過長報錯的問題

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

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

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

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

這樣就OK了?。。?！

總結(jié)

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

最新評論