快速運行微信小程序 Mega 插件示例工程

這篇文章將介紹如何快速運行微信小程序 Mega 插件的示例工程。您將學習如何：

搭建與配置示例工程的開發環境。
運行示例的部分功能：使用 Mega 雲定位。
顯示建圖結果中的遮罩文件。

開始之前

參考文檔我的定位功能可以使用了嗎？確認定位庫已正確創建並添加地圖。

確認小程序主體爲企業主體

重要事項

Mega 小程序插件僅支持企業主體的微信小程序。個人主體類型的小程序無法使用 Mega 小程序插件。

需要確認在小程序後臺中設置 > 基本信息 > 主體信息 顯示爲 企業法人或個體工商戶。

由於 Mega 功能以小程序插件形式提供，您必須擁有一個企業主體的微信小程序作爲宿主環境。

即使僅爲了運行我們提供的示例工程，您也需要配置自己的微信小程序 AppID 才能在開發者工具中進行調試和預覽。

下載示例工程

前往開發工具下載頁面。
確認 EasyAR 隱私政策 後點擊下載。
下載完成後，在本地解壓縮 .zip 包。

配置示例工程

登錄微信小程序開發者工具。
使用微信小程序開發者工具導入示例項目。
- 打開開發者工具後，點擊導入按鈕，選擇本地解壓好的目錄。
- 確保 AppID 與 申請 Mega 許可證時填寫的 AppID 一致，開發模式爲小程序，點擊創建。
附註

AppID 不一致會導致許可證校驗不通過
配置 Mega 許可證及雲服務

打開文件 miniprogram/components/sample-data/easyar-settings.ts，根據準備工作中的許可證和服務信息填入該文件中的相應字段：
- Mega 許可證
```
/** 您的小程序 Mega 許可證 */
export const EasyARLicenseKey: string = "";
```
如何獲取 Mega 微信小程序許可證

在 EasyAR 開發中心 中選擇 Mega 微信小程序。

列表中應存在要使用的 Mega 微信小程序許可證。（若不存在可用許可證，請檢查您的賬號和用於創建 Mega 定位庫的賬號是否是同一個）

點擊小程序名稱可以獲取該小程序的 Mega 許可證（點擊右側複製，然後粘貼至 easyar-settings.ts 文件中作爲 EasyARLicenseKey 的值），並確認其關聯的 AppID 與您的微信小程序 AppID 完全一致。
- 雲服務 API Key 及 Seceret
```
/** 您的雲服務 API Key 及 Seceret */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
```
如何獲取雲服務 API Key 及 Seceret

在 EasyAR 開發中心 選擇 雲服務 API KEY。

若先前已經創建過雲服務 API Key 及 Seceret，此處可以依次點擊右側複製，粘貼至 easyar-settings.ts 文件中作爲 EasyARAPIKey 和 EasyARAPISecret 的值。

若之前沒有創建過雲服務 API Key 及 Seceret，可以通過以下方式創建：

在 EasyAR 開發中心 選擇 雲服務 API KEY > 創建 API KEY。

輸入應用名稱，選中需要使用的雲服務：Mega Block 和/或 Mega Landmark ，點擊確定。
- 雲服務 ServerAddress 及 AppID：
```
/** 您的 Mega 雲定位庫的 ServerAddress 及 AppID */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
```
如何獲取 Mega 雲定位庫的 ServerAddress 及 AppID

在 EasyAR 開發中心 選擇 Block 雲定位，之後選擇您的 Mega 雲定位服務組。

選擇您的 Mega 雲定位庫：

點擊密鑰，在下方依次獲取雲定位庫的 AppID 和 Server Address （點擊右側複製，然後粘貼至 easyar-settings.ts 文件中作爲 MegaTrackerAppID 和 MegaTrackerServerAddress 的值）。
使用建圖結果中的遮罩文件快速驗證

可以通過雲定位庫的 遮罩文件下載 入口下載建圖結果中的 glb 格式遮罩文件，顯示實景的三維白模，在快速運行時查看模型與實景的對齊效果，無需創建標註。

附註

此下載方式僅適用於建圖版本 9.6 及以上的建圖結果。

在雲定位庫中找到要測試的 Block，並在該行的操作列中點擊 遮罩文件下載。運行時應在這個 Block 對應的場景中測試。

在彈窗中選擇 低精度 並點擊對應的下載按鈕，以減少手機端加載和渲染的開銷。

將下載的 glb 文件放到小程序工程目錄的 assets 目錄下（示例工程中即 miniprogram/assets/），保留模型原有的位置、旋轉和縮放，使用其普通可見材質顯示白模。

示例工程已經內置遮罩文件的加載、顯示和釋放邏輯。只需將下載的 glb 文件（例如 occlusion_mesh_sd.glb）放到 miniprogram/assets/ 目錄下，然後在 miniprogram/components/sample-easyar-mega/index.ts 的 sampleAssets.occlusionMesh.src 中填寫相對於小程序工程根目錄的路徑：
```
src: "assets/occlusion_mesh_sd.glb",
```
保留 sampleAssets.occlusionMesh 的 assetId、type 和 options 不變。運行示例後，在頁面中打開 遮罩文件 開關即可查看模型。

實機運行示例

點擊小程序開發工具上方欄的實機預覽按鈕，通過掃描二維碼加載到開發用的手機。

注意

不能在開發工具上直接模擬運行帶有 AR 功能的 xr-frame 組件。

附註

當您在微信開發者工具中首次運行示例項目時，如果尚未獲得插件權限，工具通常會彈窗提示插件未授權。可以通過微信開發者工具自動授權，或參考插件接入流程
點擊 EasyAR Mega Samples 進入示例項目的 AR 場景。

附註

若無法進入示例項目的 AR 場景，可能是由於當前設備不支持微信的視覺算法組件 VisionKit，具體請參考機型限制。
屏幕中提示 EasyAR Session is initializing 表示微信平面檢測正在初始化。

提示

確保在光線充足的環境下測試，避開大面積純色牆面或純色地板。

對着地面或其他平面勻速左右擺動以加快這個過程。
初始化完成後，將手機豎直使相機拍到正常的現實畫面，當定位成功，Debug 信息中出現 Found 字樣，並且右下方的狀態指示物由白色變爲綠色。
查看遮擋效果

完成前面的遮罩文件顯示配置後，模型加載完成併成功定位到對應的 Block 時，可以看到疊加在相機畫面中的三維白模。