DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-09-14 16:48
  • 更新:2020-06-09 09:38
  • 阅读:60281

app.js - wap2app教程

分类: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参数说明:

参数 类型 说明
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");//关闭登录页  
        }  
    }  
});
7 关注 分享
Trust 赵梦欢 [已删除] My_Yoo m***@vip.qq.com w***@163.com n***@abrasivestocks.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 1***@qq.com :
请问解决了吗
2020-06-09 09:38
1***@qq.com

1***@qq.com

回复 3***@qq.com :
我也遇到了这个问题,获取不到首页的webviewid,请问解决了吗
2020-06-08 09:14
拓荒

拓荒

打开用户中心,需要登录,然后跳转到登录页面,登录成功后返回到用户中心怎么出发用户中心的某个事件?好像返回到一个页面这个页面的onShow不会执行。有什么办法监听返回到了某个页面吗?
2020-03-29 20:28
3***@qq.com

3***@qq.com

wap2app设置底部选项卡,默认进入首页,首页的show执行一次,但是在onshow中获取webview对象,获取不到。
切换选项卡,其他的页面onshow都能正常执行,切换回首页,onshow不再执行。
这也就导致,我想拓展首页的功能,在onshow中写不了代码,连自定义刷新都加不上。
2020-02-24 14:17
苏辛弘

苏辛弘

怎么触发手势事件呢?
2019-11-22 10:09
4***@qq.com

4***@qq.com

试下看可行
2019-03-11 12:13
4***@qq.com

4***@qq.com

在App.js注册一个page后,为什么不执行onshow事件,onhide事件??(在app.js后应该是可以注册两个以上的page吧)
2019-03-03 10:43
5***@qq.com

5***@qq.com

回复 1***@qq.com :
转换下,老铁console.log(JSON.stringify(你的obj));
2018-11-04 10:29
菜鸡

菜鸡

回复 1***@qq.com :
JSON.stringify(data)了解下?
chrome://inspect了解下?
2018-10-17 10:09
1***@qq.com

1***@qq.com

这个里面的console.log怎么调试啊?调试方法都没有怎么开发?还有打印对象为什么是个[object object]?真是搞笑
2018-09-11 15:06