持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
在html5+js开发的页面全部运用到app上，公司使用了wap2app框架来快速实现，而我成为了公司开发app核心人物，一步一步踩坑，才有了这份保姆级攻略
项目创建后，有关 wap2app 项目脚本文件配置如下：
1.1 sitemap.json
注意： 由于后端全权做登录拦截操作，我们的应用入口页为中转页而非真正的首页，我们需要在loading页中获取clientid作为长期登录的凭证，并跳转至首页，且App是自定义底部导航栏，要注意主页面没有侧滑或返回的操作
// 在pages数组当中配置主页面和公共页面，主页面无返回或侧滑操作，pages为首页的webviewId中进行配置，需要什么页面为主页面，则直接在matchUrls中添加一个href
// 公共页面为新开webview，有点击返回和侧滑返回上一页面的操作，在webviewId为common的matchUrls中配置剔除主页面（根据规则进行配置）
// 请进行如下配置
// 假设：项目域名为：aaa.bbb.com
"pages": [
{
"webviewId": "__W2A__aaa.bbb.com", //自动生成！！！首页，用于设置主页面，app中包括主页面：loading页、首页、工作台、个人中心、看板、登录页、退出登录的中转页
"matchUrls": [
{
"href": "https://aaa.bbb.com/index/login/loading.html" // 如此示例，请写全路径！
},
{
"href": "https://aaa.bbb.com/index/login/index.html" // 如此示例，请写全路径！
}
]
},
{
// 自己配置！！！此为公共页配置，pathname中需剔除主页面，其他页面则被app认定为子页面
"webviewId": "common",
"matchUrls": [
// 剔除 loading页、首页、工作台、看板、个人中心、登录页、登录中转页，如果需要添加新的主页，需要同时在上方添加主页并在此剔除主页
"pathname": "R:/(?!\/wapapp\/(index\/index|workbench\/index|personal\/index)|\/index\/login\/(loading|index)|\/user\/member\/out).*"
]
}
]
// 由于App无需原生导航栏
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色，
//首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致；
"background": "#ffffff",
"style": "dark" //系统状态栏样式(前景色)
}
}
1.2 app.js
调试代码： debug: true，如果需要调试设置为true，打包代码请改为false
onLaunch：里面写了消息推送的代码，分专篇讲解
onShow、onHide是两个生命周期，分别是：
- onShow： 当wap2app启动，或从后台进入前台显示，会触发 onShow
- onHide： 当wap2app从前台进入后台，会触发 onHide
接通角标数字值的接口还写在了client_index.html中，注意一定要同时修改！！！！
// 这里写了App角标数值的获取，接口是全路径，注意根据不同App进行修改，在client_index.html中也有写，注意同步！
onHide: function() {
console.log('onhide');
// 获取角标数字值并设置
if(plus.storage.getItem("isLogin") === "1") {
wap2app.ajax.post("http://aaa.bbb.com/wapapp/index/index.html", {}, function(rsp) {
if(rsp.status === 1) {
plus.runtime.setBadgeNumber(rsp.data.counts);
}
});
} else {
plus.runtime.setBadgeNumber(0);
}
}
1.3 client_index.html
此脚本当中有写浏览器打开App并跳转指定页面的逻辑，具体逻辑会专篇详细讲解。
1.4 error.html
跳转的路径为应用入口页路径
// 直接写一个中转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 改为应用入口页地址
window.location.href = "https://aaa.bbb.com/index/login/loading.html"
// event.preventDefault();
</script>
</body>
</html>
模块及脚本的配置就差不多了，接下来最后一篇会讲解如何打包wap2app项目，学完可以轻松上手！
