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

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

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

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

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

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

下面的每一道题的模板。

{{item.question}} A：{{item.item1}} B：{{item.item2}} 答案:{{item.answer}} 解释:{{item.explains}}

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

下面放出代码。

CarUtils.js

获取数据成功"),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

{{item.question}} A：{{item.item1}} B：{{item.item2}} 答案:{{item.answer}} 解释:{{item.explains}}

选择界面 drivercar.js

随机（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

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

dio{ 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 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

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

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

猜你在找的微信小程序相关文章