Monaca 应用程序在仪表板预览中工作，但不适用于 Android 6 手机

Posted 2023-05-06

【中文标题】Monaca 应用程序在仪表板预览中工作，但不适用于 Android 6 手机

【英文标题】：Monaca app working in dashboard preview but not on Android 6 phone

【发布时间】：2017-09-10 17:58:32

【问题描述】：

我正在尝试修改 Onsen-UI 的基本待办事项列表示例。

我在菜单中添加了一个新按钮。

<ons-toolbar-button id="resptab" >
    <ons-icon icon="ion-pie-graph" size="28px"></ons-icon>
    Table
</ons-toolbar-button>

还有一个包裹列表的导航器

<ons-splitter id="splitter">
    <ons-splitter-side id="splitter-menu" page="menu.html" 
        side="left"  collapse swipeable>
    </ons-splitter-side>
    <ons-splitter-content>
        <ons-navigator id="myNavigator" animation="slide" page="list.html"/>
    </ons-splitter-content>
</ons-splitter>

我正在通过事件侦听器从脚本推送新页面

document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

还有一个函数

todo.setRespTable = function() 
    ons.notification.prompt('Switch to responsive table view',
        title: 'Responsive Table',
        cancelable: true,

        callback: function(label) 
            document.querySelector('#myNavigator').pushPage('table.html')
        .bind(this)
    );    

在我的桌面仪表板中使用 Preview 一切正常，但是当我在 Galaxy android 6 手机上使用 Monaca Debugger 尝试它时，它失败，日志中显示 querySelector 是 null 的错误

我还注意到，当我在 Android 手机上运行应用程序时，菜单中没有显示上述按钮，而 - 再次 - 我可以从仪表板预览中看到它。

【参考方案1】：

通过用菜单项替换按钮解决了这两个问题

<ons-list>
    <ons-list-item data-filter="all" tappable>All</ons-list-item>
    <ons-list-header>Status</ons-list-header>
    <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
    <ons-list-item data-filter="completed">Completed</ons-list-item>
    <ons-list-header>Responsive</ons-list-header>
    <ons-list-item id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>RxTable</ons-list-item>        
</ons-list>

并通过在菜单初始化中设置事件处理程序

document.addEventListener('init', function(event) 
    var view = event.target.id;
    if (view === 'menu' || view === 'list') 
        todo[view + 'Init'](event.target);
    ;
, false);

哪个调用

todo.menuInit = function(target) 
    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));     

在article的末尾有对应版本的OnsenUI with React，下面是渲染函数的摘录：

<Page>
    <List dataSource=['Searching', 'Lists', 'Twitting', 'Google Drive','Settings']
    renderRow=(title) => (
        <ListItem key=title 
        onClick=() => this.hide2title(title) tappable>title
        </ListItem>
    )/>
</Page>

在后一种情况下，请注意将值传递给方法的数组函数。