APP内容被手机默认菜单屏蔽?教你一种解决方法!

作者 : IT 大叔 本文共2085个字,预计阅读时间需要6分钟 发布时间: 2020-09-21

 

快速应用程序的应用程序菜单会按照快速应用程序规范1070和更高版本中的规定强制显示。但是,在某些快速的应用程序页面上,某些内容可能会被应用程序菜单阻止。例如,下图中的应用程序菜单阻止了登录条目。尽管菜单配置为可移动,但用户不知道他们可以移动它。结果,用户体验受到影响。 提供以下解决方案来解决此问题:
APP内容被手机默认菜单屏蔽?教你一种解决方法!插图

  • 将菜单与显示的任何内容分开
  • 隐藏菜单
  • 添加指示菜单可移动的消息

解决方案1:将菜单与显示的任何内容分开

为快速应用程序配置标题栏,以在应用程序菜单中保留空白行。该解决方案的缺点是浪费了一行空间。
打开manifest.json文件,并将titleBar的值更改true

"display": {
    "fullScreen": false,
    "titleBar": "true",
    "menu": false,
    "menuBarData": {
        "draggable": true
    },
    "orientation": "portrait"
}

下图显示了修改结果。
APP内容被手机默认菜单屏蔽?教你一种解决方法!插图(2)

解决方案2:隐藏菜单

软件包名称提供给华为,华为将专门配置快速应用程序以不显示菜单。该解决方案的缺点如下:从快速应用程序默认菜单访问的功能(例如在主屏幕上添加图标和访问快速应用程序中心)将丢失。这些功能有助于提高用户保留率,并使用户能够快速访问Quick App Center以体验更多服务。因此,除非另有说明,否则不建议使用此解决方案。

解决方案3:添加一条消息,指示菜单是可移动的

显示菜单并通过参考本机应用程序中使用的遮罩层提示用户菜单可移动。
此解决方案的实现如下: 在如下的模板代码中,红色代码定义了蒙版的布局,而自定义子组件用于定义tipContentemitEvt。使用自定义组件的优势在于它们使代码清晰,简洁和可读。
APP内容被手机默认菜单屏蔽?教你一种解决方法!插图(4)

<import name="menu_tip" src="./menutip.ux"></import>
<template>
     <div>
        <menu_tip id=“tip” if={{menuTipshow}} tip-content={{menutipContent}} onemit-evt=“emitHideTipMenuView”>      //tip component
        </menu_tip>
        <web src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart"
          onpagefinish="onPageFinish" onmessage="onMessage"
            ontitlereceive="onTitleReceive" onerror="onError"
            wideviewport="true" overviewmodeinload="true"
            useragent="Mozilla/5.0 (Linux; Android 10; FRO-AN00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36"
            id="web"
           multiwindow="true" supportzoom="true" allowthirdpartycookies="{{allowThirdPartyCookies}}">
        </web>
    </div>
</template>

调用快速应用程序的数据存储API,并使用onInit()数据库中查询menutipflag的值。如果值为false,则用户首次打开快速应用程序。然后,将遮罩显示给用户。

onInit: function () {
    this.getMenuTipFlag();
},
getMenuTipFlag() {
    var that = this;
    storage.get({
        key: 'menutipflag',
        success: function (data) {
            console.log(" storage.get success data=" + data);
            that.menutipflag = data;
        },
        fail: function (data, code) {
            console.log(" storage.get fail, code = " + code);
        }
    });
},

根据掩码GUI设计和快速应用程序的服务逻辑,在适当的时间将相关变量保存到数据库中。在此示例中,该遮罩设计为在用户点击“ 我得到”时消失,而menutipflag的值设置为true并保存到数据库。

saveTipFlag() {
    this.menutipflag = true;
    storage.set({
        key: 'menutipflag',
        value: 'true',
        success: function (data) {
            console.log("saveTipFlag");
        },
        fail: function (data, code) {
            console.log("saveTipFlag fail, code = " + code);
        }
    })
},

总之,解决方案3是这三个选项中的最佳解决方案,因为它避免了解决方案1和解决方案2的缺点,并且可用于在快速应用程序GUI上为组件或功能添加提示消息。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » APP内容被手机默认菜单屏蔽?教你一种解决方法!

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论