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工程時默認生成，不能修改；