什么是uniAPP？

uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

uni-app官網(wǎng)

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發(fā)框架（詳見）、更好的App跨平臺(tái)框架、更方便的H5開發(fā)框架。不管領(lǐng)導(dǎo)安排什么樣的項(xiàng)目，你都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維、不需要更改開發(fā)習(xí)慣。

uni-app支持通過(guò) 可視化界面、vue-cli命令行 兩種方式快速創(chuàng)建項(xiàng)目。

可視化的方式比較簡(jiǎn)單，HBuilderX內(nèi)置相關(guān)環(huán)境，開箱即用，無(wú)需配置nodejs。

開始之前，開發(fā)者需先下載安裝如下工具：

• HBuilderX：官方IDE下載地址

HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強(qiáng)化。

我們先將下載好的uniAPP源碼導(dǎo)入進(jìn)去，如下圖，點(diǎn)擊左上角的文件->導(dǎo)入->從本地目錄中導(dǎo)入

• 微信開發(fā)者工具

如果你是第一次使用，還需要下載微信開發(fā)者工具 鏈接如下

微信開發(fā)者工具下載地址與更新日志 | 微信開放文檔

根據(jù)自己的電腦機(jī)型選擇合適的版本

然后需要到HBuiderX中配置微信開發(fā)者工具的位置。

點(diǎn)擊上方的工具->運(yùn)行配置

點(diǎn)擊小程序運(yùn)行配置把微信開發(fā)者工具中的安裝路徑復(fù)制上去就OK了。比如我的安裝目錄是這樣子的，復(fù)制路徑不需要復(fù)制.exe的文件路徑。

第二步

到微信公眾平臺(tái)：微信公眾平臺(tái) 申請(qǐng)小程序開發(fā)注冊(cè)資格

注冊(cè)成功后，點(diǎn)擊開發(fā)管理->開發(fā)設(shè)置,會(huì)看到AppID(小程序ID)，而且要生成AppSecret,這樣你才能開發(fā)小程序，否則只能以測(cè)試號(hào)的模式開發(fā)，有很多不方便之處。

拿到AppID后到HbuiderX你所導(dǎo)入的項(xiàng)目中有個(gè)manifest.json的配置文件。如圖

點(diǎn)擊去右邊有個(gè)微信小程序配置，把AppId填進(jìn)去。

然后就可以點(diǎn)擊運(yùn)行了

由于是uniapp的源碼，它第一次編譯運(yùn)行可能需要node.js的環(huán)境，還需要什么scss的安裝插件，HBuiderX會(huì)自動(dòng)幫你下載，如果沒(méi)有，你需要配置node.js.。簡(jiǎn)單的說(shuō) Node.js 就是運(yùn)行在服務(wù)端的 JavaScript。我們需要node.js中的npm包管理工具來(lái)幫我們下載安裝依賴。我們知道Spring的依賴是你在pom.xml文件定義，然后maven幫我們自動(dòng)下載引入jar包到項(xiàng)目中，那么npm的作用就是相當(dāng)于Java中maven，可以幫我們下載依賴。

第三步 下載node.js的地址: Node.js

由于這個(gè)網(wǎng)址在國(guó)外 訪問(wèn)速度較慢，所以我把安裝包放在網(wǎng)盤里了。

鏈接：百度網(wǎng)盤 請(qǐng)輸入提取碼

提取碼：n8hc

--來(lái)自百度網(wǎng)盤超級(jí)會(huì)員V3的分享

里面有14、15、16、18的版本，選一個(gè)就行了，我的是16版本的，為了避免不同版本沖突，建議你也選擇16版本的，下載完成后雙擊那個(gè).msi文件就可以安裝了，它可以自動(dòng)幫你配置環(huán)境變量，安裝完成后在命令行窗口(win + R) 輸入npm -v看到下圖是這個(gè)樣子就說(shuō)明安裝成功了。

NPM 使用介紹

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見的使用場(chǎng)景有以下幾種：

• 允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。
• 允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。
• 由于新版的nodejs已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以通過(guò)輸入 "npm -v" 來(lái)測(cè)試是否成功安裝。命令如下，出現(xiàn)版本提示表示安裝成功:

四、接下來(lái)再次點(diǎn)擊HBuider運(yùn)行

• 如果它提示還需要編譯器，就讓它自動(dòng)下載，直到它可以運(yùn)行為止。
• 同時(shí)你打開微信開發(fā)者工具，如果你已經(jīng)申請(qǐng)小程序開發(fā)資格，有app_id那么你可以掃碼登錄到你的微信開發(fā)者工具中

• 然后點(diǎn)擊微信開發(fā)者工具中的設(shè)置，點(diǎn)擊安全，把服務(wù)端口打開。

• 運(yùn)行成功后，它就會(huì)自動(dòng)打開微信開發(fā)者工具，第一次微信開發(fā)者工具可能會(huì)彈出你是否信任此項(xiàng)目的作者，點(diǎn)擊確認(rèn)然后它就能打開了。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-440216.html

到了這里，關(guān)于將uniAPP項(xiàng)目導(dǎo)入到微信開發(fā)者工具中保姆級(jí)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！