What should I do if uniapp has no document?

Uniapp is a cross-platform development framework that can package code to run on multiple platforms at one time. However, unlike traditional web development, it does not have a document object like a browser. Many developers will find that in Uniapp development, how should we write code without the document object?

First of all, we need to understand that Uniapp does not use a browser, but uses its own rendering engine called UniView. The usage of UniView is similar to that of a browser. It is also developed using HTML, CSS, and JavaScript. However, its internal implementation is somewhat different from that of the browser. One of the most obvious differences is the lack of the document object.

So, if there is no document object, how do we get the page elements? Here we need to use another API provided by Uniapp - uni.createSelectorQuery. This API can help us quickly obtain specified elements and operate on them, just like the selector in jQuery.

The following is a sample code that uses uni.createSelectorQuery to get page elements and modify their styles:

<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>

In this code, we use uni.createSelectorQuery().select('. box') method to obtain the .box element in the current page, and use the boundingClientRect method to obtain the position and size information of the element. Then, use the data parameter data returned by the boundingClientRect method to modify the style of the element.

It should be noted that since Uniapp does not have a document object like in the browser, we cannot use DOM operations to change the element style like in the browser. In Uniapp, we need to use the ref identifier provided by the vue framework to access the element and modify the style. In the above code, we use this.$refs.box to get the box element, and set the style attribute to modify the element's style.

In general, although Uniapp does not have a document object like in the browser, we can use other methods to obtain page elements and operate them. By using uni.createSelectorQuery and the ref attribute provided by the vue framework, we can quickly access and modify elements.

The above is the detailed content of What should I do if uniapp has no document?. For more information, please follow other related articles on the PHP Chinese website!