簡(jiǎn)單介紹一下小程序的插件

插件？納尼？npm包么？

未接觸過(guò)小程序的插件時(shí)，以為它與 npm 包類(lèi)似，我們可以封裝各種各樣便捷的功能，提供給他人使用。

經(jīng)過(guò)這幾天接觸，竟有了追攀更覺(jué)相逢晚的趕腳，發(fā)現(xiàn)小程序的插件真真是個(gè)好東西。同時(shí)，也發(fā)現(xiàn)它與傳統(tǒng)意義上的插件還是有很大差別的。小程序的插件， 在一定程度上我們可以理解為是一個(gè)微服務(wù)。

微信小程序的插件功能更偏向于一個(gè)具體的行業(yè)服務(wù)，例如快遞行業(yè)，如果我們有相關(guān)接口，我們可以開(kāi)發(fā)一個(gè)快遞查詢(xún)插件，這樣的話(huà)，一些電商服務(wù)的小程序或者其它對(duì)快遞查詢(xún)有需求的小程序就都可以接入我們的插件了。

官網(wǎng)中對(duì)小程序插件這樣介紹

插件，是可被添加到小程序內(nèi)直接使用的功能組件。開(kāi)發(fā)者可以像開(kāi)發(fā)小程序一樣開(kāi)發(fā)一個(gè)插件，供其他小程序使用。同時(shí)，小程序開(kāi)發(fā)者可直接在小程序內(nèi)使用插件，無(wú)需重復(fù)開(kāi)發(fā)，為用戶(hù)提供更豐富的服務(wù)。

小程序開(kāi)發(fā)者可便捷地把插件添加到自己的小程序內(nèi)，豐富小程序的服務(wù)。當(dāng)用戶(hù)在使用小程序時(shí)，將可以在小程序內(nèi)使用插件提供的服務(wù)。

插件是對(duì)一組 js 接口、自定義組件或頁(yè)面的封裝，用于嵌入到小程序中使用。插件不能獨(dú)立運(yùn)行，必須嵌入在其他小程序中才能被用戶(hù)使用；而第三方小程序在使用插件時(shí)，也無(wú)法看到插件的代碼。因此，插件適合用來(lái)封裝自己的功能或服務(wù)，提供給第三方小程序進(jìn)行展示和使用。

插件開(kāi)發(fā)者可以像開(kāi)發(fā)小程序一樣編寫(xiě)一個(gè)插件并上傳代碼，在插件發(fā)布之后，其他小程序方可調(diào)用。小程序平臺(tái)會(huì)托管插件代碼，其他小程序調(diào)用時(shí)，上傳的插件代碼會(huì)隨小程序一起下載運(yùn)行。

相對(duì)于普通 js 文件或自定義組件，插件擁有更強(qiáng)的獨(dú)立性，擁有獨(dú)立的 API 接口、域名列表等，但同時(shí)會(huì)受到一些限制，如一些 API 無(wú)法調(diào)用或功能受限。對(duì)于一些特殊的接口，如 wx.login 和 wx.requestPayment ，雖然插件不能直接調(diào)用，但可以使用 插件功能頁(yè) 來(lái)間接實(shí)現(xiàn)。

有沒(méi)有好強(qiáng)大好邪惡的感覺(jué)～

插件的使用

添加插件

• 插件的開(kāi)發(fā)和使用自小程序基礎(chǔ)庫(kù)版本 1.9.6 開(kāi)始支持。

• 每個(gè)小程序，最多可以添加5個(gè)插件

• 在使用插件前，首先要在小程序管理后臺(tái)的“設(shè)置-第三方服務(wù)-插件管理”中添加插件。開(kāi)發(fā)者可登錄小程序管理后臺(tái)，通過(guò) appid 查找插件并添加。如果插件無(wú)需申請(qǐng)，添加后可直接使用；否則需要等待插件所有者同意申請(qǐng)后，方可在小程序中使用相應(yīng)的插件。

引入插件代碼包

使用插件前，使用者要在 app.json 中聲明需要使用的插件

如上例所示， plugins 定義段中可以包含多個(gè)插件聲明，每個(gè)插件聲明以一個(gè)使用者自定義的插件引用名作為標(biāo)識(shí)，并指明插件的 appid 和需要使用的版本號(hào)。其中，引用名（如上例中的 myPlugin）由使用者自定義，無(wú)需和插件開(kāi)發(fā)者保持一致或與開(kāi)發(fā)者協(xié)調(diào)。在后續(xù)的插件使用中，該引用名將被用于表示該插件。

