首页
Preview

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

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

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

此外,针对JavaScript的dom操作(querySelectorappendChild等等),可以使用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>

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(0)
收藏(0)
前端一条鱼
暂无描述

评论(0)

添加评论