微信小程式入門與實踐

1、歡迎頁面

所支援的CSS選擇器：雖然CSS1、CSS2和CSS3的選擇器種類加起來有幾十種，但在小程式中只有6種

注：本地資源在wxss中是無法使用的，可以使用網路圖片來代替本地圖片

Flex佈局：用display:flex。其宗旨是讓頁面的樣式佈局更加簡單，並且可以很好地支援響應式佈局。傳統用position和float屬性來佈局，它有缺陷，比如垂直居中就不是那麼容易實現，Flex可以很好地解決這些問題。

使用display:flex將view變成了一個彈性盒子。

接著用flex-direction指定view內元素的排列方向。屬性.row和.row-reverse（主軸為水平方向），.column和.column-reverse（主軸為垂直方向）

屬性align-items: center，可以讓元素水平居中。注：為“交叉軸”方向上的對齊方式。如主軸為垂直，則為水平方向對齊。

自適應單位rpx：可以使元件自適應螢幕的高度和寬度，但px不會。建議以iPhone6的寬度750個物理畫素作為標準，來做設計圖

全域性樣式檔案app.wxss：如字型

頁面的根元素page：container view的外邊，還有一個預設的容器元素，page，代表著頁面整體，所以只需對page設定背景色。

page {
   background-color: #ECC0A8;
}

app.json中的window配置項：可用來設定狀態列、導航欄、標題和視窗的背景色。

 

2、文章列表頁面

輪播圖：每隔幾秒圖片會自動更換一張。swiper元件主要由多個swiper-item組成，在swiper-item中加image元件。

文章列表：<view> <text> <image>

image元件：4種縮放模式和9種裁剪模式

.js檔案的程式碼結構與Page頁面的生命週期：onload

資料繫結：在真實的專案中，業務資料通過訪問RESTFUL API來獲取資料。傳統思路：獲取DOM，對DOM標籤進行賦值，從而實現資料的顯示。但在JSCore完全拋棄了DOM，只能使用資料繫結。小程式僅實現了單向資料繫結。data變數作為資料繫結的橋樑。呼叫setData將引起頁面的rerender（重新渲染）

繫結複雜物件：

列表渲染wx:for：嘗試把所有的文章都改為資料繫結的形式

<block wx:for= "{{postList}}" wx:for-item="item" wx:for-index="idx"> <block>

<block>沒有實質意義，並不是元件。

頁面跳轉：wx.redirectTo（關閉當前頁面），wx.navigateTo（保留），switchTap（tabbar頁面跳轉）

冒泡事件和非冒泡事件：

3、模組、模板和快取

  template模板

  使用storage快取初始化本地資料庫

4、文章詳細頁面

頁面間傳遞引數的3種方式：全域性、快取、url的query引數傳遞

動態設定導航欄標題：wx.setNavigationBarTitle(OBJECT)

5、收藏、評論、點贊與計數功能

wx:if和hidden控制

6、背景音樂播放

播放音樂

7、豐富文章頁面

分享給朋友