uni-app是一個(gè)基于Vue.js開發(fā)跨平臺(tái)應(yīng)用的前端框架
解決了原生小程序編寫的繁瑣，只要你會(huì)vue就可以通過uni-app編寫小程序
首先開發(fā)工具我推薦HBuilder，雖然我比較喜歡VScode，但這個(gè)真的很適合寫uni-app,而且uni-app官方推薦使用HBuilderX來開發(fā)uni-app類型的項(xiàng)目
好處：模板豐富、有完善的代碼提示、可以一鍵運(yùn)行到多個(gè)平臺(tái)來預(yù)覽我們的項(xiàng)目
也可以使用VScode等自己熟悉的編輯器
下載HBuilderX
地址：https://www.dcloud.io/hbuilderx.html
選擇下載正式版》App開發(fā)版
解壓（純英文目錄） ? 雙擊HBuilderX.exe即可啟動(dòng)
在HBuilderX中安裝scss/sass編譯插件
方便編寫css樣式<style lang="scss"></style>
地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass
登錄，沒有賬號(hào)先注冊(cè)，
登錄成功后，先打開一下HBuilderX，點(diǎn)擊綠色的使用HBuilderX導(dǎo)入插件
點(diǎn)擊確定跳轉(zhuǎn)到HBuilderX
點(diǎn)擊安裝，等待安裝成功即可
?
?文件》新建》項(xiàng)目
項(xiàng)目名字、路徑、推薦選擇uni-ui項(xiàng)目、vue版本的選擇
創(chuàng)建即可
?
?登錄自己的小程序微信公眾平臺(tái)，復(fù)制粘貼自己的微信小程序的AppID
在HBuilderX配置微信小程序（粘貼自己的AppID）如圖：
?HBuilderX中配置微信開發(fā)者工具的安裝路徑
首先要下載微信開發(fā)者工具然后：
工具》設(shè)置》如圖
?在微信開發(fā)者工具中，設(shè)置》安全設(shè)置》開啟服務(wù)端口：如圖
?運(yùn)行
首先關(guān)閉微信開發(fā)者工具
在HBuilderX中
運(yùn)行》運(yùn)行到小程序模擬器》選擇第一個(gè)默認(rèn)微信開發(fā)者工具
點(diǎn)擊后則會(huì)自動(dòng)將項(xiàng)目運(yùn)行到微信開發(fā)者工具中
如圖
?運(yùn)行后會(huì)自動(dòng)打開微信開發(fā)者工具，并將運(yùn)行的項(xiàng)目運(yùn)行起來
如果運(yùn)行后出現(xiàn)白屏問題，關(guān)閉微信開發(fā)者工具，在HBuilderX中停止運(yùn)行項(xiàng)目，然后再重新運(yùn)行一遍
文章來源：http://www.zghlxwxcb.cn/news/detail-485037.html
?吼吼吼，完事兒啦?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-485037.html
到了這里，關(guān)于uni-app從創(chuàng)建到運(yùn)行到微信開發(fā)者工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![uni-app項(xiàng)目在微信開發(fā)者工具打開時(shí)報(bào)錯(cuò)[ app.json 文件內(nèi)容錯(cuò)誤] app.json: 在項(xiàng)目根目錄未找到 app.json](https://imgs.yssmx.com/Uploads/2024/02/592932-1.png)
