HBuilder中wap2app（將移動網站轉換為行動裝置 App）

標籤：parameter   能力   開發   調用   內容   app下載   簡單的   工作   match   

什麼是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雖然不同，但實際上內容都是一樣的，比如一個新聞站的不同新聞詳情，可以通過萬用字元或Regex來批量匹配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工程時預設產生，不能修改；

HBuilder中wap2app（將移動網站轉換為行動裝置 App）