微信宣布小程序?qū)⒖梢栽赑C端微信打開(kāi)后，智庫(kù)君就接到要求，需要兼容PC端小程序，一開(kāi)始以為官方已經(jīng)做了完美適配，不需要改什么，但當(dāng)本人下載內(nèi)測(cè)版開(kāi)始測(cè)試的時(shí)候，才發(fā)現(xiàn)或許坑還挺多的~~~

下面分享下本人“搬磚填坑”的全過(guò)程：
（以下都是PC端小程序特有的問(wèn)題，手機(jī)端正常）

先說(shuō)下使用流程

• 微信開(kāi)發(fā)者工具菜單欄點(diǎn)擊 設(shè)置->通用設(shè)置，在自動(dòng)預(yù)覽部分勾選“啟動(dòng) PC 端自動(dòng)預(yù)覽”。
• 使用自動(dòng)預(yù)覽功能，點(diǎn)擊 預(yù)覽->自動(dòng)預(yù)覽->編譯并預(yù)覽，成功的話(huà)將在微信 PC 版上自動(dòng)拉起小程序。

PC版打開(kāi)后就橫屏問(wèn)題

{
  "pages": [],
  "resizable":false,  //在這里設(shè)置false，使得小程序默認(rèn)手機(jī)尺寸
  "pageOrientation":"portrait", //這里默認(rèn)設(shè)置即可
  ...
}

PC版微信默認(rèn)打開(kāi)小程序是ipad版，這樣就會(huì)出現(xiàn)各種形變，布局錯(cuò)亂，這個(gè)可以在app.json進(jìn)行配置，靜止自動(dòng)旋轉(zhuǎn)，默認(rèn)手機(jī)豎屏樣子打開(kāi)。

頁(yè)面找不到問(wèn)題

這個(gè)問(wèn)題本人也找了很久，一直很納悶IDE工具和手機(jī)打開(kāi)看都沒(méi)什么問(wèn)題，用PC打開(kāi)小程序就出現(xiàn)頁(yè)面找不到的情況，大致報(bào)錯(cuò)是：

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沒(méi)配，或者頁(yè)面里面缺少page(),但這次詭異的地方是只有“PC版小程序”報(bào)這個(gè)錯(cuò)！后來(lái)分析問(wèn)題發(fā)現(xiàn)是：目前PC版小程序不能直接支持ES6，必須轉(zhuǎn)換成ES5，同時(shí)由于一些語(yǔ)法轉(zhuǎn)化不夠完善，特別是ES7中的await 和 async 導(dǎo)致轉(zhuǎn)化二次報(bào)錯(cuò)，這里就需要打開(kāi) “增強(qiáng)編譯” 配置。

打開(kāi)有CSS報(bào)錯(cuò)

因?yàn)槟壳癙C版小程序估計(jì)內(nèi)核的機(jī)制問(wèn)題，還只支持低版本的選擇器，如果你直接寫(xiě)小程序的標(biāo)簽，它無(wú)法識(shí)別，比如

.popCont navigator{   //navigator 標(biāo)簽是小程序里的，PC端無(wú)法支持
  width: 560rpx;
  height: 300rpx;
}
.popCont image{   //image 標(biāo)簽是小程序里的，PC端無(wú)法支持
  width: 560rpx;
  height: 300rpx;
}

但這些寫(xiě)法，其實(shí)在手機(jī)小程序和IDE工具里是完全正常的，PC版需要做兼容，改成class選擇器。

布局結(jié)構(gòu)混亂

如果遇到這種情況，會(huì)檢查一下是否使用屏幕尺寸（rpx）來(lái)計(jì)算布局，PC 上屏幕尺寸比窗口尺寸大，應(yīng)該使用窗口尺寸來(lái)計(jì)算。

小程序如何判斷是 PC 平臺(tái)？

通過(guò) getSystemInfo 官方接口（platform 是 windows）
通過(guò) UA（PC UA 包含 MiniProgramEnv/Windows）

微信官方PC版小程序內(nèi)測(cè)地址:

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

最新官方IDE調(diào)試工具

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

往期回顧：
[打怪升級(jí)]小程序評(píng)論回復(fù)和發(fā)帖功能實(shí)戰(zhàn)（二）
[打怪升級(jí)]小程序評(píng)論回復(fù)和發(fā)貼功能實(shí)戰(zhàn)（一）
[填坑手冊(cè)]小程序Canvas生成海報(bào)（一）
[拆彈時(shí)刻]小程序Canvas生成海報(bào)（二）
[填坑手冊(cè)]小程序目錄結(jié)構(gòu)和component組件使用心得

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/25234.html