使用HBuilderX將vue項目打包成app

由於項目要用到手機掃一掃的功能，純H5的話我百度以後只能作到調用攝像頭，拍照後識別二維碼，沒法作到自動識別 看到H5+有掃碼功能，因此今天嘗試用HBuilderX將vue項目打包成app

總的流程很簡單，這真的要感謝H5中國產業聯盟作出的貢獻。將vue打包，生成dist文件夾，HBuilderX建立H5+App項目，這裏選擇的是默認模版，而後將dist裏的文件夾覆蓋到新項目，就能夠雲打包成app下載到手機或者直接進行真機調試

• 生成app後遇到的第一個坑就是白屏，緣由是頁面找不到 爲了解決跨域問題，本來vue build以後是放在php項目public/webstie裏的，因此vue.config.js的publicPath設置爲'/website/' <a href="https://cli.vuejs.org/zh/config/#publicpath" target="_blank">配置參考-publicPath</a> puclicPath默認值是'/'，由於vue-cli默認你的應用是放在根路徑，如今放在子路徑website裏，因此要指定這個子路徑 打包後css和js請求路徑就多了/website，與實際路徑不符因此找不到資源 解決辦法是publicPath設置爲'./'，請求本地資源，頁面原本就沒放在服務器

• 頁面出來後驗證碼不顯示，請求接口也報錯 本來項目是同源請求，請求的接口直接/開頭便可 但在app中/明顯不是服務器地址，因此要用絕對路徑，使用域名會有問題，在phpStudy中設置第二域名，使用ip進行訪問 vue中建立變量存儲訪問地址，如<pre>var appUrl = 'http://192.168.1.90:80'</pre>，而後在封裝好的axios請求中加上此變量 萬幸app沒有跨域問題，跨域是由於瀏覽器的同源策略而app不是瀏覽器

• 真機調試時HBuilderX檢測不到手機 具體可看社區<a href="http://ask.dcloud.net.cn/article/97" target=「_blank」>真機運行、手機運行、真機聯調常見問題</a> 手機USB鏈接「僅充電」設置爲文件傳輸，最好設置鏈接時默認就是文件傳輸 關閉USB調試，以管理員身份運行HBuilderX，再打開USB調試，後面我用這方式均可以檢測到手機

• 忽然間請求出現問題，驗證碼也獲取不到 由於吃飯回來後忘記連wifi了，用的流量 服務在本機啓動，在同一局域網內訪問沒問題，用流量的話至關於外網請求內網服務

• H5+app狀態欄，有四種狀態正常、變色、透明（沉浸式）和消失（全屏） <a href="http://ask.dcloud.net.cn/article/1150" target="_blank">狀態欄大全-狀態欄透明(沉浸式)、變色及全屏的區別</a>

• 側滑返回上一頁 側滑默認都是直接退出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不夠熟悉