微信小程式宿主環境基礎介紹

2022-08-10 18:02:16

一、什麼是宿主環境

宿主環境（host environment）指的是程式執行所必須的依賴環境。例如：安卓版的微信App 是不能在iOS 環境下執行的，只能在Android環境下執行，所以，Android 是安卓軟體的宿主環境，脫離了Android，安卓版的微信App的執行將毫無意義

小程式的宿主環境是微信，微信小程式藉助宿主環境微信提供的能力，可以完成微信支付、微信掃碼、微信登入、地理定位等普通網頁無法完成的功能。無論手機的系統是Andriod還是iOS，微信小程式的宿主環境都是微信（安卓版微信和iOS 版微信）。

小程式宿主環境的內容包括通訊模型、執行機制、元件和API四個方面。

小程式中通訊的主題是渲染層和邏輯層，其中：WXML模板和WXSS樣式工作在渲染層，JS指令碼檔案工作在邏輯層，三者共同構成小程式的通訊主體。其中渲染層和邏輯層之間的通訊由微信使用者端進行轉發，邏輯層和第三方伺服器之間的通訊由微信使用者端轉發。

（1）把小程式的程式碼包下載到本地儲存到電腦上

（2）解析 app.json 全域性組態檔

（3）執行 app.js 小程式入口檔案，呼叫 App()

（4）建立小程式範例渲染小程式首頁

渲染完小程式首頁後，渲染小程式頁面，頁面渲染過程如下：先載入頁面的.json設定文件，再載入頁面的.wxml模板和.wxss樣式，再執行頁面的.js檔案，呼叫 Page() 建立頁面範例，最後頁面渲染完成

（5）小程式啟動完成

小程式中的元件也是由宿主環境提供的，開發者可以基於元件快速搭建出漂亮的頁面結構。官方把小程式的元件分為了 9 大類，分別是：檢視容器、基礎內容、表單元件、導航元件、媒體元件、 map 地圖元件、canvas 畫布元件、開放能力、無障礙存取元件。

（1）常用的檢視容器類元件

view：普通檢視區域，類似於html中的div標籤，是一個塊級元素，用來實現頁面的佈局效果，常用的使用案例由：實現flex橫向佈局效果，實現圖片的縱向捲動效果

<view>
  <image src="{{imgSrc}}" mode="heightFix"></image>
      <!--插入了image標籤的view-->
</view>

scroll-view: 可捲動的檢視區域，常用來實現捲動列表效果

<scroll-view>
  <image src="{{imgSrc}}" mode="heightFix"></image>
  <!--帶有image的scroll-view-->
</scroll-view>

swiper 和 swiper-item ：輪播圖容器元件和輪播圖 item 元件，用於輪播圖輪播圖的資料展示，常用於實現小程式的輪播圖

<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<!--帶有兩個輪播圖item的輪播圖元件，可在swiper-item中新增需要的頁面元素-->
</swiper>

swiper元件的常用屬性：

（2）常用的基礎內容元件

text：文字元件，類似於html中的span元件，行內元素，用於展示文字內容

<text>這是一個text元件</text>

rich-text：富文字元件,支援把 HTML 字串渲染為 WXML 結構

<rich-text>這是一個富文字元件</rich-text>

button :按鈕元件 :功能比 HTML 中的 button 按鈕豐富通過 open-type 屬性可以呼叫微信提供的各種功能（客服、轉發、獲取使用者授權、獲取使用者資訊等）

image :圖片元件 image 元件預設寬度約 300px、高度約 240px navigator（後面課程會專門講解）頁面導航元件類似於 HTML 中的 a 連結,image元件的mode屬性如下：

navigator:頁面導航元件類似於 HTML 中的 a 連結

小程式中的API是由宿主環境微信提供的，通過這些豐富的小程式 API，開發者可以方便的呼叫微信提供的能力，例如：獲取使用者資訊、本地儲存、支付功能等。

小程式官方把 API 分為了如下 3 大類：

（1）事件監聽 API：以 on 開頭，用來監聽某些事件的觸發舉例：wx.onWindowResize(function callback) 監聽視窗尺寸變化的事件

（2）同步 API：以 Sync 結尾的 API 都是同步 API 特點2：同步 API 的執行結果，可以通過函數返回值直接獲取，如果執行出錯會丟擲異常舉例：wx.setStorageSync('key', 'value') 向本地儲存中寫入內容

（3）非同步 API ：類似於 jQuery 中的 $.ajax(options) 函數，需要通過 success、fail、complete 接收呼叫的結果舉例：wx.request() 發起網路資料請求，通過 success 回撥函數接收資料

到此這篇關於微信小程式宿主環境基礎介紹的文章就介紹到這了,更多相關小程式宿主環境內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！