sitemap.json概述 - wap2app教程

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里）。

  1. {  
  2.   "global": {   
  3.   },   
  4.   "pages": [  
  5.     {  
  6.       "webviewId": "__W2A__m.example.com",//首页  
  7.       "matchUrls": [  
  8.         {  
  9.           "href": "http://m.example.com"  
  10.         },  
  11.         {  
  12.           "href": "http://m.example.com/" //这里与上行的不同在于url末尾多了一个/。多个匹配规则是or关系  
  13.         }  
  14.       ]  
  15.     },  
  16.     {  
  17.       "webviewId": "detail",//详情页  
  18.       "matchUrls": [  
  19.         {  
  20.           "pathname": "WILDCARD:/detail/*.html" //这里使用了通配符写法，后续有专门章节介绍通配符。  
  21.         }  
  22.       ]  
  23.     }  
  24.   ]  
  25. }

把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 内容如下：

  1. {  
  2.   "global": {  
  3.     "webviewParameter": {  
  4.       "titleNView": {//原生标题栏  
  5.         "backgroundColor": "#f7f7f7",//导航栏背景色  
  6.         "titleColor": "#000000",//标题颜色  
  7.         "titleSize": "17px",//标题字体大小  
  8.         "borderColor": "#cccccc"  
  9.       }  
  10.     },  
  11.     "easyConfig": {}  
  12.   },  
  13.   "pages": [  
  14.     {  
  15.       "webviewId": "__W2A__m.example.com",//首页  
  16.       "matchUrls": [  
  17.         {  
  18.           "href": "http://m.example.com"  
  19.         }, {  
  20.           "href": "http://m.example.com/"  
  21.         }  
  22.       ]  
  23.     }  
  24.   ]  
  25. }

从代码中可以看出来，sitemap.json 文件中有两个节点：

  • global：App全局配置
  • pages：配置M站的具体页面，可在具体页面的配置中覆盖 global 中的全局配置

global

global 节点实现 App 全局配置，其下可设置两个节点：

  • webviewParameter：webview通用配置，比如通用原生标题栏颜色等；详细参考webviewParameter配置
  • easyConfig：为提升用户体验而提供的简化设置，比如后退处理等；详细参考easyConfig配置

wap2app 中每个页面默认使用 global 的配置，若相同的属性在特定页面中也有配置，则以对应页面的配置属性值为准；如下为一个示例，在 page1 页面，单独定义了原生导航栏的背景色和字体颜色。

  1. {  
  2.   "global": {//全局默认配置，每个页面可以单独定义覆盖  
  3.     "webviewParameter": {  
  4.       "titleNView": {  
  5.         "backgroundColor": "#f7f7f7",//原生标题栏背景色  
  6.         "titleColor": "#000000",//标题颜色  
  7.         "titleSize": "17px",//标题字体大小  
  8.         "borderColor": "#cccccc"  
  9.       }  
  10.     },  
  11.     "easyConfig": {}  
  12.   },  
  13.   "pages": [  
  14.     {  
  15.       "webviewid": "page1",  
  16.       "matchurls": [],  
  17.       "webviewParameter": {  
  18.         "titleNView": {//覆盖了global原生标题栏配置  
  19.           "backgroundColor": "#ff0000",  //导航栏背景色为红色  
  20.           "titleColor": "#ffffff"  
  21.         }  
  22.       }  
  23.     }  
  24.   ]  
  25. }

pages

pages 为 Array 类型，包含M站所有需要增强的页面配置，格式如下： 

  1. "pages":[  
  2.   {  
  3.       //page1 配置  
  4.   }, {  
  5.       //page2 配置  
  6.   }  
  7. ]

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配置

示例如下：

  1. {  
  2.   "webviewId": "page1",  
  3.     "matchUrls": [],//url匹配规则  
  4.     "webviewParameter":{  
  5.         //TODO webview属性设置  
  6.     },  
  7.     "easyConfig":{  
  8.       //TODO 简化配置  
  9.     }  
  10. }

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配置等文章了，了解每个节点的详细配置项。