.NET開發微信小程序-Template模塊開發
阿新 • • 發佈:2017-08-21
pan brush .get back over 函數 scrip div ont
1.添加一個文件目錄,裏面放模板信息
例:我在根目錄添加一個文件夾:template
然後在這個文件夾下面添加相應的頁面。比如我添加一個promodel.wxml文件。主要是放商品相關的模塊信息(註:模板文件也是用的.wxml)
<template name="proname"> <view class="myTempleta"> {{data.title}} </view>> </template>>
註意:name;這個name是其它頁面調用這個模板的重要信息。相當於這個模板的key值。裏面的內容為value值
然後給這個模板添加一些樣式。直接添加promodel.wxss文件
.myTempleta { font-size: 2rem; }
到這步時。模板就已經添加完成了。接下來就是調用相關的模板;
以剛剛創建小程序時的首頁為例:
<!--index.wxml--> <!-- 引用模板文件 --> <import src="../template/promodel.wxml"/> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> <!-- 通過is調用到模板裏面的內容 --> <view class="usermotto"> <template is="proname" data="{{data}}"></template>> </view> </view>
先在頁面引用模板文件。然後把模板需要放的位置。直接通過<template is=“模板名稱“ ></template>來調 用;
接下來引用 這個模板的樣式
/* 引用模板樣式 */ @import "../template/promodel.wxss"; /**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }
這時。模板的引用就已經完成了。接下來、就是給模板綁定相應的數據了。給模板綁定數據需要在調用模板時。 <template is=“模板名稱“ data="模板數據" /></template>這樣來調用以及綁定數據。
//index.js //獲取應用實例 var app = getApp() Page({ data: { motto: ‘Hello World‘, userInfo: {}, data:{‘title‘:‘我的模板‘}//給模板的數據 }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: ‘../logs/logs‘ }) }, onLoad: function () { console.log(‘onLoad‘) var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) } })
在這裏。可能就要回頭看一下。數據的傳遞;
我先在index.js的data放了一個data對象、裏面的數據為:{title:‘我是模板‘}
然後將該data綁定到調用模板的地方
<template is="proname" data="{{data}}"></template>>
然後模板那邊直接在模板裏面獲取數據:
{{data.title}}
.NET開發微信小程序-Template模塊開發