日常練習微信小程序，及常用的知識點、模版使用的規則及注意事項
特別注意：微信小程序中的hidden屬性、display樣式實現隱藏屬性，下面的代碼中也有舉例使用。二者都能實現view隱藏。
經過練習例子驗證，及查看網上一些大牛的帖子後，自己簡單總結如下：
使用display:none控制顯隱 並且可由js來動態控制，效果較好，hidden 隱藏佈局，雖然隱藏了，但還是會佔空間，display:none 隱藏不佔據空間。
wx:if與hidden、display的區別:hidden雖然隱藏了視圖組件，但組件仍然會渲染；display:none與hidden=true的效果是一樣的，display:none仍然會渲染組件，而 wx:if只有在條件變成真的時候纔開始局部渲染，如果條件爲假，整個view塊不是隱藏起來，而是根本沒有生成。而hidden、display，只是使view塊隱藏，但view塊真實存在。
效果 圖：
wxml代碼如下：
<view class="container">
<view class="test">數據綁定-練習</view>
<view>{{mesg}}</view>
<view class="event1" bindtap="event_test1">點擊了{{count2}}次</view>
<view class="event2" bindtap="event_test2">點擊了{{count1}}次</view>
<!--定義模版，模版不會顯示出來，只會顯示模版裏的內容-->
<view class="test">模版-練習</view>
<template name="demo_template">
<view>姓名：{{name}} 年齡：{{age}}</view>
</template>
<!--使用模版，is表示使用的模版名稱，data表示數據的來源，（數據在js裏）-->
<!-- <template is="demo_template" data="...zhangshan"></template>中的data引入數據的格式錯誤-->
<template is="demo_template" data="{{...zhangshan}}"></template>
<template is="demo_template" data="{{...lisi}}"></template>
<!--列表渲染-->
<view class="test">列表渲染-練習</view>
<view wx:for="{{array}}">{{item}}</view>
<!--注意，格式容易出錯，記住for後面的寫法，item的寫法，如何把列表內的元素輸出-->
<!--條件渲染,記住條件渲染的格式-->
<view class="test">條件渲染-練習</view>
<view wx:if="{{view_if=='1'}}">傑</view> <!--比較時，判斷相等用“==”兩個等於-->
<view wx:elif="{{view_if=='2'}}">偉</view><!--在wxml文件中，字符串用單引號括起來，雙引號會報錯-->
<view wx:else="{{view_if=='3'}}">王激動</view>
<!--條件渲染例2,把條件判斷放在block快中，一個條件可以控制多個view顯示或都不顯示-->
<block wx:if="{{continue=='你'}}">
<view>條件渲染例2</view>
<view class="test2">{{continue+'好，我是機器人！'}}</view>
<!--此處字符串用單引號或雙引號都可以，加號表示字符串連接，continue是個字符串變量，在js中定義的-->
<view class="test2">{{continue+"、我、他，大家都快樂！"}}</view>
</block>
<!--view內容顯示與否，hidden(true/false)/display:(none/block)-->
<!--兩種方法，都可易實現相同的效果,但hidden在賦值時，只能用邏輯值，不能用表達式和邏輯變量-->
<view class="test2" hidden="{{true}}">hidden/display:none練習1</view>
<view class="test2" hidden="{{flag}}">hidden/display:none練習2</view><!-該View無法正常顯示-->
<!--flag是邏輯變量，雖然值爲true,但還是無法顯示-->
<view class="test2" style="display:none">hidden(true/false)/display:(none/block)練習3</view><!-正常隱藏-->
<view class="test2" style="display:block">hidden(true/false)/display:(none/block)練習4</view>
<view class="test2" style="display:{{flag2}}">hidden(true/false)/display:(none/block)練習5</view><!--通過js動態傳參控制-->
<view class="test">運算例子-練習</view>
<!--三目運算符-->
<view hidden="{{flag ? true : false}}">三目運算符練習</view><!--hidden不能用這種-->
<view wx:if="{{flag ? true : false}}">三目運算符練習</view>
<!--{{}}雙層大括號內可以進行算術運算-->
<view class="test2">雙層大括號內可以進行算術運算，如下：</view>
<view class="test2"> {{aa}}+{{bb}}={{aa+bb}}</view>
<view class="test2">雙層大括號內可以字符串連接,如下：</view>
<view class="test2">{{continue+'好，我是機器人！'}}</view>
</view> js代碼如下：
var parm={
data : {
mesg : '你好',
count1 : 0,
count2:0,
array:[0,1,2,3,4,'hello'],
/*下面是模版需使用的數據，注意記住格式*/
zhangshan :{ name:'張三', age:'17' },//變量之間有逗號
lisi :{ name: '李四', age:20},
/*條件渲染-條件*/
view_if:"2",//js中字符串用單引號括起來，也可以用雙引號括起來
continue:'你',
flag:'true',//在初始化邏輯值時加單引號或雙引號，或不加都可以
flag2:'block',
aa:6,
bb:3,
cc:9,
},
/*下面是數據綁定代碼*/
event_test1: function (e) { /*event_test1與event_test2效果等價，是兩種方法實現數據刷新*/
this.data.count2++;
var count = this.data.count2;
parm.data.count2=count;
this.setData({count2 : count});
console.log(e);
},
event_test2 : function(e){
parm.data.count1=this.data.count1+1;
/*注意下面出錯的寫法，以後避免出現*/
// this.setData(count);出錯
// this.setData({count});出錯
//this.setData(parm.data.count);出錯
//this.setData(this.data);//不出錯，數據沒有更新
this.setData(parm.data);
console.log(e);
}
/*下面是模版要用到的數據，需寫在data裏面*/
/*
zhangshan ： {
name:'張三', age :'17'//變量之間有逗號
}
lisi :{
name:'李四',age:20
}
*/
};
Page(parm);wxss代碼如下：
/**index.wxss**/
.event1{
background-color: lightgreen;
}
.event2{
background-color: pink;
}
.test{
background-color :aqua;
color: red;
font-size: 70rpx;
}
.test2{
background-color: blue;
color:yellow;
font-size: 14px;
}