uniapp 使用renderjs来支持浏览器的document对象

uniapp并不支持直接使用浏览器的document对象，原因在于uniapp的运行环境并不仅仅在浏览器中，还包括各种小程序和app，这些环境中并不存在传统意义上的浏览器document对象。 可以使用uniapp提供的API替代document对象的一些功能：

• 需要修改元素样式的话，可以考虑通过数据绑定的方式去改变样式；
• 如果需要获取元素信息，可以使用uni.createSelectorQuery().select()接口。

此外，针对JavaScript的dom操作（querySelector、appendChild等等），可以使用vue的指令(v-if、v-show、v-for)和属性(v-bind:style、v-bind:class)进行操作。

renderjs

今天要介绍另一个方法，就是使用renderjs renderjs是一个运行在视图层的js，仅支持APP端和H5端，实际上H5端本身就支持DOM等，所以renderjs方案基本上只用于APP端的开发。

官方给出的renderjs使用例子

设置 script 节点的 lang 为 renderjs

<script module="test" lang="renderjs">
    export default {
        mounted() {
                // ...
        },
        methods: {
                // ...
        }
    }
</script>

具体的实例

<script >
    export default {
        data() {
                return {
                        htmlstring:""
                }
        },
        props:["code"],
        mounted() {
                this.htmlstring = this.code
        },
    }
</script>
<script  module="renderScript" lang="renderjs">
    export default {
        data() {  
                 return {  
                 }  
        },  
        methods: {
            onCodeChange(newVal, oldVal, ownerInstance, instance) {  
                    // 创建一个新的div元素
                    const tempDiv = document.createElement('div')
                    if(tempDiv){
                        tempDiv.innerHTML = newVal
                        // 查找并执行所有的script标签
                        const scriptTags = tempDiv.querySelectorAll('script')
                        scriptTags.forEach((script) => {
                          const scriptTag = document.createElement('script')
                          scriptTag.textContent = script.innerText
                          document.body.appendChild(scriptTag)
                        })
                    }
            },
        }
    }
</script>
<template>
  <view v-html="htmlstring"  :htmlstring="htmlstring" :change:htmlstring="renderScript.onCodeChange"></view>
</template>

<style scoped lang="scss"></style>