app.js - wap2app教程

app.js是为了弥补sitemap.json的格式限制，而提供的基于JavaScript的可编程增强方案。app.js里写的js代码，运行在本地一个独立的、不可见的Webview中（注意不是运行在首页Webview里）。开发者可以在app.js中随意写代码，比如通过plus.webview的api操作某个Webview。但app.js里有2个限制：

• 限制1. app.js里不能进行dom操作，因为app.js的运行环境里并没有真实dom存在；如果开发者要操作某个Webview里的dom，那么应该通过plus.webview的evalJS的api，给目标Webview注入一段js代码进行dom操作。

• 限制2. app.js里的所有js代码，都要归属于某个wap2app已经提供的事件属性框架内，由这些指定的事件来触发。

目前app.js中提供的事件包括：

• 注册应用：监听应用的启动及前后台切换
• 注册页面：监听页面的显示、关闭

注册应用

App()函数用来注册一个wap2app应用。

API介绍

App()函数接受一个object类型的appConfig参数，用来设定wap2app应用的生命周期函数，用法如下：

App(appConfig);

appConfig参数说明：

前台、后台定义： 当用户按了设备 Home 键，wap2app应用并没有直接销毁，而是进入了后台；当再次打开wap2app应用时，又会从后台进入前台。options参数说明：

App函数示例代码：

App({  
    options: {  
        debug: false  
    },  
    /**  
     * 当wap2app初始化完成时，会触发 onLaunch  
     */  
    onLaunch: function() {  
        console.log('launch');  
    },  
    /**  
     * 当wap2app启动，或从后台进入前台显示，会触发 onShow  
     */  
    onShow: function() {  
        console.log('show');  
    },  
    /**  
     * 当wap2app从前台进入后台，会触发 onHide  
     */  
    onHide: function() {  
        console.log('hide');  
    }  
});

注意：

• App()必须在app.js中注册，且不能注册多个

使用场景举例

开发者可以在应用启动（ap2app初始化完成）时，做一些系统级的工作，比如：

• 升级更新检查：若有新版本则提示用户下载，详细参考升级检测 - wap2app教程
• 推送消息监听：可以通过个推平台向用户发送推送消息，增加用户活跃度，详细参考消息推送 - wap2app教程
• 统计数据上报：可以在应用启动时，将用户相关信息上报服务端，实现用户活跃度、留存率的统计工作，详细参考统计报表 - wap2app教程

注册页面

Page() 函数用来注册一个页面。

API介绍

Page() 函数接受id、pageConfig 两个参数，指定页面的生命周期函数；用法如下：

Page(id,pageConfig);

id参数说明：

id是字符串类型，表示webview的id，对应sitemap.json中配置的"webviewId"属性值。

pageConfig参数说明：

pageConfig是object类型，可配置的参数如下：

Page函数示例代码：

Page('page1', {   
    /**  
     * 当页面显示时触发  
     */  
    onShow: function(options) {  
        console.log('page1 show');  
    },  
    /**  
     * 当页面关闭时触发  
     */  
    onHide: function() {  
        console.log('page1 hide');  
    }  
});

注意：

• Page()必须在app.js中注册，同一个页面不能注册多个

使用场景举例

需求：用户登录成功后跳转用户中心，从用户中心页面返回时，不需要再看到登录界面；

解决方案：可以在用户中心页面显示时，通过API关闭登录界面。

假设在sitemap.json中有如下配置：

{  
    "webviewId": "login",//登录  
    "matchUrls": [  
        {"pathname": "/login"}  
    ]  
},  
{  
    "webviewId": "usercenter",//用户中心  
    "matchUrls": [  
        {"pathname": "/usercenter"}  
    ]  
}

则可以在app.js中通过如下代码实现：

Page('usercenter', { //用户中心页面扩展  
    /**  
     * 用户中心页面显示时触发  
     */  
    onShow: function() {  
        //获取登录页的webview  
        var loginWebview = plus.webview.getWebviewById("login");  
        if(loginWebview){  
            loginWebview.close("none");//关闭登录页  
        }  
    }  
});