Uniapp是一種跨平台開發框架，可以將程式碼一次打包為多個平台運行。然而，與傳統的網頁開發不同，它並沒有像瀏覽器一樣的document物件。許多開發者會發現，在Uniapp開發中，沒有了document對象，我們該如何寫程式碼呢？
首先，我們要了解Uniapp不使用瀏覽器，而是使用了自己的渲染引擎，名為UniView。 UniView的使用方式與瀏覽器類似，也是使用HTML、CSS、JavaScript進行開發，但是其內部實作與瀏覽器的實作方式有些不同，其中最明顯的一個不同就是缺少了document物件。
那麼，如果沒有document對象，我們該如何取得頁面元素呢？這裡我們需要使用Uniapp提供的另一個API —— uni.createSelectorQuery。這個API可以像jQuery中的選擇器一樣，幫助我們快速取得指定的元素並操作它們。
下面是一個使用uni.createSelectorQuery取得頁面元素並修改其樣式的範例程式碼：
<template>
<view class="container">
<view class="box" ref="box">这是一个盒子</view>
</view>
</template>
<script>
export default {
mounted() {
uni.createSelectorQuery().select('.box').boundingClientRect(data => {
this.$refs.box.style.color = 'red';
this.$refs.box.style.fontSize = `${data.width / 5}px`;
}).exec();
}
}
</script>
<style>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.box {
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
}
</style>在這段程式碼中，我們使用了uni.createSelectorQuery().select('. box')方法取得目前頁面中的.box元素，並使用boundingClientRect方法取得該元素的位置和大小資訊。然後，再利用boundingClientRect方法傳回的data參數數據，對元素的樣式進行修改。
要注意的是，由於Uniapp並沒有像瀏覽器中的document對象，所以我們無法像在瀏覽器中使用DOM操作方式來更改元素樣式。在Uniapp中，我們需要使用vue框架提供的ref標識符來存取元素，並修改樣式。在上述程式碼中，我們使用了this.$refs.box來取得box元素，並設定了style屬性來修改元素的樣式。
整體來說，儘管Uniapp沒有像瀏覽器中的document對象，但我們可以使用其它方法來取得頁面元素並進行操作。透過使用uni.createSelectorQuery和vue框架提供的ref屬性，我們可以完成對元素的快速存取和修改。
以上是uniapp 沒有document怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！
