微信小程序

小程序簡介
1 小程序與普通網頁開發的區別？
1運行環境的不同：網頁運行在瀏覽器，小程序運行在微信環境；
2.API 不同：小程序無法調用 DOM 和 BOM 的 API，但可以調用微信環境提供的 API；
開發模式：網頁是 瀏覽器+代碼編輯器，小程序開發模式是小程序賬號；

<!-- 輪播圖 -->
<view class="banner"><swiper class="swiper" indicator-dots="{{indicatorDots}}" ‘autoplay="{{autoplay}}" interval="{{interval}}"duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)"indicator-active-color="#fff"><block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index"><swiper-item><image class="slide-image" src="{{item.image}}"mode="aspectFill"></image></swiper-item></block></swiper>
</view>

js

data:{imgUrls: ['/images/ad1.jpg','/images/ad2.jpg','/images/ad3.jpg','/images/ad4.jpg','/images/ad5.jpg','/images/ad6.jpg','/images/ad7.jpg',],indicatorDots: true, // 是否顯示面板指示點autoplay: true,      // 是否自動切換circular: true,      // 是否采用銜接滑動interval: 3000,      // 自動切換時間間隔duration: 1000,      // 滑動動畫時長
}

css

.banner .swiper {height: 330rpx;
}
.banner .swiper .slide-image {width: 100%;height: 100%;
}

事件對象屬性

常用事件
tap：bindtap 或 bind:tap
input：bindinput 或 bind:input
change：bindchange 或 bind:change

type：事件類型
timeStamp：頁面打開到觸發事件所經過的毫秒數
target： 觸發該事件的源頭組件，屬性值集合
currentTarget：當前事件綁定的組件，屬性值集合
detail：額外的信息

bindtap 的使用
1. 為組件綁定 tap 觸摸事件，為文本框綁定輸入事件
2. 在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event( e )來接 收, 和 data 平級

雙向數據綁定：
步驟: 1.定義數據2. 渲染結構, 綁定 data 中的數據3. 美化樣式4. 監聽 input 事件代碼:data: {   msg: '請輸入...'   }<input class="ipt2" placeholder="{{msg}}" bindinput="inputHandler"></input>inputHandler (e) {console.log(e.detail.value);},  

事件綁定
條件渲染
1. block包裹性容器：條件成立渲染

<block wx:if="{{ true }}"><block wx:if="{{true}}"><view>view1</view><view>view2</view>
</block>

wx:if：動態創建移除元素控制展示與隱藏

 wx:if 搭配 wx:elif 、 wx:else data:    type:2
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

. hidden：控制展示與隱藏

<view hidden="{{flag}}">true隱藏，false顯示</view>

wx:if 和 hidden對比

wx:if
動態創建和移除元素，控制元素展示 / 隱藏
場景：控制條件復雜時使用

hidden
切換樣式控制展示與隱藏，節點一直存在
場景：頻繁切換

列表渲染

1. wx:for 指定數組，進行循環渲染
2. wx:for-index 手動指定索引名
3. wx:for-item 手動指定當前項名
4. wx:key=“id” 提高渲染效率

模板樣式：rpx
布局使用 flex 布局，尺寸單位使用 rpx
( responsive pixel )是微信小程序獨有的，用來解決屏適配的尺寸單位