使用插件中的自定義組件

使用插件提供的自定義組件，和使用普通自定義組件的方式相仿。在 json 文件定義需要引入的自定義組件時(shí)，使用 plugin:// 協(xié)議指明插件的引用名和自定義組件名，例如：

{
    "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
    }}

出于對(duì)插件的保護(hù)，插件提供的自定義組件在使用上有一定的限制：

• 默認(rèn)情況下，頁(yè)面中的 this.selectComponent 接口無(wú)法獲得插件的自定義組件實(shí)例對(duì)象；

• wx.createSelectorQuery 等接口的 >>> 選擇器無(wú)法選入插件內(nèi)部。

• 使用插件的頁(yè)面

  <navigator url="plugin://myPlugin/hello-page">
      Go to pages/hello-page!</navigator>

  • 插件的頁(yè)面從小程序基礎(chǔ)庫(kù)版本 2.1.0 開(kāi)始支持。

  • 需要跳轉(zhuǎn)到插件頁(yè)面時(shí)，url 使用 plugin:// 前綴，形如 plugin://PLUGIN_NAME/PAGE , 如：

• 插件js接口調(diào)用

  var myPluginInterface = requirePlugin('myPlugin');
  
  myPluginInterface.hello(); 
  var myWorld = myPluginInterface.world;

  • 以上就是如何使用插件了，是不是很簡(jiǎn)單呢。不要以為開(kāi)發(fā)一個(gè)插件會(huì)有多難，那僅僅比使用起來(lái)，難了那么一點(diǎn)點(diǎn)。

    

  • 使用插件的 js 接口時(shí)，可以使用 requirePlugin 方法。例如，插件提供一個(gè)名為 hello 的方法和一個(gè)名為 world 的變量，則可以像下面這樣調(diào)用：

插件的開(kāi)發(fā)

開(kāi)放范圍：

• 企業(yè)、媒體、政府及其他組織主體。

創(chuàng)建插件項(xiàng)目

• 略。(官網(wǎng)相關(guān)介紹還是很棒的，此處就不多做贅述勉填篇幅了，多聊點(diǎn)有用的東西吧)

按照官網(wǎng)的步驟新建插件項(xiàng)目，你會(huì)得到這樣一個(gè)目錄結(jié)構(gòu)：

三個(gè)文件夾分別是doc、miniprogram、plugin和一個(gè)project.config.json文件。

• doc ：這份開(kāi)發(fā)文檔將展示在插件詳情頁(yè)，供其他開(kāi)發(fā)者在瀏覽插件和使用插件時(shí)進(jìn)行閱讀和參考。官網(wǎng)有提到。

• miniprogram ： 插件是用在小程序上的，那開(kāi)發(fā)的時(shí)候該如何測(cè)試呢。不用擔(dān)心，人家小程序團(tuán)隊(duì)肯定會(huì)想到并給予相應(yīng)的解決方法的。這不，miniprogram就是做這個(gè)用的。你可以把它看成是一個(gè)簡(jiǎn)單的小程序，專(zhuān)門(mén)供本地測(cè)試插件使用。

• plugin ：如你所想，這就是主角了。我們的插件。

• project.config.json : 項(xiàng)目配置文件。需要關(guān)注 compileType 字段，compileType == ‘plugin’ 時(shí)才能正常的使用插件項(xiàng)目。

用官方話(huà)講就是這樣的：

其中miniprogram 文件夾是一個(gè)普通小程序項(xiàng)目，用來(lái)編寫(xiě)小程序插件的使用 Demo，上傳插件代碼時(shí)這個(gè) Demo 會(huì)一起上傳，并作為小程序插件的發(fā)布的審核依據(jù)。

下面將重點(diǎn)介紹一下plugin文件。

• 配置文件plugin.json

  { "publicComponents": { "hello-component": "components/hello-component" }, "pages": { "hello-page": "pages/hello-page" }, "main": "index.js"}

  • 這個(gè)配置文件將向第三方小程序開(kāi)放一個(gè)自定義組件 hello-component，一個(gè)頁(yè)面 hello-page 和 index.js 下導(dǎo)出的所有 js 接口。

  • 假設(shè)有這樣的一個(gè)場(chǎng)景，插件內(nèi)的某個(gè)頁(yè)面A，只能通過(guò)插件的頁(yè)面B訪問(wèn)，其他方式無(wú)法訪問(wèn)，那么是否在plugin.json內(nèi)配置頁(yè)面B就可以，無(wú)需配置A頁(yè)面呢。答案是否定的，雖然在開(kāi)發(fā)者工具中可以使用相對(duì)路徑來(lái)跳轉(zhuǎn)，但在真機(jī)上是無(wú)法實(shí)現(xiàn)的。所以我想說(shuō)的是，插件中的頁(yè)面，想要正常展示，必須在plugin.json文件中注明。

  • 向第三方小程序開(kāi)放的所有自定義組件、頁(yè)面和 js 接口都必須在插件配置文件 plugin.json 列出，格式如下：

