灰机APP更新日志/20200507

< 灰机APP更新日志 | Summerset 于3年前修改了此页面。
改动类型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的版本，字符串型。实际约定该字符串必为一个正整数。
注意，该节点实际上是一个函数。使用时请加括号进行取值。