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


Posted in Javascript onFebruary 21, 2017

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

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

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

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

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

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

先放出效果图(数据来自聚合数据)

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

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

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

在我们上面的代码中,除了使用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; }

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

Javascript 相关文章推荐
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
react组件基本用法示例小结
Apr 27 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
jupyter notebook实现显示行号
2020/04/13 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
美术专业个人自我评价
2014/01/18 职场文书
党员组织关系介绍信
2014/02/13 职场文书
房产公证书范本
2014/04/10 职场文书
竞聘上岗演讲
2014/05/19 职场文书
代办出身证明书
2014/10/21 职场文书
2015年领班工作总结
2015/04/29 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015最新民情日记范文
2015/06/26 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
人民币使用说明书
2019/04/17 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Django显示可视化图表的实践
2021/05/10 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers