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

微信小程序 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; }

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # template模板  # template模板详解及实例  # 小程序  # template  # 微信小程序template模板与component组件的区别和使用详解  # 微信小程序template模版的使用方法  # 微信小程序模板（template）使用详解  # 微信小程序实现给嵌套template模板传递数据的方式总结  # 微信小程序视图template模板引用的实例详解  # 详解微信小程序 template添加绑定事件  # 微信小程序 template模板详解及实例代码  # 微信小程序template模板引入的问题小结  # 请选择  # 自己的  # 我们可以  # 用了  # 希望能  # 可以看到  # 就不能  # 看一下  # 两张  # 谢谢大家  # 为大  # 为空  # 判断是否  # 判断题  # 加载中  # Page  # true  # java  # checked  # drivercar 

相关文章： 可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  建站之星官网登录失败？如何快速解决？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  网站制作模板下载什么软件,ppt模板免费下载网站？  C++时间戳转换成日期时间的步骤和示例代码  如何用美橙互联一键搭建多站合一网站？  如何用AWS免费套餐快速搭建高效网站？  南京网站制作费用,南京远驱官方网站？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  如何选择美橙互联多站合一建站方案？  江苏网站制作公司有哪些,江苏书法考级官方网站？  重庆市网站制作公司,重庆招聘网站哪个好？  中山网站制作网页,中山新生登记系统登记流程？  如何选择PHP开源工具快速搭建网站？  香港服务器部署网站为何提示未备案？  网站制作需要会哪些技术,建立一个网站要花费多少？  如何在腾讯云免费申请建站？  长沙企业网站制作哪家好,长沙水业集团官方网站？  定制建站流程解析：需求评估与SEO优化功能开发指南  攀枝花网站建设,攀枝花营业执照网上怎么年审？  如何批量查询域名的建站时间记录？  建站之星如何实现网站加密操作？  家庭服务器如何搭建个人网站？  如何获取免费开源的自助建站系统源码？  青岛网站建设如何选择本地服务器？  深圳网站制作的公司有哪些,dido官方网站？  网站制作免费,什么网站能看正片电影？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  建站之星如何快速解决建站难题？  建站之星如何一键生成手机站？  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  如何高效配置IIS服务器搭建网站？  相册网站制作软件,图片上的网址怎么复制？  建站DNS解析失败？如何正确配置域名服务器？  广州商城建站系统开发成本与周期如何控制？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  如何零基础开发自助建站系统？完整教程解析  网站制作软件免费下载安装,有哪些免费下载的软件网站？  建站主机SSH密钥生成步骤及常见问题解答？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  c# Task.ConfigureAwait(true) 在什么场景下是必须的  建站之星安装提示数据库无法连接如何解决？  建设网站制作价格,怎样建立自己的公司网站？  建站OpenVZ教程与优化策略：配置指南与性能提升  北京专业网站制作设计师招聘,北京白云观官方网站？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  宝塔面板如何快速创建新站点？