微信小程序開發之模板

1、簡介

WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。

定義模板

使用name屬性，做爲模板的名字。而後在<template/>內定義代碼片斷，如：

<!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> 

使用模板

使用 is 屬性，聲明須要的使用的模板，而後將模板所須要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/> 

Page({
  data: {
    item: {
      index: 0, msg: 'this is a template', time: '2016-09-15' } } }) 

is 屬性可使用 Mustache 語法，來動態決定具體須要渲染哪一個模板：

<template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block> 

模板的做用域

模板擁有本身的做用域，只能使用data傳入的數據。

 

2、封裝消息模板

1.功能需求

    　小程序的wx.showToast接口只提供了兩種icon【success和loading】展現形式，

　　那假如我想要的是不要圖標只要存粹的文字提醒呢？或者是我不要微信單方面提供的那種圖片呢？想要本身指定的狀況呢？這時候要怎麼辦..

       根據wx.showToast接口提供的參數，實現一下消息提醒模板

一、若是沒有指定icon圖標地址，那麼就是單純的顯示文字提示，不然就是圖標+文字的模式，這時候就要確保icon指向的圖片地址是正確的啦。

二、若是沒有指定duration提示的延遲時間，默認是1.5s，而我設置的最大值10s是不會自動隱藏消息提示的，除非手動hideToast. 單位：毫秒

三、若是沒有指定mask遮罩，默認是跟着顯示的，防止觸摸穿透

四、若是沒有指定cb回調函數，默認直接顯示消息提醒，不然能夠在等消息提示結束後即刻處理一些其餘業務：例如地址跳轉，改變訂單狀態等等

2.模板代碼

代碼文件結構

images
    |--msg_info.png
pages
    |--index
        |--index.wxml 
        |--index.wxss 
        |--index.js 
template
    |--showToast.wxml 
    |--showToast.wxss
utils
    |--showToast.js

showToast.wxml代碼

注：name可自定義，通過測試，它能夠和文件名不一樣

<template name="showToast">
  <block wx:if="{{showToast.isShow? showToast.isShow: false}}">
    <view class="toast-bg" wx:if="{{showToast.mask==false? false : true}}"></view>
    <view class="toast-center">
      <view class="toast">
        <image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
        <text class="toast-text">{{showToast.title}}</text>
      </view>
    </view>
  </block>
</template>

showToast.wxss

注：它並不會自動引用，

能夠在index.wxss的頭部加入 @import "../../template/showToast.wxss"; 

也能夠直接寫在app.wxss中

/*showToast*/
.toast-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
}
/*水平居中必備樣式*/
.toast-center {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
}
.toast {
  display: inline-block;
  padding: 20rpx 40rpx;
  max-width: 600rpx;
  font-size: 28rpx;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 10rpx;
  text-align: center;
}
/*垂直居中必備樣式*/
.toast-center::after{
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.toast .toast-icon {
  display: block;
  margin: 0 auto 10rpx auto;
  width: 50rpx;
  height: 50rpx;
}

showToast.js

/*
顯示toast提示
title:    提示的內容 必填
icon:     圖標，//請指定正確的路徑，選填
duration: 提示的延遲時間，單位毫秒，默認：1500, 10000永遠存在除非手動清除 選填
mask:     是否顯示透明蒙層，防止觸摸穿透，默認：true 選填
cb:       接口調用成功的回調函數 選填
 */
function showToast(obj) {
    if (typeof obj == 'object' && obj.title) {
        if (!obj.duration || typeof obj.duration != 'number') { obj.duration = 1500; }//默認1.5s後消失
        if(obj.icon=='info'){obj.icon = '/images/msg_info.png';}
        else if(obj.icon=='error'){obj.icon = '/images/msg_error.png';}
        var that = getCurrentPages()[getCurrentPages().length - 1];//獲取當前page實例
        obj.isShow = true;//開啓toast
        if (obj.duration < 10000) {
            setTimeout(function () {
                obj.isShow = false;
                obj.cb && typeof obj.cb == 'function' && obj.cb();//若是有成功的回調則執行
                that.setData({
                    'showToast.isShow': obj.isShow
                });
            }, obj.duration);
        }
        that.setData({
            showToast: obj
        });
    } else if (typeof obj == 'string') {
        var that = getCurrentPages()[getCurrentPages().length - 1];//獲取當前page實例
        var objData = { title: obj, duration: 1000, isShow: true };
        setTimeout(function () {
            objData.isShow = false;
            that.setData({
                showToast: objData
            });
        }, objData.duration);
        that.setData({
            showToast: objData
        });
    } else {
        console.log('showToast fail:請確保傳入的是對象而且title必填');
    }
}
/**
 *手動關閉toast提示
 */
function hideToast() {
    var that = getCurrentPages()[getCurrentPages().length - 1];//獲取當前page實例
    if (that.data.showToast) {
        that.setData({
            'showToast.isShow': false
        });
    }
}
module.exports = {
    showToast: showToast,
    hideToast: hideToast
}

 

3.模板的引用

這裏將在index頁面進行測試

index.wxml

<import src="../../template/showToast.wxml" />
<template is="showToast" data="{{showToast: showToast}}" />
<!--上面兩句話是放置模板的路徑和傳入的data！   data傳入方式寫死固定-->
<view bindtap="testToast" data-test="1">只傳title，單純文字提醒</view>
<view bindtap="testToast" data-test="2">指定圖標，圖標+文字提醒</view>
<view bindtap="testToast" data-test="3">指定duration，控制toast 3s消失</view>
<view bindtap="testToast" data-test="31">指定duration=10s，手動2s後關閉toast</view>
<view bindtap="testToast" data-test="4">指定mask，控制toast遮罩</view>
<view bindtap="testToast" data-test="5">指定cb， 控制回調處理業務</view>

index.js

var feedbackApi=require('../../common/showToast');//引入消息提醒暴露的接口
Page({  
  .....//其餘省略
  testToast: function(e){
    var test=e.target.dataset.test;
    if(test==1){
      feedbackApi.showToast({title: 'test shoToast title'})//調用
    }
    if(test==2){
      feedbackApi.showToast({
        title: 'test shoToast title',
        icon: '/images/msg_info.png'
        })
    }
    if(test==3){
      feedbackApi.showToast({
        title: 'test shoToast title',
        duration: 3000        
        })
    }
    if(test==31){
      feedbackApi.showToast({
        title: 'test shoToast title',
        duration: 10000        
        })
        setTimeout(function(){
          feedbackApi.hideToast();
        }, 2000)
    }
    if(test==4){
      feedbackApi.showToast({
        title: 'test shoToast title',
        mask: false
        })
    }
    if(test==5){
      feedbackApi.showToast({
        title: 'test shoToast title',
        cb: function(){
          console.log('回調進來了，能夠制定業務啦')
        }
        })
    }
  }
})  

 其餘用法

//擴展一
feedbackApi.showToast('test'); 
//擴展二
feedbackApi.showToast({
　　title: 'test shoToast title',
　　icon:'info' //'error'
});

 

 

參考：http://blog.csdn.net/eadio/article/details/54616595

 

歡迎閱讀本系列文章：微信小程序開發教程目錄