微信小程式與網頁開發有什麼不同？

語言: CN / TW / HK
時間 2023-01-31 00:15:08

highlight: an-old-hope

1.小程式協同開發

1.1開發者的許可權說明

  1. 不同專案成員分為三個角色：運營成員、開發人員、資料分析者。

  2. 開發者的許可權說明

    • 開發者許可權：可以使用小程式開發者工具及對小程式的功能進行程式碼的管理
    • 體驗者許可權：可以使用體驗版小程式
    • 登入僅限：可登入小程式的後臺管理，無需管理員確認
    • 開發設定：設定小程式伺服器域名，訊息推送及掃描普通 連結二維碼開啟小程式
    • 騰訊雲管理：雲開發相關設定

0.

1.2 如何新增專案成員和體驗成員

  • 每個小程式可新增一定數量的專案成員，體驗成員，具體限制如下

    image-20211212223431546

  • 個人：15

  • 已認證已釋出非個人（公司）：90

2.資料繫結

2.1 瞭解資料繫結的原則

  1. 資料繫結的原則

    • 在 data 中定義資料
    • 在 wxml 中使用資料

  2. 在 data 中定義頁面的資料

    在頁面對應的 .js 檔案中，把資料定義在 data 物件中即可：

  3. Mustache 語法的格式

    把 data 中的資料繫結到頁面中渲染，使用 Mustache 語法 (雙大括號) 將變數包起來即可。語法格式如下

  4. 案例程式碼

    js data: { name: '亞瑟' }

    html <view>{{ name }}</view>

2.2 動態繫結屬性

  1. Mustache 語法的應用場景

    • 繫結內容
    • 繫結屬性
    • 運算(三元運算、算術運算子)

  2. 動態繫結內容

    頁面的資料如下：

    頁面的結構如下：

  3. 動態繫結屬性

    頁面的資料如下：

頁面的結構如下：

  1. 案例程式碼

    js data: { imgSrc: 'http://www.itcast.cn/2018czgw/images/logo.png' }

    html <image src="{{ imgSrc }}" mode="widthFix"></image>

2.3 三元運算

頁面的資料如下

頁面的結構如下

案例程式碼

