一、整體說明
H5前段框架是在app中混合展示服務端和app本地H5界面的簡單框架，
目的： 保留app本地H5的基礎上，靈活使用服務器端H5網頁
核心思路：在APP本地添加模板h5文件。H5文件中 一方面引入APP本地公共js和其他資源；另一方面，通過js方法寫入不同功能模塊對應的資源文件，展示不同的界面。
框架分兩部分：
- app本地的模板station.html
- 站點上的資源，包括，
- 功能模塊配置文件config.js 和動態加載js和css文件的loadFile.js。
- 具體功能模塊的js和css
二、app本地模板文件
tdxcfg.zip 中添加station.html文件
文件作用：網頁模板，
1、加載本地的公共資源，js、圖片、css
2、加載站點上的配置文件和相關js
三、站點js
3.1 配置文件config.js和加載文件方法loadFile.js
Config.js 後續會將配置文件方式改接口獲取方式，方便灰度發佈和站點遷移
loadFile.js第一階段，放在站點，方便調試，框架成熟後，可以放在app本地
3.1.1 Config.js
3.1.2 loadFile.js
開發階段關閉緩存，發佈階段開啓，
3.1.3 跳轉方法：
使用界面跳轉方法station.html 並傳遞功能模塊對應的ID
如：使用通達信webcallTql跳轉方法
3.2、具體模塊的js和css
當前版本站點是在vue框架下開發，框架使用參考文檔《商城開發文檔20190110.docx》
3.2.1，多界面處理
很多時候需要在模板界面station.html中展示一個功能模塊的全部界面，使用的是vue的router方案。
核心思路，
- 使用router路由，將同一個功能模塊的多個子界面添加到一個界面
- 使用transition切換動畫模擬界面跳轉動畫，使用keep-alive，實現前進刷新界面、返回不刷新界面
- 在loadFile.js中添加物理返回按鈕監聽，點擊物理返回按鈕返回上個界面（不設置默認關閉整個功能模塊）
以 ccstation 功能模塊 爲例
1)使用router路由，將同一個功能模塊的多個子界面添加到一個界面
詳細介紹參考官網 https://router.vuejs.org/zh/
- 創建ccstation.vue 模塊總界面和page1.vue，page2.vue、page3.vue子界面文件
②創建ccstation對應的路由 router-ccstation.js 和主界面ccstation.js
Ccstation,js
router-ccstation.js
- 在配置文件webpack.common.js中添加對應的ccstation.js
2)使用transition切換動畫模擬界面跳轉動畫
具體API參考vue官方文檔 https://cn.vuejs.org/v2/guide/transitions.html
①在ccstation.vue 界面中，使用transition 包裹添加動畫的組件，transitionName爲具體的動畫效果名稱，
使用watch 監聽路由界面切換事件，根據前進和後臺，設置對應的動畫
配置對應的css動畫
3)、使用keep-alive 實現前進刷新、返回不刷新
具體使用方法參考：
實現理論：
使用keep-alive 保存界面
具體的界面中根據需求 通過判斷是isBack是否重新拉取數據
4)、監聽物理返回按鈕，回退上級界面
使用通達信暴露的物理返回按鈕監聽事假，
判斷當前界面是否是首頁（當前設置爲 “#/”,所以要求，路由中默認界面是”/”） 如果是，執行關閉整個功能模塊方法，
如果不是，使用H5的history 回退到路由中的上級界面
代碼下載地址
https://github.com/bihansheng/H5Frame