Mpvue開發(fā)小程序開發(fā)環(huán)境搭建過程

實(shí)驗(yàn)項(xiàng)目叫做神記事，英文名微信。就是一個(gè)記事本小程序。

npm 微信微信vue init mpvue

其中wxmp appid后臺(tái) - 開發(fā)設(shè)置 - AppID(小程序ID)。

所有其他設(shè)置都可以默認(rèn)。

cd 微信npm 微信npm run dev

實(shí)施后，使用微信開發(fā)者工具選擇D:/微信/，可預(yù)覽項(xiàng)目。

此時(shí)微信開發(fā)者工具右上角沒有騰訊云按鈕，需要到后臺(tái)打開。

然后進(jìn)入騰訊云管理界面。

在騰訊云管理界面，您會(huì)發(fā)現(xiàn)第三步是下載測(cè)試代碼，可以選擇微信版本和PHP由于微信版比較簡(jiǎn)單，所以我先下載了微信版。

你會(huì)發(fā)現(xiàn)文件名是微信dejs...那么這微信是什么呢？

簡(jiǎn)單地說，微信是一套工具包，用戶只需要打開，就可以使用開發(fā)人員工具上傳、部署和調(diào)試小程序的后端代碼，無需了解服務(wù)器運(yùn)行維護(hù)和數(shù)據(jù)庫(kù)部署構(gòu)建。當(dāng)然，如果您的小程序是純前端程序，不需要后端交互，則無需安裝工具包。

這個(gè)包包含了目前最受歡迎的包koa2框架類似于PHP語言的微信、微信...等待框架。顯然，你也需要koa2相關(guān)知識(shí)。

就我個(gè)人而言，我對(duì)小程序充滿敬畏。我不認(rèn)為前端程序員需要包括所有的后端工作。如果前端程序員能夠包括后端并實(shí)現(xiàn)所謂的全堆棧，這只能表明這個(gè)小程序不會(huì)是一個(gè)大型和重要的項(xiàng)目。所以，當(dāng)你正處于學(xué)習(xí)小程序開發(fā)的階段時(shí)，只要是正確的koa2有基本的掌握，可以做數(shù)據(jù)庫(kù)添加、刪除和檢查，當(dāng)你真正開發(fā)小程序?yàn)槁殬I(yè)，后端程序員使用什么語言是他的事，你只需要讓他po給你一個(gè)界面。如果你真的打算全棧，更熟悉PHP語言，也無妨，以后再改。甚至說，如果你的后端是對(duì)的，Java最熟悉，也可以，但只能離開騰訊云，需要使用自己的服務(wù)器，因?yàn)轵v訊云不提供Java環(huán)境。

網(wǎng)上有很多相關(guān)文件，比如 騰訊云 微信，輕松部署小程序后端！

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

事實(shí)上，有一個(gè)細(xì)節(jié)。在設(shè)置此步驟之前，您的開發(fā)人員工具右上角始終沒有騰訊云按鈕。即使您查找工具 - 工具欄管理 - 自定義工具管理，您仍然找不到騰訊云按鈕，因?yàn)槟鷽]有設(shè)置微信目錄，開發(fā)人員工具認(rèn)為您的小程序不需要后端。騰訊云按鈕將出現(xiàn)，直到設(shè)置微信路徑。現(xiàn)在鉤住它（如果沒有，應(yīng)該可以找到重啟工具）

點(diǎn)擊工具右上角的騰訊云按鈕，選擇微信環(huán)境或PHP環(huán)境，我們選擇微信環(huán)境。

再次單擊騰訊云按鈕，就可以看到下拉菜單，我們目前還沒有使用這些功能，因?yàn)橄乱徊轿覀兘?dāng)?shù)氐拈_發(fā)環(huán)境。

先仔細(xì)閱讀微信小程序開發(fā)者工具的官方說明 自行部署 www.eeefficiency.com Demo，查看上傳 Demo 和啟動(dòng)節(jié)的內(nèi)容。

具體說，將

貼到微信里面。微信相關(guān)跳過，微信相關(guān)如實(shí)填寫。

騰訊云后臺(tái)右上角菜單的賬號(hào)信息來自微信。

騰訊云后臺(tái)右上角菜單的微信和微信訪問管理，然后點(diǎn)擊左側(cè)API秘鑰管理，如果沒有秘鑰，新建秘鑰。然后從中 ** 其中微信需要先填寫手機(jī)驗(yàn)證碼。

然后執(zhí)行微信目錄npm 微信，安裝相關(guān)依賴。

請(qǐng)注意，如果您在第三步遇到微信的錯(cuò)誤報(bào)告，這個(gè)問題就會(huì)跟進(jìn)MySQL與低版本有關(guān)，解決方案：要么升級(jí)您的集成環(huán)境，要么安裝另一個(gè)集成開發(fā)環(huán)境。

我個(gè)人選擇一個(gè)環(huán)境，比如XAMPP的便攜版（www.eeefficiency.com），然后修改端口：

此時(shí)，第2步和第3步可以成功導(dǎo)入sql文件。

施工：

一、新建一個(gè)koa2控制器，叫demo

微信/微信目錄

二、新路由，又稱demo

在微信/微信目錄的：

到此，demo API構(gòu)建完畢。

在微信目錄敲入node app，啟動(dòng)http服務(wù)。

瀏覽器訪問頁面顯示：

測(cè)試成功。

微信在微信界如雷貫耳，其功能是修改監(jiān)控文件，幫助您隨時(shí)重啟您的服務(wù)。

這樣就安裝好了，不用做任何配置。

今后啟動(dòng)服務(wù)就不再是node app，而是微信app。

之后，你需要每天打開兩個(gè)命令行窗口，一個(gè)用于執(zhí)行npm run dev，另一個(gè)負(fù)責(zé)前端開發(fā)的目錄是執(zhí)行微信app，負(fù)責(zé)啟動(dòng)http服務(wù)。

我們當(dāng)?shù)丨h(huán)境的域名是，這顯然不是騰訊眼中的合法域名。因此，有必要在開發(fā)人員工具右上角的詳細(xì)信息中勾選不校驗(yàn)合法域名...”。

這是什么？它的中文名稱是微信小程序客戶端騰訊云增強(qiáng) SDK說白了就是提高會(huì)話能力的工具包。安裝在項(xiàng)目根目錄中：

使用方法：

在項(xiàng)目根目錄中中加入：

然后看看官方文檔。文檔稱，自2018年上半年以來，必須手動(dòng)觸發(fā)微信登錄授權(quán)，并給出示例代碼。因此，我們的代碼大致：

請(qǐng)注意，官方文件是微信="微信"，我們?cè)趍pvue當(dāng)然要改成@微信="微信"。

然后添加一種方法：

以上代碼也是修改官網(wǎng)提供的例子。注意兩點(diǎn):

測(cè)試過程：從開發(fā)者工具中點(diǎn)擊微信，然后觀察控制臺(tái)，等幾秒鐘就會(huì)打印出自己的用戶信息。

默認(rèn)情況下，mpvue沒有安裝scss所以我們手動(dòng)安裝相關(guān)依賴:

上海西陸信息科技有限公司 承接各類微信小程序開發(fā)制作、小程序定制、APP 網(wǎng)站 開發(fā)制作，聯(lián)系電話 18221533805、15900430334