uni-app入門教程
- 1.uni-app簡介
- 2.uni-app開發工具的下載
- 2.1 Hbuilder電腦桌面適配
- 3.Hbuilder運行uni-app專案
- 3.1 瀏覽器預覽uni-app專案
- 3.2 微信小程式預覽uni-app專案
- 3.3 手機預覽預覽uni-app專案
1.uni-app簡介
????uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者撰寫一套代碼，可發布到iOS、Android、Web（回應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶）、快應用等多個平臺，
2.uni-app開發工具的下載
????“工欲善其事，必先利其器，”這么牛逼的框架當然需要配上合適的開發工具了，目前uni-app的開發工具首推Hbuilder，下載鏈接如下：
????官方IDE下載地址
????進入下載頁面之后，選擇與電腦系統對應的APP開發版工具，點擊下載壓縮包，下載完成之后，將壓縮包解壓到想要放置的位置，例如解壓之后效果截圖：
接下來，點擊里面的Hbuilder.exe檔案運行，
2.1 Hbuilder電腦桌面適配
????打開之后，發現頁面打開后明顯不適配，上面的選單選項都看不全，解決方法：打開電腦顯示設定，將縮放與布局更改然后重啟Hbuilder，然后再將縮放與布局設回原值，再次重啟Hbuilder即可，
3.Hbuilder運行uni-app專案
????如上圖所示，新建一個Hbuilder專案，專案創建完如下圖所示：
3.1 瀏覽器預覽uni-app專案
????對于uni-app專案的預覽，直接點擊下圖位置即可：
點擊之后Hbuilder會自動進行編譯并跳轉到瀏覽器端顯示運行效果，對于瀏覽器的手機端和PC端顯示，可以使用后臺除錯切換甚至自定義設備尺寸：
3.2 微信小程式預覽uni-app專案
????對于小程式的預覽目前還是主要以微信小程式為主，因此可以下載一個微信小程式開發者工具，下載鏈接如下：
????穩定版 Stable Build
下載完成之后，打開小程式，然后將里面的 設定->通用設定->安全里面的服務埠打開，如下圖所示：
設定完成時候關閉微信開發者工具，
????接下來，回到Hbuilder工具中，在選單運行中找到微信小程式開發工具中打開選項，
此時，這里提示需要找到微信開發這工具的路徑，這時回到桌面，可使用如下方法找到微信開發者工具位置：
在路徑選擇處只需要找到微信開發者工具.exe檔案路徑并點擊確定即可，接下來Hbuilder會自動編譯打開微信開發者工具，
????但是報錯如下：
VM27 WAService.js:2 TypeError: Cannot read property ‘forceUpdate‘ of undefined
本質上這個是由于沒有登陸Hbuilder工具導致的，解決方法如下：
回到Hbuilder工具里面，找到微信開發者密匙配置，填入自己的微信開發者工具appID,如下圖所示：
至于其他的小程式，應該和這個差不多，
3.3 手機預覽預覽uni-app專案
????手機預覽其實可以使用更為強大的模擬器，但是模擬器需要占用的記憶體較大，加上現在只是做個基礎的測驗，因此我直接真機測驗代替了，
????我這里使用的是華為手機（Android），下面的操作可能有些新奇，首先是用手機的資料項將電腦和手機連接，接著打開手機的開發者選項，華為手機打開方式為：找到手機設定，點擊關于手機，然后連續五次點擊手機的版本號，會彈出一個安全密碼輸入框，輸入密碼即可打開開發者選項，
????然后，回到關于手機目錄，點擊進入開發者選項，點擊開啟USB除錯，得到結果如下：
遺憾的是并沒有匹配到設備，經過一番嘗試，最終彈出如下提示框證明連接成功：
但是，我個人覺得這個方法不是很好，因為這種方式你得還有其他機型的手機，這種除錯方法不太安全，就比如說，我打開時間長了之后，手機管家提示：手機因為開啟USB除錯導致存在支付安全隱患，如果長期開發uni-app專案，還是考慮使用模擬器吧，
????初次入門uni-app，請大佬們多多關照吖~，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/294454.html
標籤：其他