喲,大牛來了?。。?br>
前言:想必大家敲代碼用的編輯器大多數(shù)都是Vscode吧,隨著技術(shù)的更新,uni-app成為了前端不可或缺的一項技術(shù),但是呢,官方推薦使用的HBuilderX編輯器讓習(xí)慣了使用Vscode的我們不太習(xí)慣,雖然HBuilderX編輯器對uni-app極度的友好,但還是讓在座的各位大牛以及未來的大牛不適應(yīng),接下來就為大家講解如何使用Vscode開發(fā)uniapp項目。
既然大家都搜索這個了,那創(chuàng)建uniapp項目這一步我就省略了,想知道怎么創(chuàng)建的小伙伴可以去這里查看點我去往屬于uniapp的樂園(小tips: 需要注意的是uniapp創(chuàng)建項目需要vue-cli腳手架,要么就是用HBuilderX可視化創(chuàng)建,不過我們需要用的是vue-cli創(chuàng)建)
一、準(zhǔn)備工具
????我們需要準(zhǔn)備兩個東西,第一個自然就是Vscode,第二個就是微信開發(fā)者工具點我去下載地址(小tips:選擇穩(wěn)定版然后選擇你的系統(tǒng)就好了,如果你的項目需要什么最新特性的話就選擇開發(fā)版,不過可能不穩(wěn)定)
二、更改一下項目配置文件
????安裝好了之后呢我們用Vscode打開uniapp的項目后接下來就是重點了。
????首先我們先把package.json文件夾中的啟動方式和打包方式更改一下,像這樣:
這個時候我相信大家開發(fā)過小程序應(yīng)該都有小程序的測試號吧,沒有的話得去申請一個(點我去申請測試號),擁有了測試號后我們在src目錄下找到一個名為manifest.json的文件將里面的appid修改為你的測試號的Appid( 不知道自己測試號是啥的進(jìn)這里 用微信掃碼進(jìn)去后就能看見你的測試號ID了,基本就是wx********什么什么的)
做完上面的事情后我們調(diào)出終端啟動一下:
啟動完畢后呢目錄中會出現(xiàn)一個dist打包文件
三、渲染效果
打開微信開發(fā)者工具選擇dist打包文件里面的mp-weixin文件給她導(dǎo)入進(jìn)去
然后就能在微信開發(fā)者工具里面看見你的uniapp項目長啥樣了
到了這一步你就可以在Vscode里面寫你的uniapp項目了( 小tips:微信開發(fā)者工具的熱重載得開啟,不然Vscode代碼保存了微信開發(fā)者工具還得手動編譯才能獲取最新頁面)文章來源:http://www.zghlxwxcb.cn/news/detail-448155.html
按照以上的步驟來就能用Vscode開發(fā)你的uniapp小程序了,如果有什么問題可以在評論里面說一說。文章來源地址http://www.zghlxwxcb.cn/news/detail-448155.html
到了這里,關(guān)于如何使用Vscode開發(fā)Uni-app項目以及注意事項詳解的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!