功能封裝(創建、使用模板）（重點） · 微信小程序

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