微信小程序视图template模板引用的实例详解

微信小程序 前端之家
前端之家收集整理的这篇文章主要介绍了微信小程序视图template模板引用的实例详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

微信小程序视图template模板引用的实例详解

WXML 提供两种文件引用方式import和include。

include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置

temlate.wxml

<view class="content">

<view class="author-date"&gt; 
  <image src="{{item.header_url}}" class="author"&gt;</image>
  <text class="date"&gt;{{item.date}}{{idx}}</text>
</view>
<!-- 标题内容 -->
 <text class="title"&gt;{{item.title}}</text>
 <image class="image" src="{{item.image_url}}"&gt;</image>
 <text class="article-content"&gt;{{item.content}}</text>
<view >

 <image class="article-images" src="../../images/icon/chat.png"&gt;</image>
 <text class="article-text"&gt;66</text>

 <image class="article-images" src="../../images/icon/view.png"&gt;</image>
 <text class="article-text"&gt;88</text>

</view>

redirect.wxml引用

template.js

输出出口 module.exports={ templates: content_for }

redirect.js引用

/**

  • 页面的初始数据
    */
    data: {

},/**

  • 生命周期函数--监听页面加载
    */
    onLoad: function (options) {

this.setData({
key: content_data.templates
});

}

});

wxml