Mpvue開發小程序開發環境搭建過程

2022-06-22

實驗項(xiang)目叫做神(shen)記(ji)事(shi)，英(ying)文(wen)名微信。就是一個(ge)記(ji)事(shi)本小(xiao)程序。

npm 微信(xin)微信(xin)vue init mpvue

其中(zhong)wxmp appid后臺 - 開(kai)發設置 - AppID(小程序ID)。

所(suo)有其他(ta)設置都可(ke)以默認。

cd 微信(xin)npm 微信(xin)npm run dev

實施后，使用微信(xin)開發者工具(ju)選擇D:/微信(xin)/，可預(yu)覽項目。

此(ci)時微信開(kai)發(fa)者工具右上角沒(mei)有(you)騰訊云(yun)按鈕，需(xu)要(yao)到后臺(tai)打開(kai)。

然后進(jin)入騰訊云管理(li)界面。

在騰(teng)訊(xun)云(yun)管理界面，您(nin)會發現第(di)三步是下載(zai)測試代碼，可以選擇微信(xin)(xin)版本和PHP由于(yu)微信(xin)(xin)版比(bi)較簡單，所以我先下載(zai)了微信(xin)(xin)版。

你會發現文件名是(shi)微信(xin)dejs...那么(me)這微信(xin)是(shi)什么(me)呢？

簡(jian)單地(di)說，微信是一套工(gong)(gong)具包(bao)(bao)，用戶只需(xu)(xu)要打開，就可以使用開發人員工(gong)(gong)具上傳、部(bu)署(shu)和(he)調試小程序的后端代碼，無需(xu)(xu)了解服務器運(yun)行維護和(he)數據(ju)庫部(bu)署(shu)構建。當然，如果您的小程序是純前端程序，不需(xu)(xu)要后端交互(hu)，則無需(xu)(xu)安裝工(gong)(gong)具包(bao)(bao)。

這個包包含了目(mu)前最受歡迎的包koa2框架類似(si)于PHP語(yu)言(yan)的微信、微信...等待框架。顯然，你也需要koa2相關知識(shi)。

就我(wo)個(ge)(ge)人(ren)而言(yan)，我(wo)對小程(cheng)(cheng)序(xu)充(chong)滿敬畏。我(wo)不(bu)認(ren)為(wei)前端程(cheng)(cheng)序(xu)員需(xu)要(yao)(yao)包括所有的(de)(de)(de)(de)(de)(de)(de)后端工(gong)作。如(ru)果前端程(cheng)(cheng)序(xu)員能夠包括后端并實(shi)現所謂的(de)(de)(de)(de)(de)(de)(de)全(quan)堆棧(zhan)，這只能表明這個(ge)(ge)小程(cheng)(cheng)序(xu)不(bu)會(hui)是一個(ge)(ge)大型和重(zhong)要(yao)(yao)的(de)(de)(de)(de)(de)(de)(de)項目(mu)。所以，當(dang)你(ni)正處于學(xue)習(xi)小程(cheng)(cheng)序(xu)開(kai)(kai)發的(de)(de)(de)(de)(de)(de)(de)階段時，只要(yao)(yao)是正確的(de)(de)(de)(de)(de)(de)(de)koa2有基本(ben)的(de)(de)(de)(de)(de)(de)(de)掌握，可(ke)(ke)以做數據(ju)庫添加(jia)、刪除和檢(jian)查，當(dang)你(ni)真正開(kai)(kai)發小程(cheng)(cheng)序(xu)為(wei)職業，后端程(cheng)(cheng)序(xu)員使用什么語言(yan)是他的(de)(de)(de)(de)(de)(de)(de)事，你(ni)只需(xu)要(yao)(yao)讓他po給(gei)你(ni)一個(ge)(ge)界面。如(ru)果你(ni)真的(de)(de)(de)(de)(de)(de)(de)打算全(quan)棧(zhan)，更(geng)熟悉PHP語言(yan)，也(ye)無妨，以后再改。甚(shen)至說，如(ru)果你(ni)的(de)(de)(de)(de)(de)(de)(de)后端是對的(de)(de)(de)(de)(de)(de)(de)，Java最熟悉，也(ye)可(ke)(ke)以，但只能離(li)開(kai)(kai)騰訊(xun)云(yun)，需(xu)要(yao)(yao)使用自己(ji)的(de)(de)(de)(de)(de)(de)(de)服務器，因(yin)為(wei)騰訊(xun)云(yun)不(bu)提供Java環境。

