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

{  
  "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的主要工作就是：

1. 规整M站的URL，创建pages规则，并把各个url页面匹配到不同page中。
2. 针对该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配置等文章了，了解每个节点的详细配置项。