微信小程序 template模板詳解及實例
首先看一些官方的一些介紹。
模板：模板功能是通過對template 標簽的屬性 name=”” 去創建不同模板，通過is=”name的值”來使用。
通過上面兩張圖，大概能看出，使用模板可以為大量類似的布局帶來便利。下面看一下我自己的一個Demo.
先放出效果圖（數據來自聚合數據）
可以看到，除了選項個數的差別之外，其他布局是相同的。
下面的每一道題的模板。
<template name="carItem"> <view class="timu"> <view class="title">第{{item.id}}題</view> <view class='question'>{{item.question}}</view> <view class="img" wx:if="{{item.url!=''}}"><image src="{{item.url}}" /></view> <view class='select'>A：{{item.item1}}</view> <view class='select'>B：{{item.item2}}</view> <view class='select' wx:if="{{item.item3!=''}}">C:{{item.item3}}</view> <view class='select' wx:if="{{item.item4!=''}}">D:{{item.item4}}</view> <view class='content'>答案:{{item.answer}}</view> <view class='content'>解釋:{{item.explains}}</view> </view></template>在我們上面的代碼中，除了使用template標簽定義模板外，還是用了條件渲染。例如當題目為判斷題的時候。CD選項是沒有數據的，所以就不能顯示出來，我們可以通過if語句判斷是否為空來決定顯示與否。
下面放出代碼。
CarUtils.js
/** * 網絡請求 */function request(url, subject, model, testType, success, fail) { if (typeof success != 'function' || typeof fail != 'function') { return } wx.request({ url: url, data: { key: "5f0c9315c43385f5baaa3f49b79caa8f", subject: subject, model: model, testType: testType, }, success: function (res) { if (res.data.error_code == 0) { console.log("獲取數據成功"), success(res.data) } else { wx.showModal({ title: '提示', content: 'res.data.reason'+'請重新選擇', success: function (res) { if (res.confirm) { console.log('用戶點擊確定') } } }) console.log("失敗原因" + res.data.reason) fail(res.data.reason) } }, fail: function () { fail('網絡出現問題') }, })}function getanswer(url,success,fail){ if( typeof success != 'function' || typeof fail != 'function' ) { return } wx.request({ url:url, data: { key:"0794b823b484d6e1b4186d150834ae1b", }, success: function(res){ if( res.data.error_code == 0 ) { console.log("獲取數據成功"), success( res.data ) } else { console.log("失敗原因"+res.data.reason) fail( res.data.reason ) } }, fail: function() { fail( '網絡出現問題' ) }, })}module.exports = { request: request, getanswer:getanswer}template.wxml
<template name="carItem"> <view class="timu"> <view class="title">第{{item.id}}題</view> <view class='question'>{{item.question}}</view> <view class="img" wx:if="{{item.url!=''}}"><image src="{{item.url}}" /></view> <view class='select'>A：{{item.item1}}</view> <view class='select'>B：{{item.item2}}</view> <view class='select' wx:if="{{item.item3!=''}}">C:{{item.item3}}</view> <view class='select' wx:if="{{item.item4!=''}}">D:{{item.item4}}</view> <view class='content'>答案:{{item.answer}}</view> <view class='content'>解釋:{{item.explains}}</view> </view></template>選擇界面 drivercar.js
Page({ data:{ subject: [ {name: '1', value: '科目一',checked: 'true'}, {name: '4', value: '科目四'}, ], model: [ {name: 'c1', value: 'c1',checked: 'true'}, {name: 'c2', value: 'c2'}, {name: 'a1', value: 'a1'}, {name: 'a2', value: 'a2'}, {name: 'b1', value: 'b1'}, {name: 'b2', value: 'b2'}, ], testType: [ {name: 'rand', value: '隨機（100條）',checked: 'true'}, {name: 'order', value: '全部（全部）'}, ], }, onLoad:function(options){ var that = this; that.setData({ subject1:"1", model1:"c1", testType1:"rand" }) }, confirm(){ var that=this; wx.navigateTo({ url: 'detail/detail?subject='+that.data.subject1+'&model='+that.data.model1+'&testType='+that.data.testType1, }); }, confirm1(){ var that=this; wx.navigateTo({ url: 'detail_1/detail_1?subject='+that.data.subject1+'&model='+that.data.model1+'&testType='+that.data.testType1, }); }, //科目類型 subjectChange(e){ var that = this; console.log('科目類型：'+e.detail.value); that.setData({ subject1:e.detail.value, }) } , //駕照類型 modelChange(e){ var that = this; console.log('駕照類型：'+e.detail.value); that.setData({ model1:e.detail.value, }) } , //測試類型 testTypeChange(e){ var that = this; console.log('測試類型：'+e.detail.value); that.setData({ testType1:e.detail.value, }) } ,})選擇界面drivercar.wxml
<view class="container"><!--radio--> <view class="radio"> <text>請選擇考試類型：</text> <radio-group class="radio-group" bindchange="subjectChange"> <label class="radio" wx:for="{{subject}}" wx:key="subject"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> </view> <view class="radio"> <text>請選擇駕照類型：</text> <radio-group class="radio-group" bindchange="modelChange" > <label class="radio" wx:for="{{model}}" wx:key="model"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> </view> <view class="radio"> <text>請選擇模式：</text> <radio-group class="radio-group" bindchange="testTypeChange" > <label class="radio" wx:for="{{testType}}" wx:key="testType"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> </view> <!--button--> <text class="nav" bindtap="confirm">確定選擇</text></view>選擇界面drivercar.wxss
.radio{ margin: 20rpx;}.radio text{margin: 20rpx;}.nav { border: 1px solid #DFDFDF; border-radius: 10px; text-align: center; width: 50%; float: left; height: 60rpx; line-height: 60rpx; margin-bottom:30rpx; margin-top: 30rpx; margin-left:25%; margin-right:25%;}題目界面detail.js
var util = require('../../../../Utils/CarUtils.js')var url = 'http://api2.juheapi.com/jztk/query'var answerurl = "http://api2.juheapi.com/jztk/answers"Page({ data: { loadingHide: false, ResList: { "error_code": 0, "reason": "success", "result": { 1: "A", 2: "B", 3: "C", 4: "D", 7: "AB", 8: "AC", 9: "AD", 10: "BC", 11: "BD", 12: "CD", 13: "ABC", 14: "ABD", 15: "ACD", 16: "BCD", 17: "ABCD" } }, }, onLoad: function (options) { var that = this var z=1; var mTimuLIs={} util.request(url, options.subject, options.model, options.testType, function (dataJson) { console.log(options.model + "model"); console.log(options.testType + "testType"); console.log(options.subject + "subject"); console.log("請求成功00"); mTimuLIs=dataJson["result"]; console.log(mTimuLIs.length); for (var i = 0; i < mTimuLIs.length; i++) { //console.log(that.data.ResList.result[1]); var y= parseInt(mTimuLIs[i].answer); //console.log(y); mTimuLIs[i].answer = that.data.ResList.result[y]; mTimuLIs[i].id=parseInt(i+z); // console.log(that.data.ResList.result[y]); } that.setData({ mTimuLIs: mTimuLIs, loadingHide: true }) }, function (reason) { console.log(reason); that.setData({ loadingHide: true }) }) },})題目界面 detail.wxml
<import src="../../../../common/templet.wxml"/><scroll-view scroll-y="true" class="page-body" > <template is="carItem" data="{{item}}" wx:for="{{mTimuLIs}}" wx:key="TimuList"/></scroll-view><loading hidden="{{loadingHide}}"> 加載中...</loading>全局樣式 app.wxss
.container { height:100%; flex: 1; display: flex; flex-direction: column; box-sizing: border-box; background-size: 100%;} .item-view{ padding: 10px; display: flex; flex-direction: column; border-top: 1px solid #DEDEDE; border-left: 1px solid #DEDEDE; box-shadow: 2px 2px 2px #C7C7C7; margin: 10px; border-radius: 5px;}.item-view .content{color: black;}.item-view .date{ color: grey;margin-top: 10px;}.item-view image{width: 100%;height: 400rpx;margin-top: 10rpx;}.loading-view{display: flex;flex-direction: row; justify-content: center;align-items: center;padding: 10px;}.timu{border: 1px solid #DFDFDF;margin: 20rpx;border-radius: 10px;}.timu .title{font-size: 40rpx; }.timu .question{text-indent: 20rpx;margin-left: 10rpx; padding: 10rpx;}.timu .img{width: 100%;display:flex;flex-direction: column;align-items: center;margin: 0 auto;padding-top: 10rpx;padding-bottom: 10rpx;}.timu .content{font-size: 30rpx;padding: 10rpx;margin-left: 20rpx }.timu .select{font-size: 30rpx;margin-left: 30rpx;margin-right: 30rpx; padding: 20rpx; }感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
