微信小程序二

微信小程序（二）

template 模板

这里的模板与 vue 中的模板一样，都是帮助代码重用，比 vue 的简单

首先要创建个文件夹存放模板代码，需要个wxml,wxss，一个存放模板 wxml 代码，一个存放模板 wxss 代码。

用法：

• 书写模板

1、在 wxml 文件中书写模板代码需要用个特定根元素包含起来<template name="..."></template>，在根元素中要用属性 name 给模板起个名

2、在 wxss 文件中书写模板代码就没有什么要求了

• 导入模板

1、在要用到模板的 wxml 文件内导入 <import src="../../..." /> 在src属性内填入模板路径

2、在要用到模板的 wxss 文件内导入 @import "../../....." 这里填入模板文件路径即可，

• 使用模板

1、在 wxml 文件内使用模板，<template is="..." data="{{}}"></template>，在导入代码中要用 is 属性将模板链接起来，is属性的值是模板名；data属性的值是填在花括号内的，如果有需要动态绑定数据的话就可以用到 data 属性。有三种方式。

• 第一种，直接将数据在标签使用时绑定
• 第二种，在 js 文件中写入数据将数据通过 wx:for 的item获取打印
• 第三种，第三种和第二中差不多，这个 …item 的意思是通过 wx:for 获取到数据时将全部数据解包，假设数据有

data:{
    messa:[{content:'数据 1',name:'名字 1'},
        {content:'数据 2',name:'名字 2'},
        ....
    ]
}

那么如果解包的话就是 {{…item}} => {{content:’ 数据 1 ′,name:’ 名字 1 ′}},{{content:’ 数据 2 ′,name:’ 名字 2 ′}}，使用这个要注意 js 文件内的属性名要和模板数据的名字一样，不然解包出来也绑定不了。

范例模板内容：

<template name="message">
<view class="message_group">
<text class="content">{{content}}</text>
<text class="name">{{name}}</text>
</view>
</template>

例子 1 ：<template is="message" data="{{content:' 今天想吃牛扒 ',name:' 新垣结衣 '}}"></template>

例子 2：

在 js 文件中：data:{
    messa:[{content:'今天想吃意大利面',name:'新垣结衣'}
    ]
}

<template is="message" data="{{content:item.content,name:item.name}}" wx:for="{{messa}}"></template>

例子 3 ：<template is="message" data="{{...item}}" wx:for="{{messa}}"></template>

---

include 代码拷贝

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

例子：

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

header.wxml 部分：<text>banana，nananana</text>

footer.wxml 部分：<text>durian</text>

---

阻止事件冒泡

将 bind 换成 catch 即可

​