首页 > 微信 > 详细

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

时间:2020-04-29 23:30:53      阅读:183      评论:0      收藏:0      [点我收藏+]
  1. 二 template模板(代码复用)

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

    技术分享图片

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

    技术分享图片

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

    技术分享图片

这里必须使用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>

技术分享图片

 

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

<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>

技术分享图片

技术分享图片

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

技术分享图片

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

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

原文:https://www.cnblogs.com/doumian/p/12805793.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!