小程序 二 template模板(代码复用)

  1. 二 template模板(代码复用)

    2.1 基本使用: 定义 name 使用is
    <template name="info">
     <button>获取授权</button>
     <text>我是文本</text>
    </template>
    ?
    <template is="info" />

    小程序 二 template模板(代码复用)

    2.2 自定义模板内容: (自定义使用data)
    <template name="test">
     <button size="mini">{{btnname}}</button>
     <view>{{content}}</view>
    </template>
    ?
    ?
    <template is="test" data="{{btnname: ‘我是测试按钮‘,content: ‘他们看见星星,我看见辰,他们看见辰,我看到的是鲲‘}}"/>
    ?

    小程序 二 template模板(代码复用)

    2.3 定义一个wxml文件 抽出来 服用样式

    小程序 二 template模板(代码复用)

这里必须使用import

此处是wxml/template.wxml
<template name="item">
<button size="mini">获取授权</button>
<button size="mini" type="primary">同意</button>
<button size="mini" type="warn">拒绝</button>
</template>
//导入template
<import src="/wxml/template.wxml" />
<template is="item"></template>

小程序 二 template模板(代码复用)

 

同样 内容也是可以自定义 :

<import src="/wxml/template.wxml" />
<template is="item" data="{{btncontent: ‘同意‘}}"></template>
?
?
<template name="item">
 <button size="mini">获取授权</button>
 <button size="mini" type="primary">{{btncontent}}</button>
 <button size="mini" type="warn">拒绝</button>
</template>

小程序 二 template模板(代码复用)

小程序 二 template模板(代码复用)

对于wxml文件 小程序提供两种方式导入,一种就是import 第二中是include

小程序 二 template模板(代码复用)

注意的是: template不能递归导入模板 不会识别

小程序 二 template模板(代码复用)

上一篇:小程序 wxs 脚本语言(2种使用方式)


下一篇:使用Fiddler工具抓取微信小程序中的图片