抽屉菜单(不知道为什么叫这个名字)。在app中使用非常频繁 。appcan官网IDE中内置了该模板,我们仅仅须要新建appcan页面,选择“抽屉”就能够实现。
一、首先我们创建leftmenu页面。选择布局结构“抽屉”。内容为空,该页面为不加入不论什么内容 。点击完毕后,观察IDE左側树形结构上会生成3个页面各自是 leftmenu.html , leftmenu_drawer.html, leftmenu_content.html 。
然后在本地进行打包測试,我们会发现1个小问题,默认情况下 弹出的左側抽屉菜单没有图标,如图
没有图标,仅仅有文字,打开调试信息发现
有若干报错,全是找不到资源文件。自己细致找一下ide下的目录会发现全部要用的资源文件都在leftmenu_drawer目录以下。这个是ide的错。
二、然后我们在用真机測试的时候会发现一个比較难堪的事情 ,当你点击 “回退”键的时候,不是先弹出一个对话框问你是否退出程序。而是直接把左側的抽屉菜单弹出来了 !
在leftmenu.html 页面中。记住不是程序启动的第一个页面leftmenu_drawer.html ,而是 在 leftmenu_drawer.html 的 appcan.ready()事件中 进行 appcan.window.open() 事件的页面 。我的程序中是 appcan.window.open("leftmenu", "leftmenu.html", 10, 256); 所以我要改动的就是 leftmenu.html 。打开它 找到 在 </body> 与 </html> 之间 找到 appcan.ready()事件 ,在此事件的最后一行,调用自己定义的函数 addBackListener(); 接着 在appcan.ready()外面 。写addBackListener() 函数的内容,例如以下:
function addBackListener()
{
//能够在这里加一句alter来推断是否被调用
var plat = uexWidgetOne.getPlatform(); //推断平台类型
if(plat)
{
uexWindow.onKeyPressed=function(keyCode)
{
//alert("onKeyPressed keyCode:" + keyCode);
if(keyCode==0)
uexWidgetOne.exit(); //关键在这句 。假设遇到返回键。就触发结束应用事件 。据说在早期IDE中须要在线打包才干生效。
//如今的版本号 v3.2.1 ,測试本地打包,该函数有效 。
}。
可是在创建页面后,会遇到两个恶心的问题须要手工解决 ,例如以下。
一、首先我们创建leftmenu页面。选择布局结构“抽屉”。内容为空,该页面为不加入不论什么内容 。点击完毕后,观察IDE左側树形结构上会生成3个页面各自是 leftmenu.html , leftmenu_drawer.html, leftmenu_content.html 。
这三个页面中 leftmenu_drawer.html 是第一个被载入的初始页面 ,接着我们须要改动config文件里的默认页面属性。将leftmenu_drawer.html作为默认页面 。
然后在本地进行打包測试,我们会发现1个小问题,默认情况下 弹出的左側抽屉菜单没有图标,如图
没有图标,仅仅有文字,打开调试信息发现
有若干报错,全是找不到资源文件。自己细致找一下ide下的目录会发现全部要用的资源文件都在leftmenu_drawer目录以下。这个是ide的错。
解决的方法非常easy,把它拷贝到 leftmenucss下就能解决这个问题.
二、然后我们在用真机測试的时候会发现一个比較难堪的事情 ,当你点击 “回退”键的时候,不是先弹出一个对话框问你是否退出程序。而是直接把左側的抽屉菜单弹出来了 !
接着你再点击“回退”键才会提示你“是否退出”应用 !
这个感觉太糟糕了 。经过看论坛曾经的帖子,解决的方法例如以下:
在leftmenu.html 页面中。记住不是程序启动的第一个页面leftmenu_drawer.html ,而是 在 leftmenu_drawer.html 的 appcan.ready()事件中 进行 appcan.window.open() 事件的页面 。我的程序中是 appcan.window.open("leftmenu", "leftmenu.html", 10, 256); 所以我要改动的就是 leftmenu.html 。打开它 找到 在 </body> 与 </html> 之间 找到 appcan.ready()事件 ,在此事件的最后一行,调用自己定义的函数 addBackListener(); 接着 在appcan.ready()外面 。写addBackListener() 函数的内容,例如以下:
function addBackListener()
{
//能够在这里加一句alter来推断是否被调用
var plat = uexWidgetOne.getPlatform(); //推断平台类型
if(plat)
{
uexWindow.onKeyPressed=function(keyCode)
{
//alert("onKeyPressed keyCode:" + keyCode);
if(keyCode==0)
uexWidgetOne.exit(); //关键在这句 。假设遇到返回键。就触发结束应用事件 。据说在早期IDE中须要在线打包才干生效。
//如今的版本号 v3.2.1 ,測试本地打包,该函数有效 。
}
//alert("addBackListener setReportKey");
uexWindow.setReportKey(0,1);
}
}。