[填坑手册]小程序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…