小程序開發

微信小程序

01- 小程序是什麼

• 小程序是一種不須要下載安裝便可使用的應用，它實現了應用 「觸手可及」 的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了 用完即走 的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無序安裝卸載
• 微信小程序是一種全新的鏈接用戶與服務的方式，它能夠在微信內被便捷地獲取和傳播，同時具備出色的使用體驗

02- 優點

• 1 無需安裝卸載，無需單獨註冊軟件
• 2 每一個小程序都有 10 億的潛在用戶
• 3 基於微信，能夠被便捷地獲取和傳播

03- 注意點

• 劣勢：功能受限於微信
• 基於微信，只能在微信內部使用
• 默認狀況下，微信是沒有小程序的，搜索打開一個小程序後就有了
• 重要：小程序不是 web，相似於 web（對前端開發人員友好）

04- 體驗小程序

• 體驗小程序
• 小程序開發的兩個組成部分：1 組件 2 API
• 開放接口：用於獲取與微信相關的數據

05- 註冊小程序

• 微信公衆平臺
• 進入後臺：設置 -> 開發設置 -> 拿到 AppID（建立小程序項目使用）

06- 要求

• 1 每一個郵箱僅能申請一個小程序
• 2 未被微信公衆平臺註冊，未被微信開放平臺註冊，未被我的微信號綁定的郵箱

07- 註冊流程

• 1 填寫賬號信息
• 2 郵件激活
  • 進入上一步的註冊郵箱，點擊激活連接，激活小程序
• 3 信息登記
  • 須要實名認證
• 註冊完成後，在左側邊欄的 設置 -> 開發設置 中拿到：AppID

08- 微信開發者工具

• 安裝

• 開發者工具使用

• 說明：第一次使用工具須要使用註冊小程序的微信掃碼登陸

• 建立小程序項目：

  • 1 項目目錄：使用空目錄
  • 2 AppID： 使用註冊後獲取到的 AppID
  • 3 項目名稱：非小程序名稱，能夠是任意名稱
  • 4 創建普通快速啓動模板：初始化項目基本結構（空的項目目錄中才有這個提示）
  • 5 點擊編譯菜單，運行QuickStart項目（模擬器中展現的歡迎頁）

• 演示：打開已存在的項目，以及認識開發者工具

09- 小程序項目結構

• 代碼構成

pages/ ---------------- 頁面（組件），全部頁面都應該放到這個目錄中
  index/  ------------- index文件夾
    index.js ---------- index頁面的邏輯代碼
    index.wxml -------- index頁面的HTML結構
    index.wxss -------- index頁面的CSS樣式
    index.json -------- 頁面配置（可選）
utils/ ---------------- 公共工具（函數）
app.js ---------------- 邏輯
app.json -------------- 全局配置（包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等）
app.wxss -------------- 全局樣式（CSS）
project.config.json --- 開發工具配置（例如ES6轉ES五、界面顏色、編譯配置等）
複製代碼

10- pages 基本使用

• 約定：1 全部頁面放到pages目錄中
• 約定：2 文件名稱與文件夾名稱相同
• 約定：3 全部須要展現的頁面都要在app.json中進行配置
• 說明：在app.json中配置pages，能夠快速建立頁面

app.json 配置說明：
1 全部的頁面都須要配置到 `pages` 配置項中
2 `pages` 數組的第一項表示進入小程序要展現的頁面
複製代碼

<text></text> ：用來展現文字內容，相似於 span
複製代碼

11- 小程序配置

• 配置 - app 和 page

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

• page.json 頁面的.json 只能設置 window 相關的配置項，以決定本頁面的窗口表現

• app.json 是全局配置

• [page].json 是針對當前頁面的配置，若是頁面中的配置與全局配置衝突，是以頁面配置爲準

12- 標籤欄 - tabBar

• 當設置 position 爲 top 時，將不會顯示 icon
• tabBar 中的 list 是一個數組，只能配置最少 2 個、最多 5 個 tab，tab 按數組的順序排序
• 注意：沒有出如今tabBar.list的pagePath頁面不展現標籤欄

13- 數據綁定

• WXML 中的動態數據均來自對應 Page 的 data

<text>{{ msg }}</text>

<input type="text" value="{{ msg }}">

<checkbox checked="{{isAgree}}"></checkbox>
複製代碼

14- 條件渲染

• wx:if

<view wx:if="{{ isLoading }}">
  <text>數據加載中...</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else>
  <text>搞定啦~</text>
</view>

<!-- 隱藏多個元素，不改變 wxml的層級結構 -->
<block wx:if="{{ isLoading }}">
  <text>小明</text>
  <text>小紅</text>
</block>
複製代碼

• hidden

<view hidden="{{ isLoading }}">
  <text>搞定啦~</text>
</view>
複製代碼

15- 列表渲染

