微信小程序賬號與工具

在線文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/

小程序開發者賬號注冊

微信公眾平臺：https://mp.weixin.qq.com/

小程序開發者賬號注冊：https://mp.weixin.qq.com/wxopen/waregister?action=step1

微信開發者工具

微信開發者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信小程序文件結構

主體文件結構

主體部分由三個文件組成，必須放在項目的根目錄，如下：

頁面文件結構

頁面由四個文件組成，分別是：

<img src="./img/fileTree.png" />

微信小程序配置

app.json 配置項列表

app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

window配置

用于設置小程序的狀態欄、導航條、標題、窗口背景色。

注意：頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵。

<img src="./img/config.jpg" />

tabBar

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip：

1. 當設置 position 為 top 時，將不會顯示 icon。
2. tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

屬性說明：

其中 list 接受一個數組，數組中的每個項都是一個對象，其屬性值如下：

圖示：

<img src="./img/tabBar.png" />

微信小程序組件(標簽)

組件文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

常用布局標簽

<view></view>               相當于    <div></div>
<text></text>               相當于    <span></span>
<image></image>             相當于    <img />
<navigator></navigator>     相當于    <a></a>
<block></block>             區塊標簽，不會渲染到頁面

注意：image組件默認寬度300px、高度225px，很多時候我們都不需要這個默認寬高，記得手動設置寬高

常用表單標簽

<button></button>
<input type="text" />               
<checkbox />
<radio/>

輪播圖組件

<swiper indicator-dots="是否顯示面板指示點" autoplay="是否自動切換" interval="自動切換時間間隔" duration="滑動動畫時長">
    <swiper-item>
        <image src="圖片路徑1" width="375" height="150"/>
    </swiper-item>
    <swiper-item>
        <image src="圖片路徑2" width="375" height="150"/>
    </swiper-item>
</swiper>

探索：實現無縫輪播怎么辦？

微信小程序頁面函數

生命周期函數

Page({
  /** 頁面的初始數據 */
  data: {
  },
  /** 生命周期函數--監聽頁面加載 */
  onLoad: function (options) {
  },
  /** 生命周期函數--監聽頁面初次渲染完成 */
  onReady: function () {
  },
  /** 生命周期函數--監聽頁面顯示 */
  onShow: function () {
  },
  /** 生命周期函數--監聽頁面隱藏 */
  onHide: function () {
  },
  /** 生命周期函數--監聽頁面卸載 */
  onUnload: function () {
  }
})

頁面相關事件處理函數

 /** 頁面相關事件處理函數--監聽用戶下拉動作 */
  onPullDownRefresh: function () {
  },
  /** 頁面上拉觸底事件的處理函數 */
  onReachBottom: function () {
  },
  /** 用戶點擊右上角分享 */
  onShareAppMessage: function () {
  }

WXML 布局

數據綁定 {{ }}

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

特別注意

1. 花括號和引號之間不能有空格
2. 不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

<checkbox checked="false"> </checkbox>                  其計算結果是一個字符串，轉成 boolean 類型后變成了 true
<checkbox checked="{{false}}"> </checkbox>              正確寫法

列表渲染 wx:for

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

wx:key 提高列表渲染時排序的效率

wx:key 的值以兩種形式提供

1. 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
2. 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字。

條件渲染 wx:if wx:else wx:elif

<!--wxml-->
<view wx:if="{{length >= 80}}"> 優秀 </view>
<view wx:elif="{{length >= 60}}"> 良好 </view>
<view wx:else> 加油 </view>

// page.js
Page({
  data: {
    length: '95'
  }
})

wx:if 與 hidden 區別

wx:if 是否渲染， hidden 是否隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。

因此，如果需要頻繁切換的情景下，用 hidden 更好。

事件

• 事件對象可以獲取額外信息，如 id, dataset(自定義屬性集合), touches(觸摸點坐標)。

事件綁定和冒泡

1. 冒泡事件 bind事件類型 如 bindtap bindlongpress
2. 非冒泡事件 catch事件類型 如 catchtap catchlongpress

常用事件類型

<!--wxml-->
<view data-index="自定義屬性" bindtap="tapHandle"> 點我觸發事件 </view>

// page.js
Page({
  tapHandle: function(event) {
    console.log(event)
  }
})

事件傳參注意

小程序綁定事件只能寫函數名稱，不能通過括號方式傳參。

<!--wxml-->
<view bindtap="tapHandle(520)"> 點我觸發事件 </view>                              錯誤，事件不能觸發
<view data-index="520" bindtap="tapHandle"> 點我觸發事件 </view>  

// page.js
Page({
  tapHandle: function(event) {
     console.log( event.target.dataset.index );  // 輸出標簽自定義屬性上的index值
  }
})

WXS 腳本

WXS（WeiXin Script）是小程序的一套腳本語言，功能類似<script>標簽，用于在視圖層定義函數(比較少用)。

<!--wxml-->
<wxs module="foo">
var sum = function(a,b){
  return a+b;
};
// 這里可以導出一個對象，這個對象可以直接在界面上使用 
module.exports.sum = sum;
</wxs>

<view> {{foo.sum}} </view>

WXSS 樣式

WXSS(WeiXin Style Sheets)是一套樣式語言。

與 CSS 相比，WXSS 擴展以下2個特性：

• 尺寸單位 rpx ( responsive pixel 響應式像素)
• 樣式導入 @import "樣式表路徑";

常用快捷鍵