1***@qq.com
1***@qq.com
  • 发布:2022-06-07 15:00
  • 更新:2022-09-28 16:00
  • 阅读:650

uniapp 通过json动态生成页面 加载不了uni-ui的组件

分类:uni-app

项目在做底代码开发,想通过后端返回的json生成app页面, 小白才接触uniapp 想通过 渲染函数 h() 来动态生成组件,
现在生成原生组件时没问题,但是想动态生成第三方的组件,uni-ui的组件 就生成不了 想请大神指点一二

附上代码
<script>
import { h, resolveComponent } from 'vue';

export default {  
    data() {  
        return {  
            title: 'Hello',  
            myform: null,  
        }  
    },  
    onLoad() {  
        console.log('index.vue onLoad....');  
        let formJson = {"type":"view","props":{ "key":"myview" },"children":[{type:"uni-calendar", props:{"insert": true, "lunar": true, "start-date":"2019-3-2", "end-date":"2019-5-20"}, children:[]},"heiheihei",{"type":'navigator', "props":{ url:"/pages/datepicker/datepicker" }, children:'跳转页面'},{"type":"input","props":{"name":"input_123","size":"mini","placeholder":"请输入内容"},"children":[]},{"type":"button","props":{"name":"button_123","size":"mini","type":"primary"},"children":"按钮"},{"type":"button","props":{"name":"button_222","size":"mini","type":"warn", "onClick": $event => console.log('clicked', $event.target)},"children":"按钮2"}]};  
        this.myform = this.createVNodeByJson(formJson);  
        // console.log('myform', this.myform);  
        // this.myform = h(resolveComponent('uni-calendar'));  
        // console.log('this.myform', this.myform)  
    },  
    onShow(){  
        console.log('on index show!')  
    },  
    methods: {  
        createVNodeByJson(FormJson){  
            let _json = typeof FormJson === "string" ? JSON.parse(FormJson) : FormJson;  
            return h(_json.type, _json.props || null, Array.isArray(_json.children) ? _json.children.map(child => {  
                return this.childrenBuilder(child);  
            }) : this.childrenBuilder(_json.children));  
        },  
        childrenBuilder( child ){  
            return typeof child == "string" ? child : this.createVNodeByJson(child)  
        }  
    },  
    render(){  
        return this.myform;  
    }  
}  

</script>

2022-06-07 15:00 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

请问张大哥问题你解决了吗 楼主

CODE_XU

CODE_XU

渲染函数 h() 只能用于 h5

该问题目前已经被锁定, 无法添加新回复