262
uni-app開(kāi)發(fā)小程序的已經(jīng)很普遍了，當(dāng)然肯定有很多人已經(jīng)發(fā)過(guò)環(huán)境搭建這些，我這邊只是記錄我搭建的時(shí)候遇到的問(wèn)題記錄一下，防止之后自己忘記咯，有問(wèn)題可以指出就行
一 軟件部分
首先我們需要用到兩個(gè)東西 一個(gè)是微信開(kāi)發(fā)者工具 ，一個(gè)是 HBuilder X，這兩個(gè)東西，微信開(kāi)發(fā)者工具主要實(shí)現(xiàn)的編譯運(yùn)行部分，代碼部分需要在 HBuilder X里面進(jìn)行編寫和修改，當(dāng)然用 HBuilder X 內(nèi)置的web也可以運(yùn)行起來(lái)
1. 微信開(kāi)發(fā)者工具
選擇自己需要安裝到的路徑上就行了
微信開(kāi)發(fā)者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html
安裝好以后
2. HBuilder X 開(kāi)發(fā)工具
XHbuilder Xhttps://www.dcloud.io/hbuilderx.html
把壓縮包解壓即可使用
打開(kāi)之后界面如下
二 配置部分
注：這邊建議把? Node.js 環(huán)境加上哦
提供一個(gè)安裝教程查看
Vue開(kāi)發(fā) -- Node.js環(huán)境配置以及項(xiàng)目運(yùn)行（圖文講解）文章瀏覽閱讀1.8k次，點(diǎn)贊23次，收藏25次。寫項(xiàng)目需要使用到Vue開(kāi)發(fā)，恰好重新?lián)Q電腦了，也就記錄一下安裝以及配置過(guò)程，記錄一下遇到的問(wèn)題和解決方法，方便以后看和參考。_node 項(xiàng)目運(yùn)行https://herui.blog.csdn.net/article/details/135671505
1. 關(guān)于 HBuilder X 配置
打開(kāi)設(shè)置
?選擇運(yùn)行配置部分 找到微信開(kāi)發(fā)者路徑 把我們安裝的微信開(kāi)發(fā)者工具安裝路徑放進(jìn)去
?還是運(yùn)行配置部分 找到 node 路徑 把我們安裝的 node放進(jìn)去
2. 關(guān)于 微信開(kāi)發(fā)工具 配置
首先點(diǎn)擊 開(kāi)發(fā)者工具的 右上角 進(jìn)去設(shè)置
?點(diǎn)擊 安全 選項(xiàng) 并把服務(wù)端口 打開(kāi)
三 運(yùn)行項(xiàng)目
1. 新建項(xiàng)目
首先在 HBuilder X 里面新建一個(gè) Vue2 的項(xiàng)目
一定要選擇 Vue2 不然運(yùn)行不了微信小程序
2. 代碼編寫
軟件會(huì)讓我們自己建立項(xiàng)目，我們就可以在 index.vue 里面進(jìn)行我們代碼編寫了
開(kāi)發(fā)過(guò)web的小伙伴 入門這個(gè)應(yīng)該很快
3. 內(nèi)置瀏覽器 編譯
我們直接點(diǎn)擊右上 編譯 一下看一下代碼這些是否有錯(cuò) ，沒(méi)有就是會(huì)顯示我們自己建立的模板
4. 配置小程序
首先我們需要進(jìn)行一些配置
如果我們是導(dǎo)入的別人的項(xiàng)目，我們需要重新獲取一下 uni-app 的 id
如果自己建立的項(xiàng)目可以不管這部分
找到微信小程序配置
我們需要 微信小程序的 AppID 查看下面這篇文章 然后獲取一些
AppID獲取
微信小程序注冊(cè)流程及APPID獲?。ㄍ暾鎴D文教程）文章瀏覽閱讀5.1w次，點(diǎn)贊83次，收藏210次。本文將圖文介紹微信小程序注冊(cè)、完善小程序賬號(hào)信息、添加項(xiàng)目成員和體驗(yàn)成員和獲取小程序ID（AppID）及小程序密鑰（AppSecret）的詳細(xì)流程，旨在提供簡(jiǎn)明的入門指導(dǎo)和實(shí)踐建議。微信小程序提供了一個(gè)簡(jiǎn)單而直接的方式，讓開(kāi)發(fā)者能夠快速開(kāi)始他們的小程序開(kāi)發(fā)旅程。開(kāi)發(fā)者需要訪問(wèn)微信公眾平臺(tái)的官方網(wǎng)站，并選擇“小程序”作為注冊(cè)類型。這個(gè)過(guò)程中，你會(huì)被要求提供一些基本信息，包括但不限于你的個(gè)人或企業(yè)信息。值得注意的是，根據(jù)你的開(kāi)發(fā)目的選擇正確的賬號(hào)類型非常重要，因?yàn)樗鼤?huì)影響到你可以使用的微信小程序功能和權(quán)限。_微信小程序appidhttps://blog.csdn.net/Captinyoo/article/details/136433186
注意
這個(gè)ID 和我們登錄的微信開(kāi)發(fā)者工具登錄的微信需要關(guān)聯(lián) 否則運(yùn)行不了
如果我們需要運(yùn)行別人的小程序 ，也需要修改這個(gè)部分
?四 實(shí)現(xiàn)效果
做完上面之后，我們只需要點(diǎn)擊 上面的運(yùn)行 選擇 微信開(kāi)發(fā)者工具 就可以自動(dòng)編譯運(yùn)行了
?軟件會(huì)自動(dòng)啟動(dòng) 選擇信任運(yùn)行
運(yùn)行效果
修改代碼 在HBuilder X里面修改了代碼之后
按 Ctrl + S 即可以自動(dòng)運(yùn)行編譯
聯(lián)系方式 微信號(hào)：13648103287
