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

語言: 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 次

需求描述：假設在自己的微信小程序中，希望請求 https://www.escook.cn/ 域名下的接口

配置步驟：登錄微信小程序管理後台 --> 開發 --> 開發設置 --> 服務器域名 --> 修改 request 合法域名

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

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

8.3 發起 GET 請求

調用微信小程序提供的 wx.request() 方法，可以發起 GET 數據請求

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

8.4 發起 POST 請求

調用微信小程序提供的 wx.request() 方法，可以發起 POST 數據請求

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

8.5 在頁面剛加載時請求數據

在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數據。此時需要在頁面的 onLoad 事件中調用獲取數據的函數

8.6 跳過 request 合法域名校驗

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

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

8.7 關於跨域和 AJAX 的説明

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