共计 1345 个字符，预计需要花费 4 分钟才能阅读完成。
微信宣布小程序将可以在 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 组件使用心得