• wx:for：遍歷數組，在元素中經過index獲取索引號，經過item獲取當前項
• wx:for-index="idx"：替換默認的 index
• wx:for-item="it"：替換默認的 item
• 注意：遍歷數組元素的時候，須要添加wx:key屬性，來提升渲染性能

<view wx:for="{{ list }}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName.id">
  {{idx}}: {{itemName.message}}
</view>
複製代碼

16- 事件處理

• 綁定事件：1 bindtap 2 catchtap
• 說明：bind 事件綁定不會阻止冒泡事件向上冒泡，catch 事件綁定能夠阻止冒泡事件向上冒泡
• 說明：經過標籤的自定義屬性data-*，實現給事件「傳遞」參數

<button bindtap="sayHi" data-msg="test">
  點我吧
</button>;

Page({
  sayHi(event) {
    console.log("單擊事件觸發了~", event.currentTarget.dataset.msg);
  }
});
複製代碼

17- 數據操做

• setData
• setData()：更新數據
  • 說明：將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）
  • 1 修改 data 中的數據
  • 2 更新視圖，也就是說：視圖中使用該數據的地方會從新渲染

this.setData({
  name: "jack"
});
複製代碼

• 文本框操做：

<input value="{{ input }}" bindinput="inputChangeHandle" />;

Page({
  inputChangeHandle: function(e) {
    this.setData({ input: e.detail.value });
  }
});
複製代碼

18- 小程序樣式

• 尺寸單位 rpx
• wsxx 演示 rpx 的基本使用
  • 小程序默認寬度：750rpx
• 演示 @import 的基本使用
• 佈局：flex

19- UI 庫

• weui-wsxx

20- 應用生命週期

• 兩個生命週期：1 應用生命週期 2 頁面生命週期
• app 生命週期
• 頁面 生命週期

21- todomvc 案例

• 每一個框架或庫都應該寫一個 todomvc，來了解這個框架的使用模式是怎樣的

小程序中的 todo 案例的功能

• 1 歡迎界面（沒有任務就展現歡迎界面，有任務就展現任務列表）
  • 注意：歡迎界面 和 任務列表 只能二選一
• 2 展現任務列表
• 3 添加任務
  • 剩餘任務數量會改變
• 4 任務狀態切換（完成和未完成）
  • 剩餘任務數量會改變
  • 當全部的任務都完成，隱藏剩餘任務數量展現
• 5 刪除任務
  • 剩餘任務數量會改變（刪除未完成任務）
• 6 切換全部任務的選中狀態
  • 只要有一項是選中的，那麼，就應該讓其餘項也選中
• 7 展現清除已完成任務按鈕
  • 1 當有已完成的任務，就展現
  • 2 單擊清除已完成任務按鈕，會清除全部已完成的任務

任務中須要頻繁處理的操做：
1 清除已完成任務按鈕 的展現和隱藏
2 剩餘任務（未完成任務）的展現和隱藏
複製代碼

<!-- 小程序中的圖片標籤：相似於 web 中的img標籤 -->
<image src="圖片路徑"></image>

<!-- 小程序中的圖標，用於展現一個小圖標 -->
<!-- type 表示當前 icon 的類型 -->
<icon class="checkbox" type="success"/>
複製代碼

導航

• 注意：不一樣的open-type能跳轉到的頁面也不一樣
• 注意：navigator組件必須指定url，不然會報錯
• 注意：默認狀況下，navigator 沒法跳轉到 tabBar 中配置的頁面，若是想要跳轉到 tabBar 中的頁面，須要修改open-type類型
• 路由 - 頁面跳轉

<navigator url="/pages/page1/page1">跳轉頁面page1</navigator>

<!-- 跳轉頁面，而且傳遞參數 -->
<navigator url="/pages/page1/page1?page=1&limit=10">跳轉頁面page1</navigator>
複製代碼

樣式的處理

• 1 圖片必需要設置寬度和高度，若是隻設置寬度或高度其中一種，圖片是不會自動適應
• 2 使用rpx代替原始的px像素
• 3 使用flex佈局，也能夠配合百分比佈局來使用
• 4 圖片有mode用來設置圖片的展現模式

底部菜單配置

• 1 list 中每個菜單項的pagePath屬性不能使用/開頭
• 2 文字顏色 以及選中項文字顏色，只能統一設置不能單獨設置

小程序發送請求的說明

• 關於小程序中網絡相關 API 的說明

• 1 在實際的項目中須要在開發設置中配置服務器域名，而後，小程序才能發送請求獲取數據

• 2 可是，在開發期間，能夠忽略這一步

  • 在開發工具右上角的詳情菜單中，勾選最後一項：不校驗安全域名、TLS版本以及HTTPS證書

• 3 在小程序不用考慮跨域的問題，由於小程序是基於微信這個客戶端

• 4 沒法在小程序中使用 XHR 對象，發送請求