• 插件調(diào)用API的限制

  • 上文提到plugin目錄下的index.js文件是導(dǎo)出所有js接口的文件。但插件插件可以調(diào)用的 API 與小程序不同，主要有兩個(gè)區(qū)別：

    1.插件的請(qǐng)求域名列表與小程序相互獨(dú)立

    2.一些 API 不允許插件調(diào)用（這些函數(shù)不存在于 wx 對(duì)象下插件的自定義組件

• 插件可以定義若干個(gè)自定義組件，這些自定義組件都可以在插件內(nèi)相互引用。但提供給第三方小程序使用的自定義組件必須在配置文件中列出。

• 插件的頁(yè)面組件

  • 插件從小程序基礎(chǔ)庫(kù)版本 2.1.0 開(kāi)始支持頁(yè)面。插件可以定義若干個(gè)插件頁(yè)面，可以從本插件的自定義組件、其他頁(yè)面中跳轉(zhuǎn)，或從第三方小程序中跳轉(zhuǎn)。其中，提供給第三方小程序跳轉(zhuǎn)的頁(yè)面必須在配置文件中列出。

  • 自基礎(chǔ)庫(kù)版本 2.2.2 開(kāi)始，在插件自身的頁(yè)面中，插件還可以調(diào)用 wx.navigateTo 來(lái)進(jìn)行頁(yè)面跳轉(zhuǎn)， url 格式與使用 navigator 組件時(shí)相仿。

• 插件的接口

  • 插件可以在接口文件（在配置文件中指定，這里是index.js文件）中 export 一些 js 接口，供使用插件的第三方小程序調(diào)用。

• 預(yù)覽、上傳和發(fā)布

  • 插件可以像小程序一樣預(yù)覽和上傳，但插件沒(méi)有體驗(yàn)版。

  • 插件會(huì)同時(shí)有多個(gè)線上版本，由使用插件的小程序決定具體使用的版本號(hào)。

  • 手機(jī)預(yù)覽和提審插件時(shí)，會(huì)使用一個(gè)特殊的小程序來(lái)套用項(xiàng)目中 miniprogram 文件夾下的小程序，從而預(yù)覽插件。

  • （建議的方式）如果當(dāng)前開(kāi)發(fā)者有測(cè)試號(hào)，則會(huì)使用這個(gè)測(cè)試號(hào)；在測(cè)試號(hào)的設(shè)置頁(yè)中可以看到測(cè)試號(hào)的 appid 、 appsecret 并設(shè)置域名列表。

  • 否則，將使用“插件開(kāi)發(fā)助手”，它具有一個(gè)特定的 appid 。

• other

  • 插件在使用 wx.request 等 API 發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，將會(huì)額外攜帶一個(gè)簽名 HostSign ，用于驗(yàn)證請(qǐng)求來(lái)源于小程序插件。這個(gè)簽名位于請(qǐng)求頭中，形如：

    X-WECHAT-HOSTSIGN : {
      "noncestr": "NONCESTR",
      "timestamp": "TIMESTAMP",
      "signature": "SIGNATURE"
    }

插件的未來(lái)

筆者認(rèn)為首先插件應(yīng)該有獨(dú)立的功能，例如之前提到的快遞查詢(xún)，其次，插件有很大一部分會(huì)被用戶(hù)信息制約，所以，筆者認(rèn)為插件的功能也應(yīng)該跟用戶(hù)是弱相關(guān)的。一個(gè)小程序現(xiàn)在是支持5個(gè)插件的，在使用第三方的插件的時(shí)候需要申請(qǐng)，只有對(duì)方通過(guò)后才能使用。綜上，插件其實(shí)更適合獨(dú)立的小功能的場(chǎng)景，與主小程序也是獨(dú)立運(yùn)營(yíng)和管理的狀態(tài)。（祖哥，為啥要用筆者啊，我覺(jué)得這個(gè)“筆者”，額～，略顯風(fēng)騷?。?/p>

