因為項目要用到手機掃一掃的功能，純H5的話我百度之后只能做到調用攝像頭，拍照后識別二維碼，無法做到自動識別
看到H5+有掃碼功能，所以今天嘗試用HBuilderX將vue項目打包成app
總的流程很簡單，這真的要感謝H5中國產業聯盟做出的貢獻。將vue打包，生成dist文件夾，HBuilderX創建H5+App項目，這里選擇的是默認模版，然后將dist里的文件夾覆蓋到新項目，就可以雲打包成app下載到手機或者直接進行真機調試
-
生成app后遇到的第一個坑就是白屏，原因是頁面找不到
為了解決跨域問題，原本vue build之后是放在php項目public/webstie里的，所以vue.config.js的publicPath設置為'/website/'
配置參考-publicPath
puclicPath默認值是'/'，因為vue-cli默認你的應用是放在根路徑，現在放在子路徑website里，所以要指定這個子路徑
打包后css和js請求路徑就多了/website，與實際路徑不符所以找不到資源
解決辦法是publicPath設置為'./'，請求本地資源，頁面本來就沒放在服務器 -
頁面出來后驗證碼不顯示，請求接口也報錯
原本項目是同源請求，請求的接口直接/開頭即可
但在app中/明顯不是服務器地址，所以要用絕對路徑，使用域名會有問題，在phpStudy中設置第二域名，使用ip進行訪問
vue中創建變量存儲訪問地址，如var appUrl = 'http://192.168.1.90:80'
，然后在封裝好的axios請求中加上此變量
萬幸app沒有跨域問題，跨域是因為瀏覽器的同源策略而app不是瀏覽器 -
真機調試時HBuilderX檢測不到手機
具體可看社區真機運行、手機運行、真機聯調常見問題
手機USB連接“僅充電”設置為文件傳輸，最好設置連接時默認就是文件傳輸
關閉USB調試，以管理員身份運行HBuilderX，再打開USB調試，后面我用這方式都可以檢測到手機 -
突然間請求出現問題，驗證碼也獲取不到
因為吃飯回來后忘記連wifi了，用的流量
服務在本機啟動，在同一局域網內訪問沒問題，用流量的話相當於外網請求內網服務 -
H5+app狀態欄，有四種狀態正常、變色、透明（沉浸式）和消失（全屏）
狀態欄大全-狀態欄透明(沉浸式)、變色及全屏的區別 -
側滑返回上一頁
側滑默認都是直接退出app，但示例代碼里可以監聽手機返回鍵彈出退出確認框，既然能彈框，就能進行其他的操作
-
barcode掃一掃模塊
BarcodeStyles對象可以在創建掃碼控件時修改其樣式，出現的問題是控件一直是全屏把導航條都遮擋了，設置z-index沒用，再大也不可能覆蓋原生控件
修改BarcodeStyles可以修改掃碼顏色但遮擋問題死活搞不定，最后發現是掃碼控件的父級div樣式設置成了高100%..... -
使用canvas合成二維碼海報，PC沒問題，手機始終不顯示
合成需要使用到兩張圖的src，二維碼是用qrcode生成，然后通過操作dom獲取二維碼img的src，PC谷歌是可以獲取到，但手機上獲取到的要么不顯示要么是undefined
試過html2canvas來截圖，npm下載時就報404......而且html2canvas不是真的截圖，也是通過獲取dom分析后生成圖片，但不管是用zepto還是原生js在手機上都獲取不到base64的src
也想過dom轉為字符串再截取字符串，甚至還想改qrcode源碼......
最后百度發現canvas對象本身可以作為一張圖片使用，所以直接合並兩個canvas就行了，說到底還是對canvas不夠熟悉