小程序没有像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: cente