插件總體上有兩大優(yōu)勢(shì)：

1.通用性：在開(kāi)發(fā)者處理和開(kāi)發(fā)小程序特有的功能時(shí)，其他通用功能，可以直接拿別人的優(yōu)秀插件，接入自己的小程序，從而完善小程序的功能。而且，小程序的插件是通用的，任何想用的企業(yè)都能申請(qǐng)使用。對(duì)于開(kāi)發(fā)者而言，更是方便至極。

2.節(jié)約開(kāi)發(fā)成本：對(duì)于開(kāi)發(fā)者而言，插件功能的出現(xiàn)，能縮短小程序開(kāi)發(fā)周期，節(jié)約研發(fā)成本，給小程序開(kāi)發(fā)人員帶來(lái)更多 的靈活性。小程序插件功能可以說(shuō)是為了降低開(kāi)發(fā)者難度，減少開(kāi)發(fā)周期。

那么說(shuō)起對(duì)插件的未來(lái)，必定是瑕瑜互見(jiàn)的。極端點(diǎn)說(shuō)，插件發(fā)展到某一天，想要完成一個(gè)小程序，只需要找一些合適的插件，拼裝一下就是一個(gè)小程序了。也是因?yàn)檫@樣，肯定會(huì)有許多低端開(kāi)發(fā)者開(kāi)發(fā)出大量質(zhì)量粗糙的小程序版本出來(lái)。當(dāng)然這是極端的說(shuō)法，一個(gè)優(yōu)秀的小程序，必定含有自己定制的內(nèi)容，總的來(lái)說(shuō)，插件的出現(xiàn)是一個(gè)多方共贏的事情。插件對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，可以通過(guò)自己的技能+創(chuàng)意，實(shí)現(xiàn)一部分的變現(xiàn)；對(duì)于服務(wù)商來(lái)說(shuō)，不用重復(fù)造輪子，可以用更少的費(fèi)用、更少的時(shí)間做出更好的東西；對(duì)于微信來(lái)說(shuō)，可以完善整個(gè)生態(tài)鏈，讓更多的開(kāi)發(fā)者、創(chuàng)業(yè)者、服務(wù)者齊聚到小程序平臺(tái)，并為他們提供更好的服務(wù)和幫助。

其他

• 插件大小限制和小程序本身一樣。但插件使用方計(jì)算代碼包大小時(shí)會(huì)合并計(jì)入引用的插件大小。因此還是應(yīng)該盡量小。 ——來(lái)自網(wǎng)絡(luò)：小程序開(kāi)發(fā)者回復(fù)

• 小程序的 AppID 可以創(chuàng)建小程序插件項(xiàng)目，插件是獨(dú)立于小程序之外的，但是 AppID 是公用的，所以不要使用原有的小程序項(xiàng)目進(jìn)行插件開(kāi)發(fā)；

• 插件對(duì)標(biāo)一個(gè)微服務(wù)，開(kāi)發(fā)插件必須有 appid，所以，一個(gè)小程序?qū)?yīng)只能開(kāi)發(fā)一個(gè)插件；

• 開(kāi)通插件時(shí)的插件名稱(chēng)和頭像確定后是不允許修改的；會(huì)感覺(jué)插件貌似就是一個(gè)更小的小程序~~

• 目前沒(méi)有插件可供搜索的地方，期待微信的插件商城的出現(xiàn)；

• 插件發(fā)布需要通過(guò)微信審核，而且貌似審核更加嚴(yán)格，而且插件支持多個(gè)線上版本的同時(shí)存在；

• 插件的使用需要申請(qǐng)，插件開(kāi)發(fā)者同意后，使用方可以接入使用插件。這里多提一句，有一些插件的作者并未設(shè)置使用權(quán)限，自然使用者申請(qǐng)后就直接可以用了，否則在插件列表里會(huì)看到類(lèi)似審核中的字樣。

• 開(kāi)發(fā)插件時(shí)，在開(kāi)發(fā)者工具中看似正常運(yùn)行的代碼，跑在真機(jī)上也許就會(huì)給你一個(gè)驚喜。

• 以上就是本文的全部?jī)?nèi)容了。目前尚未在實(shí)踐中使用小程序插件，僅僅是后續(xù)工作有相關(guān)需要，算是技術(shù)儲(chǔ)備，估計(jì)如果真的在開(kāi)發(fā)中使用，依舊會(huì)有不少坑要踩。古語(yǔ)有云，沒(méi)有過(guò)不去的坎，只有過(guò)不完的坎。。。