微信宣佈小程序將可以在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組件使用心得