宿主環(huán)境（host environment）指的是程序運(yùn)行所必須的依賴環(huán)境。例如：安卓版的微信App 是不能在iOS 環(huán)境下運(yùn)行的，只能在Android環(huán)境下運(yùn)行，所以，Android 是安卓軟件的宿主環(huán)境，脫離了Android，安卓版的微信App的運(yùn)行將毫無意義

二、小程序的宿主環(huán)境

小程序的宿主環(huán)境是微信，微信小程序借助宿主環(huán)境微信提供的能力，可以完成微信支付、微信掃碼、微信登錄、地理定位等普通網(wǎng)頁無法完成的功能。無論手機(jī)的系統(tǒng)是Andriod還是iOS，微信小程序的宿主環(huán)境都是微信（安卓版微信和iOS 版微信）。

三、小程序宿主環(huán)境包含的內(nèi)容

小程序宿主環(huán)境的內(nèi)容包括通信模型、運(yùn)行機(jī)制、組件和API四個(gè)方面。

1、通信的主體和通信模型

小程序中通信的主題是渲染層和邏輯層，其中：WXML模板和WXSS樣式工作在渲染層，JS腳本文件工作在邏輯層，三者共同構(gòu)成小程序的通信主體。其中渲染層和邏輯層之間的通信由微信客戶端進(jìn)行轉(zhuǎn)發(fā)，邏輯層和第三方服務(wù)器之間的通信由微信客戶端轉(zhuǎn)發(fā)。

2、小程序啟動(dòng)過程

（1）把小程序的代碼包下載到本地保存到電腦上

（2）解析 app.json 全局配置文件

（3）執(zhí)行 app.js 小程序入口文件，調(diào)用 App()

（4）創(chuàng)建小程序?qū)嵗?渲染小程序首頁

渲染完小程序首頁后，渲染小程序頁面，頁面渲染過程如下：先加載頁面的.json配置文件，再加載頁面的.wxml模板和.wxss樣式，再執(zhí)行頁面的.js文件，調(diào)用 Page() 創(chuàng)建頁面實(shí)例，最后頁面渲染完成

（5）小程序啟動(dòng)完成

3、小程序中組件的分類

小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以基于組件快速搭建出漂亮的頁面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：視圖容器、基礎(chǔ)內(nèi)容、表單組件、導(dǎo)航組件、媒體組件、 map 地圖組件、canvas 畫布組件、開放能力、無障礙訪問組件。

（1）常用的視圖容器類組件

view：普通視圖區(qū)域，類似于html中的div標(biāo)簽，是一個(gè)塊級(jí)元素，用來實(shí)現(xiàn)頁面的布局效果，常用的使用案例由：實(shí)現(xiàn)flex橫向布局效果，實(shí)現(xiàn)圖片的縱向滾動(dòng)效果

<view>
  <image src="{{imgSrc}}" mode="heightFix"></image>
      <!--插入了image標(biāo)簽的view-->
</view>

scroll-view: 可滾動(dòng)的視圖區(qū)域，常用來實(shí)現(xiàn)滾動(dòng)列表效果

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

swiper 和 swiper-item ：輪播圖容器組件和輪播圖 item 組件，用于輪播圖輪播圖的數(shù)據(jù)展示，常用于實(shí)現(xiàn)小程序的輪播圖

<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<!--帶有兩個(gè)輪播圖item的輪播圖組件，可在swiper-item中添加需要的頁面元素-->
</swiper>

swiper組件的常用屬性：

（2）常用的基礎(chǔ)內(nèi)容組件

text：文本組件，類似于html中的span組件，行內(nèi)元素，用于展示文本內(nèi)容

<text>這是一個(gè)text組件</text>

rich-text：富文本組件,支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)

<rich-text>這是一個(gè)富文本組件</rich-text>

button :按鈕組件 :功能比 HTML 中的 button 按鈕豐富通過 open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）

image :圖片組件 image 組件默認(rèn)寬度約 300px、高度約 240px navigator（后面課程會(huì)專門講解）頁面導(dǎo)航組件類似于 HTML 中的 a 鏈接,image組件的mode屬性如下：

navigator:頁面導(dǎo)航組件類似于 HTML 中的 a 鏈接

4、小程序中的 API

小程序中的API是由宿主環(huán)境微信提供的，通過這些豐富的小程序 API，開發(fā)者可以方便的調(diào)用微信提供的能力，例如：獲取用戶信息、本地存儲(chǔ)、支付功能等。

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

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

（2）同步 API：以 Sync 結(jié)尾的 API 都是同步 API 特點(diǎn)2：同步 API 的執(zhí)行結(jié)果，可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常舉例：wx.setStorageSync('key', 'value') 向本地存儲(chǔ)中寫入內(nèi)容

（3）異步 API ：類似于 jQuery 中的 $.ajax(options) 函數(shù)，需要通過 success、fail、complete 接收調(diào)用的結(jié)果舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過 success 回調(diào)函數(shù)接收數(shù)據(jù)

到此這篇關(guān)于微信小程序宿主環(huán)境基礎(chǔ)介紹的文章就介紹到這了,更多相關(guān)小程序宿主環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: