This is the 17th day of my participation in Gwen Challenge

Writing background

When I just entered the new company, I learned about the company’s project: a self-research project of looking for rent. The tech stack is developed using UNI-APP and H5.

In the development of some functions, such as the pull-down refresh, we did not provide ready-made ones, but wrote them by hand, which used renderJS.

Watson, I’ve discovered a new blind spot.

So pay close attention to the study of a wave, after all, rely on this for a meal.

What is RenderJS?

First take a look at his description in the UNI-app documentation:

Renderjs is a JS that runs at the view layer. It’s more powerful than WXS. It only supports app-Vue and H5.

Renderjs does two main things:

1. Significantly reduce communication loss between logic layer and view layer, and provide high-performance view interaction capability

2. Operate dom in view layer and run js library for Web

Then, I have understood this part according to my Chinese level and summed it up simply and rudely:

Vue itself does not support direct manipulation of the DOM through native JS, so in UniApp, renderJS can be used to implement communication, or manipulation, between the logical layer (Vue’s template or virtual DOM) and the view layer (native DOM).

Precautions when using

1. Currently, only inline use is supported.

2. Do not directly reference large class libraries. It is recommended to dynamically create scripts to reference them.

3, can use vUE component life cycle can not use App, Page life cycle

4. The communication mode of the view layer and logical layer is the same as that of WXS. In addition, you can use this.

5. Observation updated data can be directly accessed in the view layer.

6. The path referenced by the page in the view layer of the APP side is calculated relative to the root directory, for example:./static/test.js.

7. Dom and BOM API can be used on the APP side, and data at the logical layer cannot be directly accessed. Uni interfaces (e.g. Uni.request) cannot be used.

8. H5 logical layer and view layer actually run in the same environment, which is equivalent to using mixin mode and can directly access the logical layer data.

To a small demo

<template>
  <view>
        <! < renderJS > < renderjs > < renderjs > < renderjs >
        <! What do you mean by this? Render in receiveMsg is the module name defined below by renderJS -->
        <view @click="renderScript.emitData" :msg="msg" :change:msg="render.receiveMsg" class="renderjs" id="renderjs-view">
        </view>
        <button @click="changeMsg" class="app-view">app-view</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg: ' '
      };
    },
    methods: {
      // Change the data to trigger renderJS
      changeMsg() {
        this.msg = 'hello renderjs' + Math.random() * 10;
      },
      // Receive the data passed by RenderJS
      receiveRenderData(val) {
        console.log('receiveRenderData-->', val); }}};</script>

<script module="render" lang="renderjs">
    export default {
      data() {
        return {
          name: 'render-vm'}},mounted() {
        const view = document.getElementById('renderjs-view')
        const button = document.createElement('button')
        button.innerText = 'A button'
        view.appendChild(button)
      },
      methods: {
        // Receive the data passed by the logical layer
        receiveMsg(newValue, oldValue, ownerVm, vm) {
          console.log('newValue', newValue)
          console.log('oldValue', oldValue)
          console.log('ownerVm', ownerVm)
          console.log('vm', vm)
        },
        // Invoke the logical layer method
        emitData(e, ownerVm) {
          ownerVm.callMethod('receiveRenderData'.this.name)
        }
      }
    };
</script>
Copy the code

thinking

Uni-app based on VUE also does not support direct manipulation of the DOM. Vue itself is a data-driven framework, but in actual development, some requirements inevitably require us to do something out of line.

This wave of learning makes me see more possibilities in UNI-App for APP development and H5 development.

Hopefully it will help you too, broaden your horizons and give you more possibilities for development.

Reference:

Uni – app document