改动类型app
更新日期2020-05-07
摘要可以在浏览器调试工具(F12)中增加新的UA模拟APP渲染情况。

使用app端专用的class进行样式定义。

新增全局变量“huijiApp”存储app相关信息。
下载地址前往下载页

5月7日的更新实际上是对4月28日更新的优化。

浏览器模拟APP

现在可以通过浏览器调试工具模拟APP端的渲染行为了。方法如下:

Huijiapp-20200507-debug-1.png Huijiapp-20200507-debug-2.png Huijiapp-20200507-debug-3.png

  • 以Chrome为例,首先开启调试工具(F12),并打开设备模拟开关(如上图1);
  • 在设备列表中选择编辑(图2);
  • 在新建设备窗口中选择添加自定义设备,并为该设备命名;宽度和高度可根据设备情况任意填写。设备宽度建议在400左右。在User Agent String一栏中填写huijiApp的UA,如下:
    • Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0 Huijiapp/5
  • 保存后在设备列表中选择刚才添加的设备并刷新页面。如果此时页面不再显示标题栏和footer,则设置成功。
  • 注意,该方法无法模拟mediawiki:app.css中的样式

app端专用class

在app端,<body>元素中会新增一个名为huijiapp的class。因此,你可以在mediawiki:common.css或任意其他样式表中使用该选择器作为前缀,以编写app端专用样式。这里所指的样式表包括但不限于mediawiki:app.css,零件中的css或html模板中的<style>标签。

需要注意的是,mediawiki:app.css总会在app端生效,无需增加该class。

huijiApp全局变量

新增一个huijiApp全局变量。各节点定义如下:

ua和uaLower
当前浏览器的ua及转为小写的ua。字符串型。
如果使用前文所述的F12模拟方法,则ua固定为你设置的ua。当app版本更新时请及时更换ua。
isAndroid, isIphone, isIpad
判断当前设备的类型,布尔型。
isApp
判断当前是否在APP中。布尔型。
注意,APP端的UA实际上是固定的,不会根据设备而改变。
version()
灰机App的版本,字符串型。实际约定该字符串必为一个正整数。
注意,该节点实际上是一个函数。使用时请加括号进行取值。
avatar