微信小程序：模板渲染的使用

微信小程序：模板渲染的使用

首先还是先说下模板的用途

• 小程序中的模板（可以理解成就是一个page页面）在要使用的地方引用即可
• 可以把公用的样式写成一个模板，在使用的页面使用标签引用即可 <include src="/pages/template/template.wxml"/>
• 提成公用的这样的好处我就不多说了，哈哈哈
• 在模板的js中也可以写一些事件，与后台的交互

接下来上模板的js和wxml:

/** 这个是template.js  **/

function getContent(page) {
  page.setData({ 
    content: '这里是模板的content()方法，说明执行了模板中的方法' 
  });
}

module.exports = {
  getContent
}

<!--client/pages/template/template.wxml-->
<view>
  <!-- 颜色依旧为爱是一道光，毕竟保护视力 -->
  <text style='color:green;font-size:100rpx;display:block;'>我是模板</text>
  <text style='display:block;'>在这里可以写一些公用的样式</text>
  <text style='display:block;'>可以写一些商城的加减号,列表的展示</text>
  <text>在这里就不多的介绍了</text>
</view>
<view>
  <label>{{content}}</label>
</view>

接下来写调用的test中的js和wxml，上代码：

js中简化了代码

/**这里是test.js */

const template = require('../template/template.js')
Page({

  onLoad: function () {
    var content = template.getContent(this);
  }

});

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>

<!-- 背景色来个爱是一道光吧，毕竟可以保护眼睛 -->
<button style='background-color:green;' open-type="getUserInfo" bindgetuserinfo='bindgetuserinfo'>测试登录</button>
<view>{{userInfo.nickName}}</view>
<view><image src='{{userInfo.avatarUrl}}'></image></view>
<!-- 分割线上边的是说登录的代码，不用看，有兴趣可以看登录篇的介绍 -->


<view>
  <!-- 这里就是要引用的模板 -->
  <include src="/pages/template/template.wxml"/>
</view>

上一个效果图吧：