wap2app sitemap.json 效果增强
原文连接:https://blog.csdn.net/zgh0711/article/details/102856760
原文连接：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12755
wap2app sitemap.json 效果增强
sitemap.json 文件的配置
用 Wap2App 方式打包的 App，里面有个 sitemap.js 文件，这个文件控制着 App 的一些基础功能，为了增强用户体验，需要对这个文件里面的配置项做一些修改。sitemap 文档 其实我做的优化就两个，
关掉退出 App 时候 toast 里面的反馈意见链接，这个反馈意见是反馈给 HBuilder 的，所以我么的用户并不需要看到这个，普通用户看见了反馈了也没用。。。
针对安卓的物理返回键做处理，安卓有物理返回键功能，按一下返回上一个页面，需要支持一下这个功能。
其实就是分别在 global 和 pages 节点下配置 easyConfig ，一个处理退出 App 时的提示，一个处理物理返回键。
{
"global": {
......
"easyConfig": {
"quit": {
"toast": {
"showFeedback": false //不显示“反馈意见”链接，默认为true
}
}
}
},
"pages": [{
......
"easyConfig": {
"back": {
"history": true //允许执行history.back
}
}
}]
}
sitemap文档概述
详细见官方文档
sitemap.json原理
sitemap.json 是 wap2app 项目中最重要的配置文件，M站的优化增强工作，大部分都在 sitemap.json 中完成。
在展开说明 sitemap.json 每个配置项的含义前，我们需要先了解 sitemap.json 的原理。
M站的每个页面在 wap2app 中都是运行在 webview 内的，开发者首先需要梳理下M站的所有 url，都配置到 sitemap.json 里。
当然某些页面 url 虽然不同，但实际上内容结构是一样的。比如一个新闻站的不同新闻详情，可以通过通配符或正则表达式来批量匹配 url。
在 sitemap.json 中的 pages 节点下面，需要把全站的 url 都配进去。
举例：
某M站有2级页面，首页是列表页，网址是 http://m.example.com，二级页是详情页，网址是在 detail 目录下的若干 html 文件。
那么开发者需要在 sitemap 中的pages下面，新建2个节点，把这2类 url 归纳到2个 page（也就是2个Webview里）。
{
"global": {
},
"pages": [
{
"webviewId": "__W2A__m.example.com",//首页
"matchUrls": [
{
"href": "http://m.example.com"
},
{
"href": "http://m.example.com/" //这里与上行的不同在于url末尾多了一个/。多个匹配规则是or关系
}
]
},
{
"webviewId": "detail",//详情页
"matchUrls": [
{
"pathname": "WILDCARD:/detail/*.html" //这里使用了通配符写法，后续有专门章节介绍通配符。
}
]
}
]
}
把url和webview的关系归纳好后，我们就可以对每个webview的显示做强化。
在每个page下面，除了webviewId、matchUrls，还有一个重要的属性就是webviewParameter。
开发者可以在webviewParameter里设置各种强大功能，设置原生title、调用原生渲染、通过注入css调整页面样式、注入js增强页面功能。
具体webviewParameter的配置说明另见http://ask.dcloud.net.cn/article/12749。
小结一下，也就是说，sitempap.json的主要工作就是：
- 规整M站的URL，创建pages规则，并把各个url页面匹配到不同page中。
- 针对该webview需设置哪些增强属性。
sitemap.json配置
在 HBuilder 中新建 wap2app 项目后，默认 sitemap.json 内容如下：
{
"global": {
"webviewParameter": {
"titleNView": {//原生标题栏
"backgroundColor": "#f7f7f7",//导航栏背景色
"titleColor": "#000000",//标题颜色
"titleSize": "17px",//标题字体大小
"borderColor": "#cccccc"
}
},
"easyConfig": {}
},
"pages": [
{
"webviewId": "__W2A__m.example.com",//首页
"matchUrls": [
{
"href": "http://m.example.com"
}, {
"href": "http://m.example.com/"
}
]
}
]
}
从代码中可以看出来，sitemap.json 文件中有两个节点：
- global：App全局配置
- pages：配置M站的具体页面，可在具体页面的配置中覆盖 global 中的全局配置
global
global 节点实现 App 全局配置，其下可设置两个节点：
- webviewParameter：webview通用配置，比如通用原生标题栏颜色等；详细参考webviewParameter配置
- easyConfig：为提升用户体验而提供的简化设置，比如后退处理等；详细参考easyConfig配置
wap2app 中每个页面默认使用 global 的配置，若相同的属性在特定页面中也有配置，则以对应页面的配置属性值为准；如下为一个示例，在 page1 页面，单独定义了原生导航栏的背景色和字体颜色。
{
"global": {//全局默认配置，每个页面可以单独定义覆盖
"webviewParameter": {
"titleNView": {
"backgroundColor": "#f7f7f7",//原生标题栏背景色
"titleColor": "#000000",//标题颜色
"titleSize": "17px",//标题字体大小
"borderColor": "#cccccc"
}
},
"easyConfig": {}
},
"pages": [
{
"webviewid": "page1",
"matchurls": [],
"webviewParameter": {
"titleNView": {//覆盖了global原生标题栏配置
"backgroundColor": "#ff0000", //导航栏背景色为红色
"titleColor": "#ffffff"
}
}
}
]
}
pages
pages 为 Array 类型，包含M站所有需要增强的页面配置，格式如下：
"pages":[
{
//page1 配置
}, {
//page2 配置
}
]
page
每个页面相关属性均配置在 page 节点下，page 节点包含四个属性：
- webviewId：当前页面所属webview的id，类型为String，方便后续增强编程实现，比如在app.js中可使用plus.webview.getWebviewById()方法获取当前的webview对象
- matchUrls：页面URL匹配规则，满足matchUrls匹配规则的页面，将使用当前页面配置规则打开，比如webview的id 固定为本页配置的"webviewId"属性，详细参考matchurls配置
- webviewParameter：webview相关设置，比如原生导航条，详细参考webviewParameter配置
- easyConfig：为提升用户体验而提供的简化实现，比如back按键时，优先关闭弹出层，详细参考easyConfig配置
示例如下：
{
"webviewId": "page1",
"matchUrls": [],//url匹配规则
"webviewParameter":{
//TODO webview属性设置
},
"easyConfig":{
//TODO 简化配置
}
}
wap2app打开新页面的流程
- 遍历 pages 节点下的每个 page 对象
- 使用新页面的 url 地址和 page 对象中的 matchUrls 规则进行匹配；
- 若匹配成功，则使用当前的 page 对象创建新的 webview（id为page对象的webviewId属性、webview属性为当前page对象配置的webviewParameter），然后使用新的 webview 加载新页面 url
- 若匹配失败，则使用global属性创建新的 webview（webview的id随机），然后使用新的 webview 加载新页面url
同一类别的页面应该配置为一个 page 对象，比如详情页面，大多核心 DOM 结构、页面布局相同，这些详情页需配置的增强方案相同；
注意：首页的 webviewid 必须为W2A+首页域名，例如：W2Am.example.com，HBuilder 新建 wap2app 工程时会默认生成，不能修改。
了解 sitemap.json 的格式后，就可以继续顺序阅读matchUrls配置、webviewParameter配置、easyConfig配置等文章了，了解每个节点的详细配置项。