js data: { randomNum: Math.random() * 10 // 生成 10 以內的隨機數 }

html <view>{{ randomNum >= 5 ? '隨機數字大於或等於5' : '隨機數小於 5' }}</view>

2.4 算數運算

頁面的資料如下

頁面的結構如下

案例程式碼

js data: { randomNum1: Math.random().toFixed(2) }

html <view>{{ randomNum1 * 100 }}</view>

3. 事件繫結

3.1 瞭解什麼是事件以及小程式中常用的事件

  1. 什麼是事件

    事件是渲染層到邏輯層的通訊方式。通過事件可以將使用者在渲染層產生的行為，反饋到邏輯層進行業務的處理

  2. 小程式中常用的事件

    • bindtap、bindinput、bindchange
    • bind:tap、bind:input、bind:chage

    | 型別 | 繫結方式 | 事件描述 | | ------ | ------------------------ | ------------------------------ | | tap | bindtap 或 bind:tap | 手指觸控後馬上離開，類似於 HTML 中的 click 事件 | | input | bindinput 或者 bind:input | 文字框的輸入事件 | | change | bindchange 或 bind:change | 狀態改變時觸發 |

3.2 bindTap 的語法格式

在小程式中，不存在 HTML 中的 onclick 滑鼠點選事件，而是通過 tap 事件來響應使用者的觸控行為

  1. 通過 bindtap，可以為元件繫結 tap 觸控事件

  2. 在頁面的 .js 檔案中定義對應的事件處理函式，事件引數通過形參 event(一般簡寫為 e) 來接收

  3. 案例程式碼

    js // 按鈕 tap 事件處理函式 btnTapHandle (e) { // 事件引數物件 e console.log(e) }

    html <view> <button type="primary" bindtap="btnTapHandle">按鈕</button> </view>

3.3 事件物件的屬性列表

當事件回撥觸發的時候，會收到一個事件物件 event，它的詳細屬性如下

| 屬性 | 型別 | 說明 | | -------------- | ------- | ---------------------- | | type | String | 事件型別 | | timeStamp | Integer | 事件生成時的時間戳 | | target | Object | 觸發事件的元件的一些屬性值集合 | | currentTarget | Object | 當前元件的一些屬性值集合 | | detail | Object | 額外的資訊 | | touches | Array | 觸控事件，當前停留在螢幕中的觸控點資訊的陣列 | | changedTouches | Array | 觸控事件，當前變化的觸控點資訊的陣列 |

3.4 target 和 currentTarget 的區別

  1. target 是觸發該事件的源頭元件
  2. currentTarget 則是當前事件所繫結的元件

點選內部的按鈕時，點選事件以 冒泡 的方式向外擴散，也會觸發外層 view 的 tap 事件處理程式

此時，對於外層的 view 來說：

  1. e.target 指定的是觸發事件的源頭元件，因為 e.target 是內部的按鈕元件
  2. e.currentTarget 指向的是當前正在觸發事件的那個元件，因此 e.currentTarget 是當前的 view 元件

3.5 在事件處理函式中為 data 中的資料賦值

通過呼叫 this.setData(dataObject) 方法，可以給頁面 data 中的資料重新賦值

  • 更新資料
  • 驅動檢視更新

案例程式碼：

js // count 值 + 1 處理 changeCount () { this.setData({ count: this.data.count + 1 }) }

html <view> <button type="primary" bindtap="changeCount">+ 1</button> </view>

3.6 事件傳參

  1. 事件傳參錯誤方式

    小程式中的事件傳參比較特殊，不能在繫結事件的同時為事件處理程式傳遞引數，例如，下面的程式碼將不能正常工作

    因為小程式會把 bindtap 的屬性值，統一當作事件名稱來處理，相當於要呼叫一個名稱為 btnHandler(123) 的事件處理函式

  2. 事件傳參正確的方式

    可以為元件提供 data-* 自定義屬性傳參，其中 * 代表的是引數的名字，例項程式碼如下：

    最終：

    • info 會被解析為 引數的名字
    • 數值 2 會被解析為 引數的值

  3. 接收事件傳遞的引數

    在事件處理函式中，通過 event.target.dataset.引數名 即可獲取到具體引數的值，示例程式碼如下：

  4. 案例程式碼

    js data: { count: 0 }

    js // count 值 + 2 處理 bindTap2 (e) { this.setData({ count: this.data.count + e.target.dataset.num }) }

    html <view> <button type="primary" bindtap="bindTap2" data-num="{{ 2 }}">+ 2</button> </view>

3.7 bindinput 的語法格式

在小程式中，通過 input 事件來響應文字框的輸入事件，語法格式如下：

  1. 通過 bindinput，可以為為文字框繫結輸入事件

  2. 在頁面的 .js 檔案中定義事件處理函式

  3. 案例程式碼

    js // 獲取 input 中的最新輸入的資料 inputHandle (e) { // e.detail.value 是輸入框最新輸入的值 console.log(e.detail.value) }

    html <view> <input type="text" bindinput="inputHandle" /> </view>

3.8 實現文字框和 data 之間的資料同步

  1. 定義資料

  2. 渲染結構

  3. 美化樣式

  4. 繫結 input

  5. 案例程式碼

    html <view> <input value="{{ msg }}" bindinput="setMsg" /> </view>

    js data: { msg: `` }

    js // 實現文字框和 data 之間資料的同步 setMsg (e) { this.setData({ msg: e.detail.value }) }

    css input { border: 1px solid lightcoral; padding: 5px; margin: 5px; border-radius: 3px; }

4. 條件渲染

4.1 if..elif..else

  1. 在框架中，使用 wx:if="{{ condition }}" 來判斷是否需要渲染該程式碼塊

  2. 也可以用 wx:elif 和 wx:else 來新增一個 else 塊

  3. 案例程式碼

    html <!-- 條件渲染 --> <view wx:if="{{ type === 1 }}">男</view> <view wx:elif="{{ type === 2 }}">女</view> <view wx:else>保密</view>

4.2 基於 block 標籤使用 if 條件判斷

  1. 如果要一次性判斷多個元件標籤，可以使用一個 <block/> 標籤將多個元件包裝起來，並在上邊使用 wx:if 控制屬性

  2. 注意： <block/> 並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

    案例程式碼

    html <view wx:if="{{ true }}"> <view>亞瑟</view> <view>妲己</view> <view>蒙恬</view> </view>

4.3 hidden

  1. 在小程式框架中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏

  2. 案例程式碼

    html <view hidden="{{ false }}">條件為 true 隱藏，條件為 false 顯示</view>

4.4 if 和 hidden 的區別

  1. 執行方式不同

    • wx:if 以動態建立和移除元素的方式，控制元素的展示與隱藏
    • hidden 以切換樣式的方式(display: none/block)，控制元素的顯示和隱藏

  2. 使用建議

    • 頻繁切換時，建議使用 hidden
    • 控制條件複雜時，建議使用 wx:if 搭配 wx:elif 、wx:else 進行展示與隱藏的切換

    6. wxss

6.1 瞭解什麼是 wxss 以及和 css 之間的關係

  1. 什麼是 wxss

    • WXSS (WeiXin Style Sheets) 是一套樣式語言，用於描述 WXML 的元件樣式
    • WXSS 用來決定 WXML 的元件應該怎麼顯示

  2. wxss 和 css 的關係

    • WXSS 具有 CSS 大部分特性，為了更適合開發微信小程式，WXSS 對 CSS 進行了擴充以及修改

    • 與 CSS 相比，WXSS 擴充套件的特性有

      • rpx 尺寸單位
      • @import 樣式匯入

6.2 瞭解什麼是 rpx 以及它的實現原理

  1. 什麼是 rpx

    rpx（responsive pixel） 是微信小程式獨有的，用來解決螢幕適配的尺寸單位

    螢幕自適應單位

    目前不光微信小程式，其他小程式也是支援 rpx 的

  2. rpx 的實現原理

    • rpx 是實現原理非常簡單：鑑於不同裝置螢幕的大小不同，為了實現螢幕的自動適配，rpx 把所有設定的螢幕，在寬度上 等分為 750 份，即 當前螢幕的總寬度為750 rpx

      • 在較小的裝置上，1rpx 所代表的寬度較小
      • 在較大的裝置上，1rpx 所代表的寬度較大

    • 小程式在不同的裝置上執行的時候，會自動把 rpx 的樣式單位換算成對應的畫素單位來渲染，從而顯示螢幕適配

6.3 rpx 與 px 之間的換算

開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。

  1. rpx 與 px 之間的換算

    • 以 iPhone6 為例，iPhone6 的螢幕寬度為 375px ，共有 750 個物理畫素，則 750rpx = 375px = 750 物理畫素
    • 也就是 1rpx = 0.5px = 1 物理畫素

    | 裝置 | rpx 換算 px (螢幕寬度/750) | px 換算 rpx (750/螢幕寬度) | | -------------- | ------------------------ | ------------------------ | | iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | | iPhone6 | 1rpx = 0.5px | 1px = 2rpx | | iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |

那麼也就是說：

如果在iPhone6上，

如果要繪製寬100px，高20px的盒子，換算成rpx單位，

寬高分別為 200rpx 和 40rpx

  1. rpx 和 iPhone6 設計稿的關係

    官方建議：

    開發微信小程式時，設計師可以用 iPhone6 作為視覺稿的標準。（iPhone6 設計稿寬度為 750px）

    如果要根據 iPhone6 的設計稿，繪製小程式頁面，可以直接把單位從 px 替換為 rpx 。

    例如，假設 iPhone6 設計稿上，要繪製一個 寬高為 200px 的盒子，換算為 rpx 為 200rpx

6.4 @import 樣式匯入

使用場景：多個頁面 css 樣式相同，可以將 wxss 抽取成單獨的 wxss 檔案，在每個頁面的 wxss 中使用 @import 匯入即可

或者在 app.wxss 中宣告也是可以的

  1. 什麼是樣式匯入

    • 使用 @import 語句可以匯入外聯樣式表
    • 語法格式：@import "wxss 樣式表文件的相對路徑";

  2. 語法格式

    • @import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束
    • @import "wxss 樣式表文件的相對路徑"

  3. 案例程式碼

    css @import "/assets/common/common.wxss"; /* @import "../../assets/common/common.wxss"; */ ​ .box { width: 375rpx; height: 375rpx; background-color: skyblue; }

6.5 全域性樣式

  1. 定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面

6.6 區域性樣式

  1. 在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器
  2. 注意：當局部樣式的權重大於或等於全域性樣式的權重時，才會覆蓋全域性的樣式效果！

7. 全域性配置與頁面配置

7.1 app.json 配置檔案

小程式根目錄下的 app.json 檔案用來對微信小程式進行全域性配置，

它決定了頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

  1. 在 app.json 配置檔案中，最主要的配置節點是：

    • pages 陣列：配置小程式的頁面路徑
    • window 物件：用於設定小程式的狀態列、導航條、標題、視窗背景色
    • tabBar 物件：配置小程式的tab欄效果

注：全域性配置詳細文件

7.2 pages 陣列的用法

app.json 中的 pages 陣列，用來配置小程式的頁面路徑

  1. 基礎配置

    • pages 用於指定小程式由哪些頁面組成，每一項都對應一個頁面的 路徑+檔名 資訊。
    • 檔名不需要寫檔案字尾，框架會自動去尋找對應位置的 .json、 .js、 .wxml 和 .wxss 四個檔案進行處理。

  2. 建立頁面的另一種方式

    • 開啟 app.json --> pages 陣列節點 --> 新增頁面路徑並儲存 --> 自動建立路徑對應的頁面

  3. 設定專案的首頁

    • 開啟 app.json -> pages 陣列節點
    • 按需調整陣列中路徑的順序，即可修改預設首頁

注意事項：

  1. 陣列的第一項代表小程式的小程式的初始頁面也就是首頁
  2. 小程式中新增/減少頁面，都需要對 pages 陣列進行修改，否則在執行小程式時就會報錯

注：全域性配置詳細文件

7.3 小程式視窗的組成部分

常見的屬性配置： 常見的屬性配置

7.4 設定導航欄標題文字內容

  1. app.json --> window --> navigationBarTitleText
  2. 將屬性值修改即可

7.5 設定導航欄背景色

  1. app.json --> window --> navigationBarBackgroundColor
  2. 將屬性值修改為指定的顏色就可以

7.6 設定導航欄標題顏色

  1. app.json --> window --> navigationBarTextStyle
  2. 將屬性值修改為指定的顏色就可以

7.7 全域性開啟下拉重新整理功能

通過手指在螢幕上的下拉滑動操作，從而重新載入頁面資料的行為

  1. app.json --> window --> 把 enablePullDownRefresh 的值設定為 true

7.8 設定下拉重新整理視窗的背景色

當全域性開啟下拉重新整理功能之後，預設的視窗背景為白色

  1. app.json -> window -> backgroundColor

7.9 設定下拉loading的樣式

當全域性開啟下拉重新整理功能之後，預設視窗的loading樣式為白色

1 app.json --> window --> backgroundTextStyle

7.10 設定上拉觸底的距離

手指在螢幕上的上拉滑動操作，從而載入更多資料的行為

1 app.json --> window --> onReachBottomDistance

注意： 預設距離為 50px，如果沒有特殊需求，建議使用預設值即可

7.11 tabBar 的概念

tabBar 是移動端應用常見的頁面效果，用於實現多頁面的快速切換；小程式中通常將其分為底部 tabBar 和頂部 tabBar

注意：tabBar 中，只能配置最少2個、最多5個 tab 頁籤，當渲染頂部 tabBar 的時候，不顯示 icon，只顯示文字

注： tabbar 詳細文件

7.12 tabBar 的組成部分

如果需要 tabBar 展示到頁面中，tabBar 對應的路徑必須有一個是首頁才可以

  1. backgroundColor：導航條背景色
  2. selectedIconPath：選中時的圖片路徑
  3. borderStyle：tabBar上邊框的顏色
  4. iconPath：未選中時的圖片路徑
  5. selectedColor：tab 上的文字選中時的顏色
  6. color：tab 上的文字預設（未選中）顏色

7.13 tabBar 節點的配置項

  1. tabBar 節點的配置項

    | 屬性 | 型別 | 必填 | 預設值 | 描述 | | --------------- | -------- | -- | ------ | ---------------------------------------- | | color | HexColor | 是 | . | tab 上的文字預設顏色，僅支援十六進位制顏色 | | selectedColor | HexColor | 是 | . | tab 上的文字選中時的顏色，僅支援十六進位制顏色 | | backgroundColor | HexColor | 是 | . | tab 的背景色，僅支援十六進位制顏色 | | borderStyle | string | 否 | black | tabBar 上邊框的顏色， 僅支援 black / white | | list | Array | 是 | . | tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab | | position | string | 否 | bottom | tabBar 的位置，僅支援 bottom/ top | | custom | boolean | 否 | false | 自定義 tabBar |

  1. list 節點的配置項

    | 屬性 | 型別 | 必填 | 說明 | | ---------------- | ------ | -- | ------------------------------------------ | | pagePath | string | 是 | 頁面路徑，必須在 pages 中先定義 | | text | string | 是 | tab 上按鈕文字 | | iconPath | string | 否 | 圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px | | selectedIconPath | string | 否 | 選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px |

注意：

  1. 都不支援網路圖片
  2. 當 position 為 top 時，不顯示 icon。

josn "tabBar": { "color": "#fff", "backgroundColor": "#ccc", "selectedColor": "#e43130", "position": "top", "list": [ { "pagePath": "pages/home/home", "text": "首頁", "iconPath": "/images/tabs/home.png", "selectedIconPath": "/images/tabs/home-active.png" }, { "pagePath": "pages/message/message", "text": "訊息", "iconPath": "/images/tabs/message.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "pages/contact/contact", "text": "聯絡我們", "iconPath": "/images/tabs/contact.png", "selectedIconPath": "/images/tabs/contact-active.png" }, { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "/images/tabs/profile.png", "selectedIconPath": "/images/tabs/profile-active.png" } ] }

7.14 全域性配置和區域性配置的關係

  1. app.json 中的 window 節點，可以全域性配置小程式中每個頁面的視窗表現；
  2. 如果某些小程式頁面，想要擁有特殊的視窗表現，此時，“頁面級別的 .json 配置檔案”就可以實現這種需求；

注意：頁面級別配置優先於全域性配置生效

7.15 頁面配置屬性

頁面配置只能夠對當前頁面的視窗進行配置

注： 頁面配置詳細文件

8. 資料請求(網路請求)

8.1 小程式中網路資料請求的限制

  1. 出於安全性方面的考慮，小程式官方對資料介面的請求做出瞭如下兩個限制：

    • 只能請求 HTTPS 型別的介面
    • 必須將介面的域名新增到信任列表中 (上線)

8.2 配置 request 合法域名

因為微信公眾後臺渲染的問題，顯示成了一個月可以修改 50 次，這是錯誤的 ！！！！ 一月只能夠修改 5 次

需求描述：假設在自己的微信小程式中，希望請求 http://www.escook.cn/ 域名下的介面

配置步驟：登入微信小程式管理後臺 --> 開發 --> 開發設定 --> 伺服器域名 --> 修改 request 合法域名

修改時需要注意以下事項：

  • 域名只支援 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 協議
  • 域名不能使用 IP 地址或 localhost
  • 域名必須經過 ICP 備案
  • 伺服器域名一個月內可申請5次修改

8.3 發起 GET 請求

呼叫微信小程式提供的 wx.request() 方法，可以發起 GET 資料請求

html http://www.escook.cn/api/get

8.4 發起 POST 請求

呼叫微信小程式提供的 wx.request() 方法，可以發起 POST 資料請求

html http://www.escook.cn/api/post

8.5 在頁面剛載入時請求資料

在很多情況下，我們需要在頁面剛載入的時候，自動請求一些初始化的資料。此時需要在頁面的 onLoad 事件中呼叫獲取資料的函式

8.6 跳過 request 合法域名校驗

如果後端程式設計師 僅僅提供了 http 協議的介面、暫時沒有提供 https 協議的介面，此時為了不耽誤開發的進度，我們需要在微信開發者工具中，臨時開啟 [開發環境不校驗請求域名、TLS 版本及 HTTPS 證書」 選項，跳過伺服器域名的校驗。此時，在微信開發者工具中及手機開啟除錯模式時，不會進行伺服器域名的校驗。

注意：在伺服器域名配置成功後，建議開發者關閉此選項進行開發，並在各平臺下進行測試，以確認伺服器域名配置正確。

8.7 關於跨域和 AJAX 的說明

  1. 跨域問題只存在於基於瀏覽器的 Web 開發中。由於小程式的宿主環境不是瀏覽器，而是微信客戶端，所以小程式中不存在跨域問題
  2. AJAX 技術的核心是依賴於瀏覽器中的 XMLHttpRequest 這個物件，由於 小程式宿主環境是微信客戶端，所以小程式中不能叫做 發起 AJAX 請求，而是叫做 發起網路資料請求
「」
「」