微信小程序學習總結(二)——小程序綁定數據的語法、頁面數據渲染

一、小程序綁定參數的語法很經典——mustache語法

1.在微信小程序中一個頁面組成的文件有四個，例如一個頁面叫index，那麼相應在index目錄下有這麼四個文件index.wxml、index.wxss、index.js以及index.json文件，其中wxml文件以及js文件是必須的擁有的，在wxml(參照的是xml語法，不是html)文件中，說道小程序的wxss文件，裏面放置的就是類似於網頁繪製的css文件，頁面的樣式，所以小程序的頁面佈局就是在這裏，說道使用CSS3.0就說下伸縮佈局，在CSS3.0中最重要的就是flex

flex有主軸和副軸,display：flex，默認是橫軸爲主軸:flex-direction:row(橫軸是自左往右),也可使用flex-direction:column設置豎軸(方向是由上而下)爲主軸

好了，扯的有點多，迴歸正題

2.在相應的js文件中的Page中定義相應的data，並有屬性，屬性值

執行結果：

二、小程序的數據渲染

執行結果：

<!-- 
    基本的循環 wx:for
    1.明確頁面結構體中的循環體
    2.刪除多餘的重複內容，只保留一個
    3.在剩餘的加上wx:for屬性，屬性值等於要遍歷的數據源，數據源是一個數組或對象
    4.再這個標籤(循環體)內部使用item代表當前被便利的元素
    給被遍歷的對象定義名稱 wx:for-item
    給遍歷的下標(索引)定義名稱 wx:for-index
   -->
<!-- wx:if 是用來根據一個bool值來決定是否頁面渲染,hidden是否顯示隱藏 -->
  <!-- <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
      <view wx:if="{{i <= j}}">
        {{i}} * {{j}} = {{i * j}}
      </view>
    </view>
  </view> -->