微信小程序动态添加wxml

小程序没有像vue的v-html那样动态绑定页面代码的属性,这里要提前将标签提前写好,然后引入到页面当中

创建需要的标签

这一部分不需要写json文件

1. 写好需要的标签代码

这里只写几个不同的标签,具体使用看实际情况

<template name="error">
    <view class="error">数据不能为空view>
template>

<template name="large">
    <view class="ptp large">
        <image src="{{item.imgUrl}}" mode="scaleToFill" data-link="{{item.link}}" bindtap="routerLink" />
    view>
template>

<template name="twins">
    <view class="twins">
        <view class="ptp ">
            <image src="{{item.img_left}}" mode="scaleToFill" data-link="{{item.link_left}}" bindtap="routerLink" />
        view>
        <view class="ptp ">
            <image src="{{item.img_right}}" mode="scaleToFill" data-link="{{item.link_right}}" bindtap="routerLink" />
        view>
    view>
template>

<template name="twins_brother">
    <view class="twins_brother">
        <view class="ptp left">
            <image src="{{item.img_left}}" mode="scaleToFill" data-link="{{item.link_left}}" bindtap="routerLink" />
        view>
        <view class="right">
            <view class="ptp sm">
                <image src="{{item.img_up}}" mode="scaleToFill" data-link="{{item.link_up}}" bindtap="routerLink" />
            view>
            <view class="ptp sm">
                <image src="{{item.img_down}}" mode="scaleToFill" data-link="{{item.link_down}}" bindtap="routerLink" />
            view>
        view>
    view>
template>

<template name="image_text">
    <view class="image_text">
        <view class="ptp image">
            <image src="{{item.imgUrl}}" mode="scaleToFill" data-link="{{item.link_image}}" bindtap="routerLink" />
        view>
        <text class="text">
            <text class="title" v-if="{{item.title}}" data-link="{{item.link_title}}"  bindtap="routerLink">{{item.title}}text>
            <text class="content" decode="{{true}}" v-if="{{item.content}}">{{item.content}}text>
        text>
    view>
template>

<template name="text_image">
    <view class="text_image">
        <text class="text">
            <text class="title" v-if="{{item.title}}" data-link="{{item.link_title}}" bindtap="routerLink">{{item.title}}text>
            <text class="content" decode="{{true}}" v-if="{{item.content}}">{{item.content}}text>
        text>
        <view class="ptp image">
            <image src="{{item.imgUrl}}" mode="scaleToFill" data-link="{{item.link_image}}" bindtap="routerLink" />
        view>
    view>
template>

<template name="image_title">
    <view class="image_title">
        <view class="ptp image">
            <image src="{{item.imgUrl}}" mode="scaleToFill" data-link="{{item.link_image}}" />
        view>
        <view class="title">
            <text class="heading" decode="{{true}}" data-link="{{item.link_title}}">{{item.heading}}text>
            <text class="subheading" decode="{{true}}">{{item.subheading}}text>
        view>
    view>
template>

<template name="pageTMP">
    <block wx:for="{{tmpData}}" wx:key="">
        <template is="{{item.tmp}}" data="{{item}}" />
    block>
template>

2. 样式文件

样式文件使用less,然后编译成wxss

.ptp image {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 1;
}

view,
text {
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-align: center;
    word-break: break-all;
}

.error {
    font-size: 28rpx;
    color: rgb(255, 64, 64);
    text-align: center;
}

.large {
    width: 750rpx;
    height: 375rpx;
}

.twins {
    width: 750rpx;
    height: 375rpx;
    display: flex;
    view {
        width: 375rpx;
        height: 375rpx;
    }
}

.twins_brother {
    width: 750rpx;
    height: 750rpx;
    display: flex;
    >view {
        width: 375rpx;
        height: 750rpx;
        &.right {
            display: flex;
            flex-direction: column;
            .sm {
                width: 375rpx;
                height: 375rpx;
            }
        }
    }
}

