发表日期:2019-11 文章编辑:小灯 浏览次数:7704
微信宣布小程序将可以在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 导致转化二次报错,这里就需要打开 “增强编译” 配置。
因为目前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)
https://dldir1.qq.com/weixin/...
https://developers.weixin.qq....
往期回顾:
[打怪升级]小程序评论回复和发帖功能实战(二)
[打怪升级]小程序评论回复和发贴功能实战(一)
[填坑手册]小程序Canvas生成海报(一)
[拆弹时刻]小程序Canvas生成海报(二)
[填坑手册]小程序目录结构和component组件使用心得
日期:2019-11 浏览次数:5338
日期:2019-11 浏览次数:11795
日期:2019-11 浏览次数:4177
日期:2019-11 浏览次数:5192
日期:2019-11 浏览次数:5136
日期:2019-11 浏览次数:6981
日期:2019-11 浏览次数:5046
日期:2019-11 浏览次数:15588
日期:2019-11 浏览次数:4542
日期:2019-11 浏览次数:6322
日期:2019-11 浏览次数:5161
日期:2019-11 浏览次数:4407
日期:2019-11 浏览次数:10512
日期:2019-11 浏览次数:8154
日期:2019-11 浏览次数:4886
日期:2019-11 浏览次数:4142
日期:2019-11 浏览次数:8766
日期:2019-11 浏览次数:4475
日期:2019-11 浏览次数:4661
日期:2019-11 浏览次数:4707
日期:2019-11 浏览次数:4295
日期:2019-11 浏览次数:4856
日期:2019-11 浏览次数:10090
日期:2019-11 浏览次数:5248
日期:2019-11 浏览次数:5208
日期:2019-11 浏览次数:4708
日期:2019-11 浏览次数:12101
日期:2019-11 浏览次数:7188
日期:2019-11 浏览次数:7703
日期:2019-11 浏览次数:4731
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.