app.js - wap2app教程 - DCloud问答

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参数说明：

参数	类型	说明
options	Object	配置全局参数
onLaunch	Function	生命周期函数，监听wap2app应用初始化；当wap2app初始化完成时触发，全局只触发一次。
onShow	Function	生命周期函数，监听 wap2app 应用显示；当 wap2app 从后台进入前台显示时触发。
onHide	Function	生命周期函数，监听 wap2app 应用隐藏；当 wap2app 从前台进入后台显示时触发。

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

参数	类型	默认值	说明
debug	Boolean	false	真机运行时，是否在 HBuilder 控制台打印日志。
lockOrientation	String	portrait-primary	锁定屏幕方向。更多可选值，参考锁定屏幕方向方法中的说明。

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类型，可配置的参数如下：

参数	类型	说明
onShow	Function	生命周期函数，监听webview显示；当对应webview窗口显示时触发。
onHide	Function	生命周期函数，监听webview关闭；当对应webview窗口关闭时触发。

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");//关闭登录页  
        }  
    }  
});