vscode如何开发微信小程序？（保姆级教学）

1.安装“微信小程序开发工具”扩展

2.安装“vscode weapp api”扩展

 

3.安装“vscode wxml”扩展

4.安装“vscode-wechat”扩展

  

5.在终端执行命令：

vue create -p dcloudio/uni-preset-vue uniapp-test

uniapp-test就是我这里的项目名称了

6.如果遇到了这个错误：

ERROR Failed fetching remote preset dcloudio/uni-preset-vue:
ERROR RequestError: connect ETIMEDOUT 20.205.243.166:443
RequestError: connect ETIMEDOUT 20.205.243.166:443
at ClientRequest.<anonymous> (E:\nodejs\node_global\node_modu at Object.onceWrapper (node:events:628:26)
at ClientRequest.emit (node:events:513:28)
at TLSSocket.socketErrorListener (node:_http_client:494:9)
at TLSSocket.emit (node:events:513:28)
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
请将镜像网切换成淘宝镜像网：

执行：npm config set registry https://registry.npm.taobao.org/

然后再执行5中的命令

7.然后选择默认模板

 等待安装：

 出现这样就是代表创建成功了： 

 先cd uniapp-test这个文件夹：

  

8.package.json更改

 

 在这里修改：

 

 改成："serve": "npm run dev:mp-weixin"（目的：运行在微信开发者工具中）

如果不修改"serve": "npm run dev:h5"，那就可以直接运行（执行指令：npm run serve）在h5网页端

出现successfully代表在网页端运行成功了

  

9.更改之后执行npm run serve

出现这个代表运行成功：

  

10.打开微信开发者工具应用（vscode中的那个项目要在运行状态）：

若没有这个应用，请先安装这个应用

然后点这个大加号： 

 然后打开这个目录，我的项目名称是uniapp-test，找到dist路径下的dev：E:\VScode\codeDate\miniproTest\uniapp-test\dist\dev

然后选择mp-weixin文件夹： 

 填写完appid后，点击不使用云服务，再点击确定

然后就运行成功了： 

 

11.恭喜你已经运行成功了！希望我的文章对你有所帮助，欢迎在评论区留言

另外有兴趣的小伙伴要在 VS Code 中编写微信小程序代码并同步到 Git，需要安装以下插件：

1. 微信小程序插件（WeChat Mini Program）：此插件提供了微信小程序的语法高亮、代码提示、调试、上传等功能。

2. Git 插件（GitLens、Git History、Git Graph等）：这些插件提供了 Git 相关的功能，如 Git 历史记录、分支管理、提交和推送代码等。

3. 文件同步插件（Live Share、Live Share Audio等）：这些插件允许多个开发者同时编辑同一份代码文件，方便协同开发。

4. 代码格式化插件（Prettier、ESLint等）：这些插件可以自动格式化代码、检查代码中的错误和警告等。

5. 智能提示插件（IntelliSense、Auto Import等）：这些插件可以提供更加智能的代码提示和自动导入功能，提高开发效率。

除了以上插件之外，您还可以根据个人需求安装其他插件，例如 Markdown 编辑器、REST 客户端、数据库管理工具等。

总之，通过安装这些插件，您可以在 VS Code 中高效地编写微信小程序代码，并将其同步到 Git 中进行版本管理。

容易出错的地方：

1、npm ERR! code CERT_HAS_EXPIRED 

报错解释：

这个错误表示npm在尝试通过HTTPS连接到一个资源时，遇到了SSL证书已经过期的问题。这通常意味着你的计算机的日期和时间设置不正确，或者是npm缓存中有一个过期的证书。

解决方法：

  1. 检查计算机的日期和时间设置是否准确，如果不正确，请将其更新为当前的日期和时间。

  2. 清除npm缓存。可以使用以下命令： 

    npm cache clean --force 

  3. 如果问题依旧存在，可能是因为npm配置了错误的或者过期的SSL证书。你可以尝试更新npm到最新版本： 

    npm install -g npm@latest 

  4. 如果你在使用代理服务器或者VPN，请确保它们的SSL证书是有效的。

作为最后的手段，你可以尝试暂时关闭SSL证书验证（不推荐，因为这会降低你的网络安全性）： 

npm config set strict-ssl false 

但请注意，这种方法可能会使你面临安全风险。 

2、当您在使用npm时遇到 npm ERR! code CERT_HAS_EXPIRED 错误时，这通常是因为您的本地计算机上的根证书已过期。这个错误可能是由于您的操作系统或Node.js环境中的证书问题导致的。

npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/@handsontable%2fvue failed, reason: certificate has expired

解决方法

1、清除npm缓存

npm cache clean --force

2、禁用SSL：虽然不推荐，但您可以暂时禁用SSL验证来解决这个问题。但请注意，这会降低安全性。您可以通过设置npm的 strict-ssl 选项为 false 来实现

npm config set strict-ssl false

3、手动设置npm镜像源：有时，npm的默认镜像源可能会出现证书问题。您可以尝试切换到另一个镜像源，例如使用淘宝镜像。可以通过以下命令来设置：

npm config set registry https://registry.npm.taobao.org/

一般到这里已经好了，但是有时候执行完以上命令还未解决，可以再尝试以下方法

4、更新npm和Node.js：尝试更新npm到最新版本。有时候，旧版本的npm可能会因为证书过期而无法正常工作。您可以使用以下命令来更新npm：

npm install -g npm@latest

5、更新操作系统：有时候，如果系统时间不正确，可能会导致SSL证书认证失败。因此，请确保您的系统时间设置正确。您可以使用以下命令来同步系统时间：

sudo ntpdate -u time.nist.gov

3、npm WARN using --force Recommended protections disabled.

在使用npm cache clear --force清除缓存的时候，报npm WARN using --force Recommended protections disabled的错误，有可能是镜相源过期的问题

解决方案

1.可能是npm版本过高的问题

npm install npm@6.14.10 -g

2.可以试试这个方法

npm cache verify

4、vue : 无法加载文件 C:\Users\0\AppData\Roaming\npm\vue.ps1，因为在此系统上禁 止运行脚本

 5、vue : 无法加载文件 C:UsersAppDataRoamingpm ue.ps1,因为在此系统上禁

针对你遇到的“无法加载文件 c:\users\pc\appdata\roaming
pm\vue.ps1,因为在此系统上禁止执行脚本”的问题，这里有几个可能的解决方案，你可以逐一尝试：

  1. ‌检查并修改脚本执行策略‌：

  • 在Windows系统中，PowerShell默认可能限制了脚本的执行。你可以通过修改执行策略来允许脚本执行。

  • 打开PowerShell（以管理员身份运行），然后输入以下命令：

    powershellCopy Code
     
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

    这条命令会将当前用户的PowerShell执行策略设置为RemoteSigned，允许本地脚本运行，但要求远程签名的脚本必须经过签名。

  1. ‌检查vue.ps1文件是否存在‌：
  • 确认c:\users\pc\appdata\roaming pm\vue.ps1文件是否确实存在于你的系统中。如果文件不存在，可能是因为Vue CLI没有正确安装。
  1. ‌检查文件权限‌：
  • 确保当前用户有权访问和执行vue.ps1文件。你可以右键点击文件，选择“属性”，然后在“安全”选项卡中检查权限设置。
  1. ‌以管理员权限运行‌：
  • 尝试以管理员权限运行你的PowerShell或命令提示符，然后再次执行相关的Vue命令。这可以确保你有足够的权限来执行脚本。
  1. ‌重新安装Vue CLI‌：

    • 如果上述步骤都不能解决问题，可能需要重新安装Vue CLI。首先，你可以使用以下命令卸载Vue CLI：

      powershellCopy Code
       
      npm uninstall -g @vue/cli

    • 然后，重新安装Vue CLI：

      powershellCopy Code
       
      npm install -g @vue/cli
posted @ 2025-03-18 23:56  野狼谷  阅读(6591)  评论(0)    收藏  举报