18221533805
Mpvue开发小程序开发环境搭建过程
上海微信小程序开发制作、APP、网站、小程序定制、小程序外包开发公司

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

2022-06-22

实验项目叫做神记事,英文名微信。就是一个记事本小程序。

npm 微信微信vue init mpvue

其中wxmp appid后台 - 开发设置 - AppID(小程序ID)。

所有其他设置都可以默认。

cd 微信npm 微信npm run dev

实施后,使用微信开发者工具选择D:/微信/,可预览项目。

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

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

在腾讯云管理界面,您会发现第三步是下载测试代码,可以选择微信版本和PHP由于微信版比较简单,所以我先下载了微信版。

你会发现文件名是微信dejs...那么这微信是什么呢?

简单地说,微信是一套工具包,用户只需要打开,就可以使用开发人员工具上传、部署和调试小程序的后端代码,无需了解服务器运行维护和数据库部署构建。当然,如果您的小程序是纯前端程序,不需要后端交互,则无需安装工具包。

这个包包含了目前最受欢迎的包koa2框架类似于PHP语言的微信、微信...等待框架。显然,你也需要koa2相关知识。

就我个人而言,我对小程序充满敬畏。我不认为前端程序员需要包括所有的后端工作。如果前端程序员能够包括后端并实现所谓的全堆栈,这只能表明这个小程序不会是一个大型和重要的项目。所以,当你正处于学习小程序开发的阶段时,只要是正确的koa2有基本的掌握,可以做数据库添加、删除和检查,当你真正开发小程序为职业,后端程序员使用什么语言是他的事,你只需要让他po给你一个界面。如果你真的打算全栈,更熟悉PHP语言,也无妨,以后再改。甚至说,如果你的后端是对的,Java最熟悉,也可以,但只能离开腾讯云,需要使用自己的服务器,因为腾讯云不提供Java环境。

网上有很多相关文件,比如 腾讯云 微信,轻松部署小程序后端!


该文件在项目根目录中,第10行是"微信": "dist/wx/",,附加1行代码,即指定微信文件夹的路径:


事实上,有一个细节。在设置此步骤之前,您的开发人员工具右上角始终没有腾讯云按钮。即使您查找工具 - 工具栏管理 - 自定义工具管理,您仍然找不到腾讯云按钮,因为您没有设置微信目录,开发人员工具认为您的小程序不需要后端。腾讯云按钮将出现,直到设置微信路径。现在钩住它(如果没有,应该可以找到重启工具)

点击工具右上角的腾讯云按钮,选择微信环境或PHP环境,我们选择微信环境。

再次单击腾讯云按钮,就可以看到下拉菜单,我们目前还没有使用这些功能,因为下一步我们建立当地的开发环境。

先仔细阅读微信小程序开发者工具的官方说明 自行部署 www.xilukeji.com Demo,查看上传 Demo 和启动节的内容。

具体说,将

贴到微信里面。微信相关跳过,微信相关如实填写。

腾讯云后台右上角菜单的账号信息来自微信。

腾讯云后台右上角菜单的微信和微信访问管理,然后点击左侧API秘钥管理,如果没有秘钥,新建秘钥。然后从中 ** 其中微信需要先填写手机验证码。

然后执行微信目录npm 微信,安装相关依赖。

请注意,如果您在第三步遇到微信的错误报告,这个问题就会跟进MySQL与低版本有关,解决方案:要么升级您的集成环境,要么安装另一个集成开发环境。

我个人选择一个环境,比如XAMPP的便携版(www.xilukeji.com),然后修改端口:

此时,第2步和第3步可以成功导入sql文件。

施工:

一、新建一个koa2控制器,叫demo

微信/微信目录

二、新路由,又称demo

在微信/微信目录的:

到此,demo API构建完毕。

在微信目录敲入node app,启动http服务。

浏览器访问页面显示:

测试成功。

微信在微信界如雷贯耳,其功能是修改监控文件,帮助您随时重启您的服务。

这样就安装好了,不用做任何配置。

今后启动服务就不再是node app,而是微信app。

之后,你需要每天打开两个命令行窗口,一个用于执行npm run dev,另一个负责前端开发的目录是执行微信app,负责启动http服务。

我们当地环境的域名是,这显然不是腾讯眼中的合法域名。因此,有必要在开发人员工具右上角的详细信息中勾选不校验合法域名...”。

这是什么?它的中文名称是微信小程序客户端腾讯云增强 SDK说白了就是提高会话能力的工具包。安装在项目根目录中:

使用方法:

在项目根目录中中加入:

然后看看官方文档。文档称,自2018年上半年以来,必须手动触发微信登录授权,并给出示例代码。因此,我们的代码大致:

请注意,官方文件是微信="微信",我们在mpvue当然要改成@微信="微信"。

然后添加一种方法:

以上代码也是修改官网提供的例子。注意两点:

测试过程:从开发者工具中点击微信,然后观察控制台,等几秒钟就会打印出自己的用户信息。

默认情况下,mpvue没有安装scss所以我们手动安装相关依赖:



Mpvue开发小程序开发环境搭建过程 希望这篇文章对您有帮助.

上海西陆信息科技有限公司 承接各类微信小程序开发制作、小程序定制、APP 网站 开发制作,联系电话 18221533805、15900430334