Uni app develops wechat applet to dynamically render pages and dynamically change the order of page component modules

uni-app Develop wechat applet to dynamically render pages , Dynamically change the page component module order

summary

Although wechat applet provides WXML Templates （template）, But for uniapp Doesn't work ,uni-app Develop wechat applet , Does not support <component :is="item" />, at present （ end 2022-05-25） Use flex Layout order To deal with it .
Parent component settings ：display: flex;flex-direction: column;; Sub component settings order, The smaller the value, the higher the value , This allows you to change the order of the subcomponents .

Usage method

Change the component name in the core code to the component name in your business , The quantity is added or deleted according to your quantity .

Effect display

Video effects show

uni-app Develop wechat applet to dynamically render pages , Dynamically change page component module

complete demo

Path screenshot

Core components （ Parent component ）

<template>
	<view>
		<view class="box">
			<input v-model="haNum" style="visibility: hidden;"/>
			<test-one :style="'order:'+orders[0]" />
			<test-two :style="'order:'+orders[1]" />
			<test-three :style="'order:'+orders[2]" />
		</view>
	</view>
</template>

<script> import TestOne from "@/components/test-one/index.vue" import TestTwo from "@/components/test-two/index.vue" import TestThree from "@/components/test-three/index.vue" export default {
       name:"test", components:{
       TestOne, TestTwo, TestThree, }, data() {
       return {
       haNum:0, orders:[], //  Data returned in the background  listHome: [ {
       title:'test-one', order:3, }, {
       title:'test-two', order:1, }, {
       title:'test-three', order:2, }, ], }; }, mounted() {
       this.getOrder(0,'test-one') this.getOrder(1,'test-two') this.getOrder(2,'test-three') console.log(this.orders) }, methods:{
       //  Get the sorting value of each module  getOrder (v,title){
       this.orders[v]=this.listHome.filter((item)=>{
       return item.title==title })[0].order this.haNum++ } } } </script>

<style> .box{
       display: flex; flex-direction: column; } </style>

Child components 1

<template>
	<view>
		<view class="">
			Test-one
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       }; }, methods:{
       } } </script>

Child components 2

<template>
	<view>
		<view class="">
			Test-two
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       }; }, methods:{
       } } </script>

Child components 3

<template>
	<view>
		<view class="">
			Test-three
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       }; }, methods:{
       } } </script>

If it works , Please click like to collect one key three links, so that more peers can avoid detours , I wish all my friends , No program bug！