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

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

/** * 网络请求 */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 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>

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,  }) } ,})

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

.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%;}

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        })      })  },})

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

.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; }