微信宣布小程序將可以在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版小程序內測地址:

https://dldir1.qq.com/weixin/...

最新官方IDE調試工具

https://developers.weixin.qq....

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://m.junxiaosheng.cn/25234.html