uni-app开发微信小程序动态渲染页面，动态改变页面组件模块顺序

uni-app开发微信小程序动态渲染页面，动态改变页面组件模块顺序

概述

虽然微信小程序提供了WXML模板（template），但是对于uniapp并不管用，uni-app开发微信小程序，并不支持 <component :is="item" />，目前（截止2022-05-25）使用flex布局的order来处理。
父组件设置：display: flex;flex-direction: column;；子组件设置order，值越小越在前，这样就可以改变子组件的顺序了。

使用方法

将核心代码里的组件名称改为你业务中的组件名称，数量依据你的数量进行增删。

效果展示

视频效果展示

uni-app开发微信小程序动态渲染页面，动态改变页面组件模

完整demo

路径截图

核心组件（父组件）

<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:[],
				// 后台返回的数据
				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:{
			// 获取每个模块的排序值
			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>

子组件1

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

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

子组件2

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

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

子组件3

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

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

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！