微信小程序 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 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
javascript学习小结之prototype
Dec 03 Javascript
JavaScript构造函数详解
Dec 27 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
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缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP常用的小程序代码段
2015/11/14 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
详解python分布式进程
2018/10/08 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python实现远程控制电脑
2019/05/23 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python中base64与xml取值结合问题
2019/12/22 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
公司前台辞职报告
2014/01/19 职场文书
取保候审保证书
2014/04/30 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书