2.5 小程序提供的HTML支持和開放能力支持

本節會介紹一些簡單的小程序組件，這類組件有一個特點，就是它們本身并沒有什么使用的難點或使用的注意事項，可配置的內容也很少，卻是所有小程序中非常重要的一個部分。

這部分組件都是在小程序出現后新增加的一些組件，也正是這些組件為小程序本身帶來了更多的功能和更多的可能性。

2.5.1 開放數據域：open-data

open-data組件一般用于顯示用戶的昵稱、頭像、性別、地址、語言等內容。

為什么需要這樣的一個組件呢？主要是因為用戶的信息需要保密，getUserInfo這個API已經無法獲得用戶的相關信息了，大量用戶又會拒絕授權的方式，那么，如何保證顯示出用戶的頭像、昵稱等信息呢？答案就是開放數據域組件。

open-data基本的使用方法如下所示，這里實現了一個簡單的用戶頁面，通過兩個開放數據域open-data組件顯示了用戶的頭像和昵稱。

＜template＞
  ＜view class="userHeader"＞
    ＜view  style="position:  relative;width:  25vw;height:  25vw;border-radius:
15vw;overflow:hidden;left: 37.5vw;top: 10vw;"＞
      ＜open-data type="userAvatarUrl"＞＜/open-data＞
    ＜/view＞
    ＜view style="position: relative;text-align: center;top:15vw;"＞
      ＜open-data style="color:#fff;font-size: 30rpx" type="userNickName"＞
＜/open-data＞
    ＜/view＞
  ＜/view＞
＜/template＞

頁面可以增加一些簡單的樣式，如下所示。

＜style lang="less"＞
  .userHeader {
    width: 100vw;
    height: 60vw;
    background-color: #ababab;
  }
＜/style＞

這樣就完成了一個最簡單的用戶界面，效果如圖2-9所示。

圖2-9 用戶頁面效果

2.5.2 HTML等網頁支持：web-view

網頁組件可以說是小程序在發展中的一個妥協，小程序原本存在的意義是對微信中難用的HTML應用的一種優化替代，而如果可以使用網頁，那么就意味著大量的小程序還是會通過原有的網頁系統來實現一個“偽小程序”，這就使得原本具有體驗優勢的小程序成了雞肋，所以在一開始，小程序并沒有任何支持HTML打開網頁的需求。但最終小程序還是妥協了，推出了可以在小程序中進行網頁操作的webview組件。

但是整個web-view并不是一個完全開放的webview，小程序官方依然不推薦在不必要的情況下嵌入網頁，所以限制了對于頁面的地址訪問，我們無法訪問未經驗證歸屬權的域名地址，而且域名地址是需要HTTPS協議的。

這意味著，將web-view套一個殼就充當小程序瀏覽器或者將百度網頁套在小程序中充當百度搜索的小程序將不會存在，這也意味著小程序的違規行為將會非常容易監管，出現違規信息的網站內容一定是歸屬于這個小程序本身的。

驗證方法非常簡單，在后臺下載一個簡單的文本文件，并將其放置在自己服務器的根目錄中，通過路徑可以訪問到該文件的內容（也可以手動返回，一般為一個長度不等的字符串，一次性驗證，等待驗證成功后可以刪除）。

web-view組件的使用也非常簡單，如下所示。

＜web-view src="https://mp.weixin.qq.com/"＞＜/web-view＞

如果通過驗證了，可以正常訪問src中的網頁地址。當然不僅如此，為了方便與網頁的交互，以及小程序之間的數據傳輸和跳轉，小程序提供了JSSDK 1.3.2，其中的接口可以返回小程序頁面。

JS地址為https://res.wx.qq.com/open/js/jweixin-1.3.2.js，可以使用如下代碼引入。

＜script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
＞＜/script＞

引入該JavaScript文件后，網頁將會支持不同的API和小程序通信，如表2-11所示。

表2-11 網頁和小程序的跳轉

也就是說，可以通過引入該JavaScript文件來實現網頁和小程序的切換。一般而言，為了適應普通的網頁版本，人們需要先判斷是否是小程序的環境，進而可以使用如下代碼。

＜script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
＞＜/script＞

wx.miniProgram.getEnv（function（res）{
console.log（res.miniprogram）// true
if（res，miniprogram）{
    // 執行小程序部分
    wx.miniProgram.navigateTo（{url: '/path/index'}）
}else{
    // 執行普通網頁部分
}
}）.

雖然引入了JSSDK，但是微信小程序并不能像公眾號一樣支持JSSDK中所有的API，而只是支持一部分，如表2-12所示。

表2-12 小程序支持的JSSDK中的API

注意：雖然web-view在某些時候非常好用，但是這個組件并不支持個人開發者和針對海外用戶的小程序。

2.5.3 開發者的收入來源：ad

對于所有的小程序個人開發者而言，想要通過小程序盈利，有很多不同的方向，但其中有一條最方便的，就是小程序為開發者準備的廣告業務。

用戶在管理后臺登錄后，所使用小程序達到一定的條件，才可以打開流量主功能，并且申請在小程序的什么地方加入廣告（這樣廣告的配圖尺寸會存在變化）。個人需要提交個人資料，企業需要提交公戶或者代理等資料，待騰訊后臺審核通過后，會獲得一個unit-id，如圖2-10所示，就可以使用廣告組件了。

圖2-10 廣告組件

在自己的小程序中使用該組件也非常簡單，只需要單擊“獲取代碼”按鈕，如圖2-11所示，將產生的代碼段插入小程序合適的位置即可。

圖2-11 插入代碼

2.5.4 小程序引導關注公眾號：official-account

official-account組件是新推出的，用于推廣小程序和公眾號聯系的一個組件。這個組件的要求非常高，只有當小程序通過掃碼進入時才能顯示，用戶單擊才能快速關注公眾號，當然這個功能仍然需要在后臺設置，通過“設置”→“接口設置”→“公眾號關注組件”設置要展示的公眾號。

official-account的使用非常簡單，沒有任何屬性和配置，只需要在場景中引用如下代碼：

＜official-account＞＜/official-account＞

掃碼也同樣規定了相應的場景值，通過朋友圈轉發小程序碼的方式并不能觸發這個場景值，具體支持的場景值如下。

● 當小程序從掃二維碼場景（場景值1011）打開時。

● 當小程序從掃小程序碼場景（場景值1047）打開時。

● 當小程序從聊天頂部場景（場景值1089）中的‘最近使用’內打開時，若小程序之前未被銷毀，則該組件保持上一次打開小程序時的狀態。

● 當從其他小程序返回小程序（場景值1038）時，若小程序之前未被銷毀，則該組件保持上一次打開小程序時的狀態。

所有的場景值說明請在微信提供的網頁中查看：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html。

注意：official-account組件可以套用在原生組件中。