Introduction to WeChat Mini Program Template-Mini Program Development-php.cn

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

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

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

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

先放出效果图（数据来自聚合数据）

可以看到，除了选项个数的差别之外，其他布局是相同的。

下面的每一道题的模板。

&lt;template name="carItem">
 &lt;view class="timu">
  &lt;view class="title">第pw_item.id题&lt;/view>
  &lt;view class=&#39;question&#39;>pw_item.question&lt;/view>
  &lt;view class="img" wx:if="pw_item.url!=&#39;&#39;">&lt;image src="pw_item.url" />&lt;/view>
  &lt;view class=&#39;select&#39;>A：pw_item.item1&lt;/view>
  &lt;view class=&#39;select&#39;>B：pw_item.item2&lt;/view>
  &lt;view class=&#39;select&#39; wx:if="pw_item.item3!=&#39;&#39;">C:pw_item.item3&lt;/view>
  &lt;view class=&#39;select&#39; wx:if="pw_item.item4!=&#39;&#39;">D:pw_item.item4&lt;/view>
  &lt;view class=&#39;content&#39;>答案:pw_item.answer&lt;/view>
  &lt;view class=&#39;content&#39;>解释:pw_item.explains&lt;/view>
 &lt;/view>
&lt;/template>

Copy after login

在我们上面的代码中，除了使用template标签定义模板外，还是用了条件渲染。例如当题目为判断题的时候。CD选项是没有数据的，所以就不能显示出来，我们可以通过if语句判断是否为空来决定显示与否。

下面放出代码。

CarUtils.js

/**
 * 网络请求
 */
function request(url, subject, model, testType, success, fail) {
  if (typeof success != &#39;function&#39; || typeof fail != &#39;function&#39;) {
    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: &#39;提示&#39;,
          content: &#39;res.data.reason&#39;+&#39;请重新选择&#39;,
          success: function (res) {
            if (res.confirm) {
              console.log(&#39;用户点击确定&#39;)
            }
          }
        })
        console.log("失败原因" + res.data.reason)
        fail(res.data.reason)
      }
    },
    fail: function () {
      fail(&#39;网络出现问题&#39;)
    },
  })
}
function getanswer(url,success,fail){
   if( typeof success != &#39;function&#39; || typeof fail != &#39;function&#39; ) {
  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( &#39;网络出现问题&#39; )
    },
   })
}
module.exports = {
  request: request,
  getanswer:getanswer
}

Copy after login

template.wxml

&lt;template name="carItem">
 &lt;view class="timu">
  &lt;view class="title">第pw_item.id题&lt;/view>
  &lt;view class=&#39;question&#39;>pw_item.question&lt;/view>
  &lt;view class="img" wx:if="pw_item.url!=&#39;&#39;">&lt;image src="pw_item.url" />&lt;/view>
  &lt;view class=&#39;select&#39;>A：pw_item.item1&lt;/view>
  &lt;view class=&#39;select&#39;>B：pw_item.item2&lt;/view>
  &lt;view class=&#39;select&#39; wx:if="pw_item.item3!=&#39;&#39;">C:pw_item.item3&lt;/view>
  &lt;view class=&#39;select&#39; wx:if="pw_item.item4!=&#39;&#39;">D:pw_item.item4&lt;/view>
  &lt;view class=&#39;content&#39;>答案:pw_item.answer&lt;/view>
  &lt;view class=&#39;content&#39;>解释:pw_item.explains&lt;/view>
 &lt;/view>
&lt;/template>

Copy after login

选择界面 drivercar.js

Page({
 data:{
  subject: [
   {name: &#39;1&#39;, value: &#39;科目一&#39;,checked: &#39;true&#39;},
   {name: &#39;4&#39;, value: &#39;科目四&#39;},


  ],
  model: [
   {name: &#39;c1&#39;, value: &#39;c1&#39;,checked: &#39;true&#39;},
   {name: &#39;c2&#39;, value: &#39;c2&#39;},
   {name: &#39;a1&#39;, value: &#39;a1&#39;},
   {name: &#39;a2&#39;, value: &#39;a2&#39;},
   {name: &#39;b1&#39;, value: &#39;b1&#39;},
   {name: &#39;b2&#39;, value: &#39;b2&#39;},


  ],
  testType: [
   {name: &#39;rand&#39;, value: &#39;随机（100条）&#39;,checked: &#39;true&#39;},
   {name: &#39;order&#39;, value: &#39;全部（全部）&#39;},
  ],




 },
 onLoad:function(options){
 var that = this;
  that.setData({
   subject1:"1",
   model1:"c1",
   testType1:"rand"
  })
 },
 confirm(){
  var that=this;
   wx.navigateTo({
   url: &#39;detail/detail?subject=&#39;+that.data.subject1+&#39;&model=&#39;+that.data.model1+&#39;&testType=&#39;+that.data.testType1,
  });
 },
  confirm1(){
  var that=this;
   wx.navigateTo({
   url: &#39;detail_1/detail_1?subject=&#39;+that.data.subject1+&#39;&model=&#39;+that.data.model1+&#39;&testType=&#39;+that.data.testType1,
  });
 },
 //科目类型
 subjectChange(e){ 
  var that = this;
  console.log(&#39;科目类型：&#39;+e.detail.value);
  that.setData({
   subject1:e.detail.value,


  })
 } ,
  //驾照类型
  modelChange(e){
  var that = this;
  console.log(&#39;驾照类型：&#39;+e.detail.value);
  that.setData({
   model1:e.detail.value,
  })
 } ,
 //测试类型
  testTypeChange(e){
   var that = this;
  console.log(&#39;测试类型：&#39;+e.detail.value);
  that.setData({
   testType1:e.detail.value,
  })
 } ,


})

Copy after login

选择界面drivercar.wxml

&lt;view class="container">
&lt;!--radio-->
 &lt;view class="radio">
 &lt;text>请选择考试类型：&lt;/text>
  &lt;radio-group class="radio-group" bindchange="subjectChange">
    &lt;label class="radio" wx:for="pw_subject" wx:key="subject">
      &lt;radio value="pw_item.name" checked="pw_item.checked"/>pw_item.value
   &lt;/label>
  &lt;/radio-group>
 &lt;/view>
 &lt;view class="radio">
 &lt;text>请选择驾照类型：&lt;/text>
  &lt;radio-group class="radio-group" bindchange="modelChange" >
     &lt;label class="radio" wx:for="pw_model" wx:key="model">
        &lt;radio value="pw_item.name" checked="pw_item.checked"/>pw_item.value
     &lt;/label>
   &lt;/radio-group>
 &lt;/view>
 &lt;view class="radio">
 &lt;text>请选择模式：&lt;/text>
  &lt;radio-group class="radio-group" bindchange="testTypeChange" >
     &lt;label class="radio" wx:for="pw_testType" wx:key="testType">
        &lt;radio value="pw_item.name" checked="pw_item.checked"/>pw_item.value
     &lt;/label>
   &lt;/radio-group>
 &lt;/view>
  &lt;!--button-->
  &lt;text class="nav" bindtap="confirm">确定选择&lt;/text>
&lt;/view>

Copy after login

选择界面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%;


}

Copy after login

题目界面detail.js

var util = require(&#39;../../../../Utils/CarUtils.js&#39;)
var url = &#39;http://api2.juheapi.com/jztk/query&#39;
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 &lt; mTimuLIs.length; i++) {


        //console.log(that.data.ResList.result[1]);
        var y= parseInt(mTimuLIs

Copy after login

题目界面 detail.wxml

&lt;import src="../../../../common/templet.wxml"/>
&lt;scroll-view scroll-y="true" class="page-body" >
   &lt;template is="carItem" data="pw_item" wx:for="pw_mTimuLIs" wx:key="TimuList"/>
&lt;/scroll-view>
&lt;loading hidden="pw_loadingHide">
  加载中...
&lt;/loading>

Copy after login

全局样式 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; }

Copy after login

The above is the detailed content of Introduction to WeChat Mini Program Template. For more information, please follow other related articles on the PHP Chinese website!