[填坑手冊]小程序PC版來了，如何作PC端的兼容？！

時間 2019-11-07

標籤手冊程序如何端的兼容简体版

原文原文鏈接

微信宣佈小程序將能夠在PC端微信打開後，智庫君就接到要求，須要兼容PC端小程序，一開始覺得官方已經作了完美適配，不須要改什麼，但當本人下載內測版開始測試的時候，才發現或許坑還挺多的~~~html

下面分享下本人「搬磚填坑」的全過程： （如下都是PC端小程序特有的問題，手機端正常）json

先說下使用流程

微信開發者工具菜單欄點擊設置->通用設置，在自動預覽部分勾選「啓動 PC 端自動預覽」。
使用自動預覽功能，點擊預覽->自動預覽->編譯並預覽，成功的話將在微信 PC 版上自動拉起小程序。

PC版打開後就橫屏問題

{
  "pages": [],
  "resizable":false,  //在這裏設置false，使得小程序默認手機尺寸
  "pageOrientation":"portrait", //這裏默認設置便可
  ...
}
複製代碼

PC版微信默認打開小程序是ipad版，這樣就會出現各類形變，佈局錯亂，這個能夠在app.json進行配置，靜止自動旋轉，默認手機豎屏樣子打開。小程序

頁面找不到問題

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

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 致使轉化二次報錯，這裏就須要打開 「加強編譯」 配置。bash

打開有CSS報錯

由於目前PC版小程序估計內核的機制問題，還只支持低版本的選擇器，若是你直接寫小程序的標籤，它沒法識別，好比微信

.popCont navigator{   //navigator 標籤是小程序裏的，PC端沒法支持
  width: 560rpx;
  height: 300rpx;
}
.popCont image{   //image 標籤是小程序裏的，PC端沒法支持
  width: 560rpx;
  height: 300rpx;
}
複製代碼

但這些寫法，其實在手機小程序和IDE工具裏是徹底正常的，PC版須要作兼容，改爲class選擇器。微信開發

佈局結構混亂

若是遇到這種狀況，會檢查一下是否使用屏幕尺寸（rpx）來計算佈局，PC 上屏幕尺寸比窗口尺寸大，應該使用窗口尺寸來計算。app

小程序如何判斷是 PC 平臺？async

經過 getSystemInfo 官方接口（platform 是 windows）經過 UA（PC UA 包含 MiniProgramEnv/Windows）工具

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

dldir1.qq.com/weixin/Wind…