评论

[填坑手册]小程序PC版来了,如何做PC端的兼容?!

PC端打开小程序各种奇葩情况的处理~~~

微信宣布小程序将可以在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中的awaitasync 导致转化二次报错,这里就需要打开 “增强编译” 配置。

打开有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/Windows/WeChat2.7.0_beta.exe

最新官方IDE调试工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html

往期回顾:

[打怪升级]小程序评论回复和发帖功能实战(二)
[打怪升级]小程序评论回复和发贴组件实战(一)
[填坑手册]小程序Canvas生成海报(一)
[拆弹时刻]小程序Canvas生成海报(二)
[填坑手册]小程序目录结构和component组件使用心得

最后一次编辑于  2021-09-13  
点赞 7
收藏
评论

11 个评论

  • 静享华年🤪
    静享华年🤪
    2021-02-03

    我这边就更老火了,开启了增强编译,开发工具pc预览没有任何问题,不报错没提示信息,从pc端微信面板点击小程序一点反应都没有,完全无发排查原因

    2021-02-03
    赞同 3
    回复
  • Geefib
    Geefib
    2020-03-19

    PC上websocket的API会调也是凉凉的

    2020-03-19
    赞同 1
    回复
  • 木木
    木木
    2019-10-16

    目前兼容问题好像不是很大

    2019-10-16
    赞同 1
    回复 1
    • 游戏人生
      游戏人生
      2019-10-16
      嗯,PC上的canvas还有点问题,其他转成ES5就好了
      2019-10-16
      回复
  • xiaoxiao昱
    xiaoxiao昱
    2022-01-26

    你们还需要适配PC端小程序吗?我们不用管,只以真机为主

    2022-01-26
    赞同
    回复
  • xz
    xz
    2020-10-10

    你好,按照这样小程序还是在pc端打开只显示底部栏,页面无内容,求指教

    2020-10-10
    赞同
    回复
  • H
    H
    2020-07-13

    谢谢,正想找这个问题

    2020-07-13
    赞同
    回复 1
    • 游戏人生
      游戏人生
      2020-07-14
      不客气,写文章的目的就是为了帮助到更多人
      2020-07-14
      回复
  • 开欣鸭
    开欣鸭
    2020-07-03

    1、「应该使用窗口尺寸来计算。」 请问 在 webview的h5 页面 如何获取窗口尺寸呢

    2020-07-03
    赞同
    回复 4
    • 游戏人生
      游戏人生
      2020-07-03
      外部用wx.getSystemInfo(),H5就用原本的 window获取width
      2020-07-03
      回复
    • 开欣鸭
      开欣鸭
      2020-07-03回复游戏人生
      h5 使用window.screen.width 获取的也是电脑屏幕的尺寸, 不是小程序窗口的尺寸。
      2020-07-03
      回复
    • 游戏人生
      游戏人生
      2020-07-04
      内嵌web-view 在小程序中是撑满全屏的,你可以试下,所以获取的尺寸应该是一样的
      2020-07-04
      1
      回复
    • 开欣鸭
      开欣鸭
      2020-07-07回复游戏人生
      多谢。 使用了window.innerWidth
      2020-07-07
      回复
  • 程晋瑞
    程晋瑞
    2020-06-12

    rpx在pc上显示的过大,这个怎么处理的,有好的办法吗?同时要兼顾手机

    2020-06-12
    赞同
    回复 7
    • 游戏人生
      游戏人生
      2020-06-12
      在PC上过大? 你用了es5的混合编译了吗?  目前最新的PC版微信我这里没发现这个问题
      2020-06-12
      回复
    • 程晋瑞
      程晋瑞
      2020-06-16回复游戏人生
      哦 我知道了 你是用的竖屏  你换成横屏试试
      2020-06-16
      回复
    • 游戏人生
      游戏人生
      2020-06-17回复程晋瑞
      横屏。。。O-O ...你做的是小游戏吗?。。。还真没试过横屏,特别是PC端小程序的横屏
      2020-06-17
      回复
    • 程晋瑞
      程晋瑞
      2020-06-17回复游戏人生
      小程序
      2020-06-17
      回复
    • 游戏人生
      游戏人生
      2020-06-17回复程晋瑞
      先排查下问题
      1、打包的时候开了ES5了吗?
      2、PC端更新到最新了吗? 
      3、还是解决不了的,先确定下官方bug还是。。。建议提BUG给官方,记得贴图!~
      2020-06-17
      回复
    查看更多(2)
  • Boat
    Boat
    2019-11-12

    pc预览时登录请求会抛出异常,但手机和IDE是正常的,大家有遇到过这种情况吗

    2019-11-12
    赞同
    回复 3
    • Boat
      Boat
      2019-11-12
      fly.post以及then方法,在pc上是不是不支持?
      2019-11-12
      回复
    • 游戏人生
      游戏人生
      2019-11-18回复Boat
      fly.post? 我写的是源生的,你用的是第三方插件吗?
      2019-11-18
      回复
    • Boat
      Boat
      2019-11-18回复游戏人生
      用的mpvue,应该是微信返回的有问题
      2019-11-18
      回复
  • 邱一欢
    邱一欢
    2019-10-31

    pc上canvas 的鼠标事件应该怎么绑定, pc上预览鼠标操作画布没反应

    2019-10-31
    赞同
    回复 2

正在加载...

登录 后发表内容