功能封装(创建、使用模板）（重点） · 微信小程序

1.使用 template ~~~ 一个页面中封装的daima <template name="banner"> <view>banner</view> <view>banner</view> <view>banner</view> 在另一个页面中展示 </template> <import src="banner.wxml"></import> <template is="banner"></template> //<template>标签元素的原本特性，天生display:none， //除了上面<template>子元素天然隐藏外，<template>标签还有一个特性，就是位置任意性，这非常类似<script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中 //使用 is 属性，声明需要的使用的模板 ~~~ ### 2.轮播中的封装 ~~~ 思想：之前在轮播中将加载的图片等信息封装在msg中，然后在封装在js代码中的data中实现在单个页面代码和数据分离这也是mvc思想。可是其他网页要使用封装的代码时是获取不到的要将数据抽离在外面建一个data文件夹其他网页要使用直接调用 ~~~ #### 2.1 封装： ~~~ data文件夹下的 local.js var imgUrl=[ {src:"/images/banner01.png"}, {src:"/images/banner02.png"}, {src:"/images/banner03.png"}, {src:"/images/banner04.png"} ]; module.exports={ imgUrl:imgUrl }; 轮播封装的代码 banner.wxml <template name="banner"> <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="1000"> <block wx:for="{{imgUrl}}" wx:key="index"> <swiper-item> <image src="{{item.src}}"></image> </swiper-item> </block> </swiper> </template> ~~~ #### 2.2使用 ~~~ 1. js代码 var local = require("../data/local.js"); Page({ onLoad(){ this.setData({ imgUrl:local.imgUrl }) } }); 2. wxml代码 <import src="/pages/template/banner"></import> <template is="banner" data="{{imgUrl}}" ></template> //data 模板之间通过data属性来接收传递过来的参数 data="{{...imgUrl}}" 3. wxss代码 @import "/pages/template/banner" ~~~