建立一個全新的專案:
然後在設定一下,微信小程式的 AppId,直接去之前的專案中拷貝一下即可,找到之前專案的 manifest.json
檔案,然後選擇微信小程式設定,複製一下即可。
建立一個 one 頁面,我們在首頁當中編寫一個按鈕,點選按鈕跳轉到 one 頁面,然後在 one 頁面當中顯示傳遞過來的資料,我這裡是通過 CompositionAPI 來進行傳遞資料的,程式碼如下:
<template>
<view>
<button type="primary" @click="onJumpOne">跳轉到One介面</button>
</view>
</template>
<script setup>
function onJumpOne() {
uni.navigateTo({
url: '/pages/one/one?name=BNTang&age=18'
})
}
</script>
然後在 one 頁面當中接收資料,程式碼如下:
<template>
<view>
<text>One</text>
</view>
</template>
<script setup>
import {
onLoad
} from '@dcloudio/uni-app'
onLoad((option) => {
console.log(option)
})
</script>
然後我們點選按鈕,跳轉到 one 頁面,可以看到控制檯列印出了我們傳遞過來的資料:
除了通過 option 來接收資料之外,我們還可以通過 props 來接收資料,程式碼如下:
<script setup>
const props = defineProps({
name: String,
age: Number
})
console.log(props.name, props.age);
</script>
好了,這是正向傳遞資料,那麼反向傳遞資料呢?
我們在 one 頁面當中編寫一個按鈕,點選按鈕跳轉到首頁頁面,然後在首頁頁面當中顯示傳遞過來的資料,程式碼如下:
<template>
<view>
<text>One</text>
<button type="primary" @click="goBackClick">返回首頁</button>
</view>
</template>
<script setup>
function goBackClick() {
uni.navigateBack({
delta: 1
});
}
</script>
頁面已經搭建好了,那麼我們就可以開始傳遞資料了,在之前我們是通過 this.getOpenerEventChannel();
來進行傳遞資料的,但是在 CompositionAPI 當中沒有 this,那麼我們現在要做的第一件事情就是獲取 this,在 compositionAPI 當中獲取 this 可以通過 getCurrentInstance()
來獲取,程式碼如下:
<script setup>
import {
ref,
getCurrentInstance
} from 'vue'
// 獲取 this
const $instance = ref(getCurrentInstance().proxy)
... other
</script>
竟然獲取到了 this,那麼接下來的程式碼就和之前的一樣了,程式碼如下:
<script setup>
import {
ref,
getCurrentInstance
} from 'vue'
// 獲取 this
const $instance = ref(getCurrentInstance().proxy)
function goBackClick() {
uni.navigateBack({
delta: 1
});
const eventChannel = $instance.value.getOpenerEventChannel();
eventChannel.emit("acceptDataFromOpenerPage", {
data: '通過事件通道返回時傳遞資料'
})
}
</script>
如上程式碼就是我們之前的逆著傳遞資料的程式碼,改動的點就是之前是 this.getOpenerEventChannel(); 現在是 $instance.value.getOpenerEventChannel();,然後我們在首頁當中接收資料,程式碼如下:
<script setup>
function onJumpOne() {
uni.navigateTo({
url: '/pages/one/one?name=BNTang&age=18',
events: {
acceptDataFromOpenerPage(data) {
console.log(data)
}
}
})
}
</script>
執行一下,點選按鈕跳轉到 one 頁面,然後點選返回按鈕,可以看到控制檯列印出了我們傳遞過來的資料:
那麼逆向傳遞看完了,正向傳遞就來快速過一下,首先更改首頁的程式碼,程式碼如下:
<script setup>
function onJumpOne() {
uni.navigateTo({
url: '/pages/one/one',
success(res) {
// 通過eventChannel向被開啟頁面傳送資料
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: '通過事件通道傳遞的資料'
})
}
})
}
</script>
然後在 one 頁面當中接收資料,程式碼如下:
<script setup>
import {
ref,
getCurrentInstance
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
// 獲取 this
const $instance = ref(getCurrentInstance().proxy)
onLoad((option) => {
const eventChannel = $instance.value.getOpenerEventChannel();
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
})
</script>
執行一下,點選按鈕跳轉到 one 頁面,可以看到控制檯列印出了我們傳遞過來的資料:
大家好我是 BNTang, 一個熱愛分享的技術的開發者,如果大家覺得我的文章對你有幫助的話,可以關注我的公眾號 JavaBoyL
,我會在公眾號中分享一些IT技術和一些個人的見解,謝謝大家的支援。