Heim > Artikel > WeChat-Applet > Einführung in die WeChat Mini-Programmvorlage
微信小程序 template模板详解及实例
首先看一些官方的一些介绍。
模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。
通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利。下面看一下我自己的一个Demo.
先放出效果图(数据来自聚合数据)
可以看到,除了选项个数的差别之外,其他布局是相同的。
下面的每一道题的模板。
<template name="carItem"> <view class="timu"> <view class="title">第pw_item.id题</view> <view class='question'>pw_item.question</view> <view class="img" wx:if="pw_item.url!=''"><image src="pw_item.url" /></view> <view class='select'>A:pw_item.item1</view> <view class='select'>B:pw_item.item2</view> <view class='select' wx:if="pw_item.item3!=''">C:pw_item.item3</view> <view class='select' wx:if="pw_item.item4!=''">D:pw_item.item4</view> <view class='content'>答案:pw_item.answer</view> <view class='content'>解释:pw_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">第pw_item.id题</view> <view class='question'>pw_item.question</view> <view class="img" wx:if="pw_item.url!=''"><image src="pw_item.url" /></view> <view class='select'>A:pw_item.item1</view> <view class='select'>B:pw_item.item2</view> <view class='select' wx:if="pw_item.item3!=''">C:pw_item.item3</view> <view class='select' wx:if="pw_item.item4!=''">D:pw_item.item4</view> <view class='content'>答案:pw_item.answer</view> <view class='content'>解释:pw_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="pw_subject" wx:key="subject"> <radio value="pw_item.name" checked="pw_item.checked"/>pw_item.value </label> </radio-group> </view> <view class="radio"> <text>请选择驾照类型:</text> <radio-group class="radio-group" bindchange="modelChange" > <label class="radio" wx:for="pw_model" wx:key="model"> <radio value="pw_item.name" checked="pw_item.checked"/>pw_item.value </label> </radio-group> </view> <view class="radio"> <text>请选择模式:</text> <radio-group class="radio-group" bindchange="testTypeChange" > <label class="radio" wx:for="pw_testType" wx:key="testType"> <radio value="pw_item.name" checked="pw_item.checked"/>pw_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
题目界面 detail.wxml
<import src="../../../../common/templet.wxml"/> <scroll-view scroll-y="true" class="page-body" > <template is="carItem" data="pw_item" wx:for="pw_mTimuLIs" wx:key="TimuList"/> </scroll-view> <loading hidden="pw_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; }
Das obige ist der detaillierte Inhalt vonEinführung in die WeChat Mini-Programmvorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!