Mpvue开发小程序开发环境构建过程

这个实验项目名为“上帝笔记”，英文名为speed note。这是一个记事本小程序。

安装

npm安装--全局vue-cli@2.9

vue init mpvue/mpvue快速启动速度注释

wxmp appid来自后台-开发设置-appid（applet ID）。

保留所有其他设置为默认设置。

cd我的项目

npm安装

npm运行开发

执行后，使用微信开发者工具选择D:/speed note/预览项目。

腾讯云

此时，微信开发者工具右上角没有“腾讯云”按钮，需要在后台打开。

打开：后台-开发-开发者工具-TGit权限管理，系统会提示您尚未打开腾讯云。那么让我们打开它。

然后你会看到公共平台账号授权和扫码授权。

然后，我会要求你要么开立一个独立的腾讯云账户，要么将其与现有的腾讯云端账户相关联。我选择开立一个独立账户。

然后进入腾讯云管理界面。

下载服务器端测试代码

在腾讯云管理界面中，你会发现第三步是下载测试代码。Nodejs版本和PHP版本可用。由于Nodejs版本更简单，我首先下载了Nodejss版本。

你会发现文件名是wafer2 quickstart nodejs…那么，这个wafer2是什么？

Wafer2官方网站：

简单地说，wafer2是一个工具包。用户可以使用开发人员工具上传、部署和调试小程序的后端代码，而无需了解服务器操作和维护、数据库部署和构建。当然，如果您的小程序是一个纯前端程序，不需要后端交互，那么不需要安装工具包。

这个包包含最流行的koa2框架，即Larave、ThinkPHP和其他类似于PHP的框架。显然，您还需要有关koa2的知识。

就我个人而言，我对小程序很敬畏。我认为前端程序员不需要涵盖所有的后端工作。如果前端程序员能够覆盖后端并达到所谓的“全栈”，这只意味着这个小程序不会是一个大而重要的项目。因此，当您学习小程序开发时，您只能对koa2有一个基本的了解，并且能够添加、删除、更改和查询数据库几乎就足够了。当你真正把开发小程序作为你的职业时，后端程序员使用什么语言是他的职责。你只需要让他给你界面。如果你真的打算完成这个堆栈，并且更加熟悉PHP语言，你可以在以后更改它。即使你最熟悉后端的Java，你也可以，但你必须离开腾讯云，使用自己的服务器，因为腾讯云不提供Java环境。

Waver2部署教程：

有许多在线相关文档，例如

将服务器文件夹放在项目根目录中

wafer2快速启动节点主机。我们只需要zip文件中的服务器文件夹，因为客户端文件夹是小程序的前端，我们需要使用mpvue来生成它，所以我们不需要它的代码。

修改project.config。json并添加服务器文件夹路径

该文件位于项目的根目录中。文件的第10行是“miniprogramRoot”：“dist/wx/”。在下面添加一行代码，即指定服务器文件夹的路径：

“qcloudRoot”：“./server/”，

事实上，有一个细节。在设置此步骤之前，开发者工具的右上角没有“腾讯云”按钮。即使你进入工具-工具栏管理-自定义工具管理，你仍然找不到“腾讯云”按钮，因为你没有设置服务器目录，开发者工具认为你的小程序不需要后端。在设置服务器路径之前，“腾讯云”按钮不会出现。现在勾选它。（如果没有，重启工具应该可用。）

图像.png

选择在线开发环境

单击工具右上角的“腾讯云”按钮，您将能够选择Nodejs环境或PHP环境。我们将选择Nodejs环境。

再次单击腾讯云按钮以查看下拉菜单。我们目前无法使用这些功能，因为我们将在下一步设置本地开发环境。

继续部署本地节点js Demo

首先仔细阅读官方说明，并检查“上传演示和开始”部分的内容。

明确地

//更多配置

serverHost:'localhost'，

tunnelServerUrl:'https://tunnel.ws.qcloud.la ',

隧道签名密钥：“27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89”，

//您可以查看腾讯云相关配置的云API密钥控制台：https://console.cloud.tencent.com/capi

QcloudAppId:'你的腾讯