【小程序】自定义模板以及使用

小程序为了避免页面中重复使用代码的问题,提供了模板机制,把一些可以复用的代码片段放置在代码中进行定义,然后在页面中使用。

定义模板

新建一个可以存放模板的文件,比如将文件命名为template.html,代码如下:

<template name="prize">
    <view>
        <text>{{name}}</text>
    </view>
</template>

template模板是通过name属性来标识的。

使用模板

通过import将模板引入到使用模板的页面,src是模板文件的路径,并使用is属性来查找该模板并使用,然后将模板所需要的data传入它需要传入的值。代码如下:

<!--xx.wxml-->
<import src="item.wxml"/>
<template is="item" data="{{prize}}"/>
// xx.js
Page({
  data: {
    prize: {
      name: '奖品名称'
    }
  }
})

注意点:

  1. 模板的is属性支持三元运算。
  2. import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容