網上有很(hen)多(duo)相關文件(jian)，比如騰訊云微信(xin)，輕松(song)部署小程(cheng)序(xu)后端！

該文(wen)件在項目(mu)根目(mu)錄中，第(di)10行是(shi)"微信": "dist/wx/";,，附加1行代(dai)碼，即指定微信文(wen)件夾的路徑：

事實上(shang)(shang)，有一個(ge)細節。在設置此步驟之前，您的開發(fa)人(ren)員工具(ju)(ju)(ju)右上(shang)(shang)角始終沒有騰訊(xun)云按(an)鈕(niu)。即使您查找工具(ju)(ju)(ju) - 工具(ju)(ju)(ju)欄管(guan)理 - 自定(ding)義工具(ju)(ju)(ju)管(guan)理，您仍然找不到(dao)(dao)騰訊(xun)云按(an)鈕(niu)，因為您沒有設置微(wei)信(xin)目(mu)錄(lu)，開發(fa)人(ren)員工具(ju)(ju)(ju)認為您的小(xiao)程序不需(xu)要(yao)后端。騰訊(xun)云按(an)鈕(niu)將(jiang)出現(xian)，直到(dao)(dao)設置微(wei)信(xin)路徑(jing)。現(xian)在鉤(gou)住它（如(ru)果沒有，應該(gai)可以找到(dao)(dao)重啟工具(ju)(ju)(ju)）

點(dian)擊工具右上角的騰訊云(yun)按鈕，選(xuan)擇(ze)微信(xin)環境(jing)或(huo)PHP環境(jing)，我(wo)們(men)選(xuan)擇(ze)微信(xin)環境(jing)。

再次(ci)單(dan)擊騰訊(xun)云按鈕(niu)，就可以看到下(xia)拉(la)菜單(dan)，我(wo)們目前還沒有(you)使用這些功能，因為下(xia)一(yi)步我(wo)們建立當地的開發環境。

先仔細閱讀微信小程序開發者工具的官方說明 ;自行部署 karrylady.cn Demo，查看(kan)上(shang)傳(chuan) Demo 和啟動節的內(nei)容。

具體說，將

貼到微(wei)(wei)信(xin)里面(mian)。微(wei)(wei)信(xin)相(xiang)關跳過，微(wei)(wei)信(xin)相(xiang)關如實填寫。

騰訊云(yun)后臺右上角菜單的賬號信(xin)息來自(zi)微信(xin)。

騰訊云后(hou)臺右上(shang)角(jiao)菜(cai)單(dan)的微(wei)信和微(wei)信訪問(wen)管理，然后(hou)點擊左側API秘鑰管理，如(ru)果沒有秘鑰，新建秘鑰。然后(hou)從中(zhong) ** 其中(zhong)微(wei)信需(xu)要先填寫手(shou)機(ji)驗證碼。

然后(hou)執(zhi)行微信目(mu)錄npm 微信，安(an)裝相關(guan)依賴。

請注意，如果您(nin)在第三步遇到(dao)微信的(de)錯誤報告，這個(ge)問題(ti)就(jiu)會(hui)跟進MySQL與低版本有關，解決方案：要(yao)么升級您(nin)的(de)集成環(huan)境(jing)，要(yao)么安裝另一個(ge)集成開發環(huan)境(jing)。

我個人選擇一個環境，比(bi)如XAMPP的便攜版（karrylady.cn），然后修改端口：

此時(shi)，第2步和第3步可以成功導入(ru)sql文件。

施工：

一、新建一個koa2控制(zhi)器，叫(jiao)demo

微信/微信目錄

二、新(xin)路由，又稱demo

在微信/微信目錄的：

到(dao)此，demo API構建完(wan)畢。

在微(wei)信目錄敲(qiao)入node app，啟(qi)動http服(fu)務。

瀏(liu)覽器訪問頁面顯示：

測試成功。

微信(xin)在微信(xin)界如雷貫(guan)耳，其功能(neng)是修(xiu)改(gai)監控(kong)文件，幫助您(nin)隨(sui)時重啟您(nin)的服務。