微信小程序（二）

微信小程序（二）

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

​