微信小程序 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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
动态加载js、css的实例代码
May 26 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
iView框架问题整理小结
Oct 16 Javascript
a标签调用js的方法总结
Sep 05 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php简单复制文件的方法
2016/05/09 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
说说node中的可读流和可写流的区别
2018/06/01 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
python文件的md5加密方法
2016/04/06 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
浅谈Python中函数的参数传递
2016/06/21 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python if语句知识点用法总结
2018/06/10 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
什么是python的列表推导式
2020/05/26 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
养殖人员的创业计划书范文
2013/12/26 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
物控部经理职务说明书
2014/02/25 职场文书
四则混合运算教学反思
2016/02/23 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python