[填坑手冊]小程式PC版來了，如何做PC端的相容？！

微信宣佈小程式將可以在PC端微信開啟後，智庫君就接到要求，需要相容PC端小程式，一開始以為官方已經做了完美適配，不需要改什麼，但當本人下載內測版開始測試的時候，才發現或許坑還挺多的~~~

下面分享下本人“搬磚填坑”的全過程： （以下都是PC端小程式特有的問題，手機端正常）

先說下使用流程

• 微信開發者工具選單欄點選 設定->通用設定，在自動預覽部分勾選“啟動 PC 端自動預覽”。
• 使用自動預覽功能，點選 預覽->自動預覽->編譯並預覽，成功的話將在微信 PC 版上自動拉起小程式。

PC版開啟後就橫屏問題

{
  "pages": [],
  "resizable":false,  //在這裡設定false，使得小程式預設手機尺寸
  "pageOrientation":"portrait", //這裡預設設定即可
  ...
}
複製程式碼

PC版微信預設開啟小程式是ipad版，這樣就會出現各種形變，佈局錯亂，這個可以在app.json進行配置，靜止自動旋轉，預設手機豎屏樣子開啟。

頁面找不到問題

這個問題本人也找了很久，一直很納悶IDE工具和手機開啟看都沒什麼問題，用PC開啟小程式就出現頁面找不到的情況，大致報錯是：

page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task.
複製程式碼

一般這種情況以往是 app.json沒配，或者頁面裡面缺少page(),但這次詭異的地方是隻有“PC版小程式”報這個錯！後來分析問題發現是：目前PC版小程式不能直接支援ES6，必須轉換成ES5，同時由於一些語法轉化不夠完善，特別是ES7中的await 和 async 導致轉化二次報錯，這裡就需要開啟 “增強編譯” 配置。

開啟有CSS報錯

因為目前PC版小程式估計核心的機制問題，還只支援低版本的選擇器，如果你直接寫小程式的標籤，它無法識別，比如

.popCont navigator{   //navigator 標籤是小程式裡的，PC端無法支援
  width: 560rpx;
  height: 300rpx;
}
.popCont image{   //image 標籤是小程式裡的，PC端無法支援
  width: 560rpx;
  height: 300rpx;
}
複製程式碼

但這些寫法，其實在手機小程式和IDE工具裡是完全正常的，PC版需要做相容，改成class選擇器。

佈局結構混亂

如果遇到這種情況，會檢查一下是否使用螢幕尺寸（rpx）來計算佈局，PC 上螢幕尺寸比視窗尺寸大，應該使用視窗尺寸來計算。

小程式如何判斷是 PC 平臺？

通過 getSystemInfo 官方介面（platform 是 windows） 通過 UA（PC UA 包含 MiniProgramEnv/Windows）

微信官方PC版小程式內測地址:

dldir1.qq.com/weixin/Wind…

最新官方IDE除錯工具

developers.weixin.qq.com/miniprogram…

往期回顧：
[打怪升級]小程式評論回覆和發貼功能實戰（二）
[打怪升級]小程式評論回覆和發貼功能實戰（一）
[填坑手冊]小程式Canvas生成海報（一）
[拆彈時刻]小程式Canvas生成海報（二）
[填坑手冊]小程式目錄結構和component元件使用心得