微信小程序动态添加wxml

其他 2019-03-17 19:38:36 阅读次数: 0

小程序没有像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" />
  1. 在需要绑定wxml代码的地方使用代码
<template is="pageTMP" data="{{tmpData:wxmlParse}}"></template>
  1. 在wxss中引入使用less文件编译好的wxss文件
@import "../1/parse.wxss";
  1. 在页面逻辑中将数据放入已经写好的函数中
// 引入函数
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: '广告招租位&nbsp;广告招租位&nbsp;&nbsp;广告招租位&nbsp;&nbsp;&nbsp;广告招租位\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图&nbsp;banner图&nbsp;&nbsp;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);
	}
})

效果图

猜你喜欢

转载自blog.csdn.net/qq_25000935/article/details/87878164
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022