微信小程式從入門到放棄 Num.1

Jacket_7O發表於2018-12-26
微信小程式

微信小程式從入門到放棄 Num.1

寫在前面

每一種事物都有它被髮明時，都會有其用處和目的，每一個事物都是自己擅長和適合的領域     

開發者工具

常用標籤

view:  小程式提供view供開發者使用,類似於Html中的div 

block: 並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。 

text:  行內元素標籤,類似於 span 

專案結構

 pages         --- 頁面存放   
 |     
 app.js        ---全域性的JS 可設定變數供全域性使用,   一進入小程式會觸發onLaunch生命週期  
 |
 app.json      ---pages:[存放頁面路由],window:頂部導航的顏色、文字,tabBar:底部導航欄設定,navigateToMiniProgramAppIdList:[要跳轉的小程式的appID]  
 |
 app.wxss      ---全域性樣式複製程式碼

編碼

建立頁面 在app.json中的pages陣列 新增 home(自定義)

 "pages":["pages/home/home"]  
複製程式碼
多個頁面以逗號隔開

 "pages":["pages/home/home","pages/login/login"]  
複製程式碼
 wxml 編寫html

<view class='hello'>hello 微信小程式</view> 複製程式碼
 wxss編寫css

.hello{color: lime;}複製程式碼
json配置頁面標題

 {"navigationBarTitleText": "選擇班級"}複製程式碼

生命週期及方法

Page(
{  data: {    text: "This is page data."  },  
onLoad: function(options) {    // Do some initialize when page load.  },  
onReady: function() {    // Do something when page ready.  },  
onShow: function() {    // Do something when page show.  },  
onHide: function() {    // Do something when page hide.  },  
onUnload: function() {    // Do something when page close.  },  
onPullDownRefresh: function() {    // Do something when pull down  },  // Event handler.  
viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    })  }
複製程式碼

在頁面中使用 

<view class='hello' bindtap="viewTap" >hello {{text}}</view> 複製程式碼

邏輯表示式(以下內容來自W3C)

wx:for複製程式碼
//在元件上使用 wx:for 控制屬性繫結一個陣列，即可使用陣列中各項的資料重複渲染該元件。//預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item。//如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//使用 wx:for-item 可以指定陣列當前元素的變數名，使用 wx:for-index 可以指定陣列當前下標的變數名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>複製程式碼

wx:if複製程式碼

//在框架中，我們用wx:if="{{condition}}"來判斷是否需要渲染該程式碼塊：
Page({
  data: {
    condition:true
  }
})
<view wx:if="{{condition}}"> True </view>

//也可以用wx:elif和wx:else來新增一個else塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>//因為wx:if之中的模板也可能包含資料繫結，所以當wx:if的條件值切換時，框架有一個區域性渲染的過程，因為它會確保條件塊在切換時銷燬或重新渲染。//同時wx:if也是惰性的，如果在初始渲染條件為false，框架什麼也不做，在條件第一次變成真的時候才開始區域性渲染。//相比之下，hidden就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。//一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在執行時條件不大可能改變則wx:if較好。複製程式碼

事件

事件分為冒泡事件和非冒泡事件冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。複製程式碼
型別觸發條件
touchstart手指觸控動作開始
touchmove手指觸控後移動
touchcancel手指觸控動作被打斷，如來電提醒，彈窗
touchend手指觸控動作結束
tap手指觸控後馬上離開
longtap手指觸控後，超過350ms再離開

//使用
<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>複製程式碼

Demo練習

此時的你已經掌握了構建頁面的能力  那麼我們來寫一個demo吧

場景 Tab切換框 點選其中一項 當前項背景顏色改變

第一步編寫wxml

    <view class="info-choose">
       <view bindtap="chooselog" 
             wx:for="{{array}}"
             wx:key="{{index}}" 
             data-select="{{item.id}}"
             class="{{item.id==choice?"check":""}}">
             {{item.name}}
       </view>
    </view> 複製程式碼

第二步編寫js

 Page({
    data: {
        array:[
          { "name": "Jaket",
            "id":1          
          },
          {
            "name": "夾克",
            "id": 2
          },
          {
            "name": "夾克哥哥",
            "id": 3
          },
          {
            "name": "夾克特",
            "id": 4
          },  

        ],
        choice:0,//判斷是否選中
    },

    chooselog:function(data){
      var that=this;
      that.setData({//把選中值放入判斷值
        choice : data.currentTarget.dataset.id
      })
    }
})複製程式碼

第三步編寫wxss

.info-choose view{
    width:130rpx;
    height:130rpx;
    border:1rpx solid #ccc;
}
.info-choose.check{
    background:lime;
}複製程式碼

下期預告

1、template模板的使用

2、微信API的使用

3、微信元件 tabBar的使用

4.Demo checkbox複選


相關文章