.image_text,
.text_image {
    width: 750rpx;
    height: 750rpx;
    display: flex;
    .image {
        width: 375rpx;
        height: 750rpx;
    }
    .text {
        width: 375rpx;
        height: 750rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .content {
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 15;
        }
    }
}

.image_title {
    width: 750rpx;
    height: 475rpx;
    .image {
        width: 750rpx;
        height: 375rpx;
    }
    .title {
        width: 750rpx;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 15rpx;
        .heading {
            text-align: left;
            font-size: 30rpx;
            line-height: 46rpx;
            color: #333333;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .subheading {
            text-align: left;
            font-size: 26rpx;
            line-height: 40rpx;
            color: #666666;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

3. js文件

接收需要添加的标签集合,或者处理成标签数组

/**
 * 数据处理完成后放到页面的data中
 * @param {Array} data 处理后的标签集合
 * @param {Object} that 页面实例对象,通常为this
 */
function parseTMP(data = [{ tmp: 'error' }], that) {
    // 这里直接接收了处理后的数组
    that.setData({ wxmlParse: data });
}
// 使函数在外部可用
module.exports = {
	parseTmp
}

使用

1. 在需要使用的页面中引用已经写好的wxml文件

<import src="../1/parse.wxml" />

2. 在需要绑定wxml代码的地方使用代码

<template is="pageTMP" data="{{tmpData:wxmlParse}}">template>

3. 在wxss中引入使用less文件编译好的wxss文件

@import "../1/parse.wxss";

4. 在页面逻辑中将数据放入已经写好的函数中

// 引入函数
const ParseTMP = require('../1/parse');
Page({
	data: { },
	onLoad() { },
	// 使页面显示
	parseLoad() {
		// 随便写几个数据,在本地测试,链接全都用了百度的(链接点了是无效的),图片用了本地服务的图片
		let data = [
            {
                tmp: 'large',
                imgUrl: 'http://192.168.1.133:5500/as.jpg',
                link: 'https://www.baidu.com'
            },
            {
                tmp: 'twins',
                img_left: 'http://192.168.1.133:5500/bd.jpg',
                link_left: 'https://image.baidu.com',
                img_right: 'http://192.168.1.133:5500/cf.jpg',
                link_right: 'https://zhidao.baidu.com'
            },
            {
                tmp: 'twins_brother',
                img_left: 'http://192.168.1.133:5500/timg.jpg',
                link_left: 'https://wenku.baidu.com/',
                img_up: 'http://192.168.1.133:5500/as.jpg',
                link_up: 'http://music.taihe.com/',
                img_down: 'http://192.168.1.133:5500/bd.jpg',
                link_down: 'http://top.baidu.com/',
            },
            {
                tmp: 'image_text',
                imgUrl: 'http://192.168.1.133:5500/as.jpg',
                link_image: 'http://e.baidu.com/',
                title: '左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文',
                link_title: 'https://tongji.baidu.com/data/browser',
                content: '广告招租位 广告招租位  广告招租位   广告招租位\n广告招租位\n广告招租位\n广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位广告招租位'
            },
            {
                tmp: 'text_image',
                imgUrl: 'http://192.168.1.133:5500/timg.jpg',
                link_image: 'https://tongji.baidu.com/data/os',
                title: '左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图左文右图',
                link_title: 'https://tongji.baidu.com/data/screen',
                content: 'banner图 banner图  banner图\nbanner图\nbanner图\n\nbanner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图banner图'
            },
            {
                tmp: 'image_title',
                imgUrl: 'http://192.168.1.133:5500/bd.jpg',
                link_image: 'https://tongji.baidu.com/data/district',
                heading: '主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题主标题',
                link_title: '',
                subheading: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题'
            }
        ]
        // 调用函数
        ParseTMP.parseTMP(data, this);
	}
})

效果图