HBuilder中wap2app(將移動網站轉換為行動裝置 App)

來源:互聯網
上載者:User

標籤: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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.