HBuilder中wap2app（将移动站点转换为移动应用）

什么是wap2app?

       一个将现有的M站（也称手机wap站）快速发布成APP的加强方案，经过DCloud的wap2app框架，进行简单的配置和必要的编程。

便可完成M站的体验强化，达到原生应用的功能体验，进而再发布为原生安装包或流应用。

 

产品特色：

      1）提供了原生的渲染能力，让界面渲染速度和动画效果，达到原生效果。

       2）提供丰富的系统原生能力（定位，分享，支付，推送等），达到原生功能

       3）经过json配置页面规则和强化规则

       4）M站仅需稍做修改，改形成本低

       5）强化部分和以前的M站解耦，M站后续升级业务逻辑，生成的APP自动含有更新后的业务逻辑

 

本地强化和M站的关系

        使用wap2app，开发者可复用M站以前的全部业务逻辑，仅需进行必要的强化，而以前的注册，购物，查询等全部业务逻辑所有复用。

        

开发者所作的强化工做，分为：

        a)wap2app客户端的配置编程工做

        b)原M站的改造工做

注意：这两块是分开解耦的。

     自HBuilder 8.8.3起，新建的wap2app项目，会自动生成项目所必须的模板文件，强化工做就是在这里完成的。

      tips：这些json或js是部署在手机客户端的，并不是M站的服务器上。

      开发者无需，也不能把M站的项目源码导入到HBuilder的wap2app项目里，M站依旧以以前的模式部署在远程的服务器上。

在HBuilder中把新建的wap2app项目选择为打包为原生应用或发布为流应用时，wap2app项目下的这些强化配置和编程文件，

是存在原生app包里，安装后直接在手机端额本地存储区中运行，能够理解为C/S模式下的client部分。而M站仍然是B/S模式，

并不会将M站的资源打包到APP包里，而是从服务器加载在线的M站页面。

手机端实际运行时，DCloud的框架会自动把本地的强化配置和在线的M站融合在一块儿，在用户眼里是一个APP感受。

 

A)强化工做

    1）wap2app本地工做：经过框架提供的sitemap.json文件，描述页面关系和动画强化效果，已达到原生窗体切换效果。当sitemap.json已经没法知足

复杂需求时，可以使用app.js编程进行加强处理。

    2）M站改造工做：针对app运行环境（可根据UA区分），进行适当的改造，去掉app中不该该出现的页面元素，例如：底部的电脑版连接或某些原生app下载引导等。

    3）扩展原生的能力：若是须要调用DCloud HTML5+引擎扩展的原生能力，好比M站以前没法实现的微信分享，推送，原生支付等，须要必要的编程工做。这部分工做，能够在

wap2app本地端实现，也能够在M站实现（注意判断当前运行环境）；

 

如何转换？

   第一步：下载HBuilder

   第二步：配置sitemap.json文件

   sitemap.json原理是什么？

              M站的每一个页面在wap2app中都是运行在webview内，开发者首先须要梳理下全部的url，都配置到sitemap.json。

   固然某些页面的url虽然不一样，但实际上内容都是同样的，好比一个新闻站的不一样新闻详情，能够经过通配符或正则表达式来批量匹配url

sitemap.json的主要工做：

1）规整M站的URL，建立pages规则，并把各个url页面匹配到不一样的page中

2）针对该webview需设置哪些加强属性

该文件构成：

    global：App全局配置（有两个节点）

           1）webviewParameter ：webview通用配置，好比通用原生标题栏等

           2）easyConfig：为提高用户体验而提供的简化设置。好比后退处理 等

注意：wap2app中每一个页面默认使用global的配置，若相同的属性在特定页面中也有配置，则以对应页面的匹配属性为准。

            

    pages：Array类型，配置M站的具体页面，能够在具体页面的配置中覆盖global中的全局配置（有四个属性）

          1）webviewId:当前页面所属的webview的id，类型为string.方便后续加强编程实现，好比在app.js中可以使用plus.webview.getWebviewById()

方法获取当前的webview对象；

          2）matchUrls:页面url匹配规则，知足matchUrls匹配规则的页面，将使用当前配置规则打开，好比webview的id固定为本页面配置的webviewId属性；

          3）webviewParamater：webview相关配置

          4）easyConfig：为提高用户体验而提供的简化配置

 

 关于wap2app打开新页面流程：

     1）遍历pages节点下的每一个page对象

     2）使用新页面的url地址和page对象中的matchUrls规则进行匹配

    3）若匹配成功，则使用当前对象建立新的webview（id为page对象的webviewId属性，webview属性为当前page对象配置的webviewParamater）

    4）若匹配失败，则使用global属性建立新的webview(webview的id随机)

注意：首页的webviewId必须为W2A+首页域名，例如：_W2A_m.example.com,HBuilder新建wap2app工程时默认生成，不能修改；