uni-app的H5版使用注意事項

使用方式

1. 打開uni-app項目下的vue文件
2. 點擊菜單 運行->運行到瀏覽器->Chrome
   
   
3. 在Chrome內打開調試模式（右鍵->檢查）開啟設備模擬，模擬移動設備（如果UI變形刷新即可）
   
   
4. HBuilderX修改代碼后會自動刷新chrome的頁面
5. 審查元素
   
   
   
   在chrome控制台安裝vue devtools后可查看節點關系。
   安裝方式自行搜索。
   每個頁面都在page節點下，pageHead是微信和app下的原生導航欄，即pages.json里配的導航欄。
   pageBody是導航欄下的頁面內容。
   所有標簽為了避免和標准H5標簽沖突，都加了U前綴。
6. 斷點debug
   點chrome控制台的source，可以給js打斷點調試。
   找到同名的文件，如果沒有同名vue文件，一般會有一個同文件名的js文件，此時會提示檢測到sourcemap，是否引入，點允許。然后就會有同名的vue文件。如果找不到，則把焦點放到source的代碼區，然后敲ctrl+p打開文件查找窗口，然后敲入vue頁面名字，然后打開vue頁面。
   這個vue里，只有js，沒有tag和css，但可以打斷點調試。
   
   
   
   
   
   
   
   
   
   
   

發布方式

1. 配置發行后的路徑（發行在網站根目錄可不配置），比如發行網站路徑是www.xxx.com/html5，在manifest.json可視化界面 - H5配置 - 運行的基礎路徑中設置，也可以在源碼視圖內編輯h5節點，router下增加base屬性為html5。
   可視化界面設置：
   
   
   
   源碼視圖設置：
   
   
2. 點擊菜單 發行->H5
3. 在當下項目下的unpackage/dist/build/h5目錄找到出的資源，部署服務器（或者使用本地服務器預覽，不要直接在瀏覽器打開html文件）。如果發布使用的history模式，需要服務端配合，參考：后端配置方式