微信小程序 template模板详解及实例

微信小程序 template模板详解及实例

首先看一些官方的一些介绍。

模板：模板功能是通过对template 标签的属性 name=”” 去创建不同模板，通过is=”name的值”来使用。

通过上面两张图，大概能看出，使用模板可以为大量类似的布局带来便利。下面看一下我自己的一个Demo.

先放出效果图（数据来自聚合数据）

可以看到，除了选项个数的差别之外，其他布局是相同的。

下面的每一道题的模板。

rush:js;">

在我们上面的代码中，除了使用template标签定义模板外，还是用了条件渲染。例如当题目为判断题的时候。CD选项是没有数据的，所以就不能显示出来，我们可以通过if语句判断是否为空来决定显示与否。

下面放出代码。

CarUtils.js

rush: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,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

rush:xml;">

选择界面 drivercar.js

rush:java;"> Page({ data:{ subject: [ {name: '1',value: '科目一',checked: 'true'},{name: '4',value: '科目四'},],model: [ {name: 'c1',value: 'c1',{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条）',{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

rush:js;"> dio"> 请选择考试类型： dio-group class="radio-group" bindchange="subjectChange"> dio" wx:for="{{subject}}" wx:key="subject"> dio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} dio"> 请选择驾照类型： dio" wx:for="{{model}}" wx:key="model"> dio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} dio"> 请选择模式： dio" wx:for="{{testType}}" wx:key="testType"> dio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}

选择界面drivercar.wxss

rush:js;"> .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

rush: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

rush:js;">