一语点醒梦中人 發表於 2025-3-18 23:56:00

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

<div id="topics">
<div class="post">
<h2 class="postTitle"><span style="color: rgba(0, 0, 0, 1)">1.安装“微信小程序开发工具”扩展</span></h2>
<h1 class="postTitle"><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250318235652975-648316743.png"></h1>
<h2>2.安装“vscode weapp api”扩展</h2>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250318235911728-971592739.png"></p>
<h2>3.安装“vscode wxml”扩展</h2>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250318235928565-628643559.png"></p>
<h2>4.安装“vscode-wechat”扩展</h2>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250318235940816-702178643.png">&nbsp;</p>
<h2>5.在终端执行命令：</h2>
<p><span style="font-size: 18px">vue create -p dcloudio/uni-preset-vue uniapp-test</span></p>
<p>uniapp-test就是我这里的项目名称了</p>
<h2>6.如果遇到了这个错误：</h2>
<p>ERROR Failed fetching remote preset dcloudio/uni-preset-vue:<br> ERRORRequestError: connect ETIMEDOUT 20.205.243.166:443<br>RequestError: connect ETIMEDOUT 20.205.243.166:443<br>    at ClientRequest.&lt;anonymous&gt; (E:\nodejs\node_global\node_modu    at Object.onceWrapper (node:events:628:26)<br>    at ClientRequest.emit (node:events:513:28)<br>    at TLSSocket.socketErrorListener (node:_http_client:494:9)   <br>    at TLSSocket.emit (node:events:513:28)<br>    at emitErrorNT (node:internal/streams/destroy:157:8)<br>    at emitErrorCloseNT (node:internal/streams/destroy:122:3)    <br>    at processTicksAndRejections (node:internal/process/task_queues:83:21)<br>请将镜像网切换成淘宝镜像网：</p>
<p><span style="font-size: 18px">执行：npm config set registry https://registry.npm.taobao.org/</span></p>
<p>然后再执行5中的命令</p>
<h2>7.然后选择默认模板</h2>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000026222-560509339.png"></p>
<p>&nbsp;<em>等待安装：</em></p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000036950-1955632053.png"></p>
<p>&nbsp;出现这样就是代表创建成功了：&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000044976-1953595472.png"></p>
<p>&nbsp;先cd uniapp-test这个文件夹：</p>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000058661-1624087710.png">&nbsp;</p>
<h2>8.package.json更改</h2>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000110833-2054629050.png"></p>
<p>&nbsp;在这里修改：</p>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000119502-1269086012.png"></p>
<p>&nbsp;改成："serve": "npm run dev:mp-weixin"（目的：运行在微信开发者工具中）</p>
<p>如果不修改"serve": "npm run dev:h5"，那就可以直接运行（执行指令：npm run serve）在h5网页端</p>
<p>出现successfully代表在网页端运行成功了</p>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000129361-912213161.png">&nbsp;</p>
<h2>9.更改之后执行npm run serve</h2>
<p>出现这个代表运行成功：</p>
<p>&nbsp;<img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000148460-1598283332.png">&nbsp;</p>
<h2>10.打开微信开发者工具应用（vscode中的那个项目要在运行状态）：</h2>
<p>若没有这个应用，请先安装这个应用</p>
<p>然后点这个大加号：&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000159720-579526097.png"></p>
<p>&nbsp;然后打开这个目录，我的项目名称是uniapp-test，找到dist路径下的dev：E:\VScode\codeDate\miniproTest\uniapp-test\dist\dev</p>
<p>然后选择mp-weixin文件夹：&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000211443-1173478405.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000222785-1767163643.png"></p>
<p>&nbsp;填写完appid后，点击不使用云服务，再点击确定</p>
<p>然后就运行成功了：&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319000233087-853584056.png">&nbsp;</p>
<h2>11.恭喜你已经运行成功了！希望我的文章对你有所帮助，欢迎在评论区留言</h2>
<p>另外有兴趣的小伙伴要在 VS Code 中编写微信小程序代码并同步到 Git，需要安装以下插件：</p>
<p>1.微信小程序插件（WeChat Mini Program）：此插件提供了微信小程序的语法高亮、代码提示、调试、上传等功能。</p>
<p>2.Git 插件（GitLens、Git History、Git Graph等）：这些插件提供了 Git 相关的功能，如 Git 历史记录、分支管理、提交和推送代码等。</p>
<p>3.文件同步插件（Live Share、Live Share Audio等）：这些插件允许多个开发者同时编辑同一份代码文件，方便协同开发。</p>
<p>4.代码格式化插件（Prettier、ESLint等）：这些插件可以自动格式化代码、检查代码中的错误和警告等。</p>
<p>5.智能提示插件（IntelliSense、Auto Import等）：这些插件可以提供更加智能的代码提示和自动导入功能，提高开发效率。</p>
<p>除了以上插件之外，您还可以根据个人需求安装其他插件，例如 Markdown 编辑器、REST 客户端、数据库管理工具等。</p>
<p>总之，通过安装这些插件，您可以在 VS Code 中高效地编写微信小程序代码，并将其同步到 Git 中进行版本管理。</p>
<h1 class="postTitle"><span style="color: rgba(255, 0, 0, 1)">容易出错的地方：</span></h1>
<h2 class="postTitle">1、npm ERR! code CERT_HAS_EXPIRED&nbsp;</h2>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">
<p>报错解释：</p>
<p>这个错误表示npm在尝试通过HTTPS连接到一个资源时，遇到了SSL证书已经过期的问题。这通常意味着你的计算机的日期和时间设置不正确，或者是npm缓存中有一个过期的证书。</p>
<p>解决方法：</p>
<ol>
<li>
<div class="dqa-li-inner">
<p>检查计算机的日期和时间设置是否准确，如果不正确，请将其更新为当前的日期和时间。</p>


</div>


</li>
<li>
<div class="dqa-li-inner">
<p>清除npm缓存。可以使用以下命令：<span style="font-style: italic">&nbsp;</span></p>
<div class="code-wrapper">
<div class="right-part">
<div class="hljs-ln-line hljs-ln-code">npm cache clean --force&nbsp;</div>


</div>


</div>


</div>


</li>
<li>
<div class="dqa-li-inner">
<p>如果问题依旧存在，可能是因为npm配置了错误的或者过期的SSL证书。你可以尝试更新npm到最新版本：<span style="font-style: italic">&nbsp;</span></p>
<div class="code-wrapper">
<div class="right-part">
<div class="hljs-ln-line hljs-ln-code">npm install -g npm@latest&nbsp;</div>


</div>


</div>


</div>


</li>
<li>
<div class="dqa-li-inner">
<p>如果你在使用代理服务器或者VPN，请确保它们的SSL证书是有效的。</p>


</div>


</li>


</ol>
<div class="dqa-li-inner">
<p>作为最后的手段，你可以尝试暂时关闭SSL证书验证（不推荐，因为这会降低你的网络安全性）：<span style="font-style: italic">&nbsp;</span></p>
<div class="code-wrapper">
<div class="right-part">
<div class="hljs-ln-line hljs-ln-code">npm config set strict-ssl false&nbsp;</div>


</div>


</div>
<p>但请注意，这种方法可能会使你面临安全风险。<strong style="font-size: 28px">&nbsp;</strong></p>


</div>
<div id="content_views">
<h2>2、当您在使用npm时遇到 <strong><code>npm ERR! code CERT_HAS_EXPIRED</code> </strong>错误时，这通常是因为您的本地计算机上的根证书已过期。这个错误可能是由于您的操作系统或Node.js环境中的证书问题导致的。</h2>
<pre><code class="hljs">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</code></pre>
<h3>解决方法</h3>
<p><strong>1、清除npm缓存</strong></p>
<pre><code class="hljs">npm cache clean --force</code></pre>
<p><strong>2、禁用SSL</strong>：虽然不推荐，但您可以暂时禁用SSL验证来解决这个问题。但请注意，这会降低安全性。您可以通过设置npm的 <code>strict-ssl</code> 选项为 <code>false</code> 来实现</p>
<pre><code class="hljs">npm config set strict-ssl false</code></pre>
<p><strong>3、手动设置npm镜像源</strong>：有时，npm的默认镜像源可能会出现证书问题。您可以尝试切换到另一个镜像源，例如使用淘宝镜像。可以通过以下命令来设置：</p>
<pre><code class="hljs">npm config set registry https://registry.npm.taobao.org/</code></pre>
<p><strong>一般到这里已经好了，但是有时候执行完以上命令还未解决，可以再尝试以下方法</strong></p>
<p><strong>4、更新npm和Node.js</strong>：尝试更新npm到最新版本。有时候，旧版本的npm可能会因为证书过期而无法正常工作。您可以使用以下命令来更新npm：</p>
<p><span style="background-color: rgba(13, 0, 22, 1); color: rgba(192, 192, 192, 1)">npm install -g npm@latest</span></p>
<p><strong>5、更新操作系统</strong>：有时候，如果系统时间不正确，可能会导致SSL证书认证失败。因此，请确保您的系统时间设置正确。您可以使用以下命令来同步系统时间：</p>
<p><span style="background-color: rgba(13, 0, 22, 1); color: rgba(192, 192, 192, 1)">sudo ntpdate -u time.nist.gov</span></p>
<h2>3、npm WARN using --force Recommended protections disabled.</h2>
<p>在使用npm cache clear --force清除缓存的时候，报npm WARN using --force Recommended protections disabled的错误，有可能是镜相源过期的问题</p>
<p>解决方案</p>
<p>1.可能是npm版本过高的问题</p>
<p>npm install npm@6.14.10 -g</p>
<p>2.可以试试这个方法</p>
<p>npm cache verify</p>
<h2>4、vue : 无法加载文件 C:\Users\0\AppData\Roaming\npm\vue.ps1，因为在此系统上禁 止运行脚本</h2>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250318235417571-739655702.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/116961/202503/116961-20250319002054323-701239967.png"></p>
<h2>&nbsp;5、vue : 无法加载文件 C:UsersAppDataRoamingpm ue.ps1,因为在此系统上禁</h2>
<p class="marklang-paragraph">针对你遇到的“无法加载文件 c:\users\pc\appdata\roaming<br>pm\vue.ps1,因为在此系统上禁止执行脚本”的问题，这里有几个可能的解决方案，你可以逐一尝试：</p>
<ol>
<li>‌检查并修改脚本执行策略‌：</li>




</ol>
<ul>
<li>
<p class="marklang-paragraph">在Windows系统中，PowerShell默认可能限制了脚本的执行。你可以通过修改执行策略来允许脚本执行。</p>




</li>
<li>
<p class="marklang-paragraph">打开PowerShell（以管理员身份运行），然后输入以下命令：</p>
<div class="code-header"><span>powershell<span class="cosd-markdown-code-copy cos-link">Copy Code</span></span></div>
<div class="code-wrapper">
<div class="code-left">&nbsp;</div>
<div class="code-right"><code class="hljs language-powershell">Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
</code></div>




</div>
<p class="marklang-paragraph">这条命令会将当前用户的PowerShell执行策略设置为<code>RemoteSigned</code>，允许本地脚本运行，但要求远程签名的脚本必须经过签名。</p>




</li>




</ul>
<ol start="2">
<li>‌检查<code>vue.ps1</code>文件是否存在‌：</li>




</ol>
<ul>
<li>确认<code>c:\users\pc\appdata\roaming pm\vue.ps1</code>文件是否确实存在于你的系统中。如果文件不存在，可能是因为Vue CLI没有正确安装。</li>




</ul>
<ol start="3">
<li>‌检查文件权限‌：</li>




</ol>
<ul>
<li>确保当前用户有权访问和执行<code>vue.ps1</code>文件。你可以右键点击文件，选择“属性”，然后在“安全”选项卡中检查权限设置。</li>




</ul>
<ol start="4">
<li>‌以管理员权限运行‌：</li>




</ol>
<ul>
<li>尝试以管理员权限运行你的PowerShell或命令提示符，然后再次执行相关的Vue命令。这可以确保你有足够的权限来执行脚本。</li>




</ul>
<ol start="5">
<li>‌重新安装Vue CLI‌：</li>




</ol>
<ul>
<ul>
<li>
<p class="marklang-paragraph">如果上述步骤都不能解决问题，可能需要重新安装Vue CLI。首先，你可以使用以下命令卸载Vue CLI：</p>
<div class="code-header"><span>powershell<span class="cosd-markdown-code-copy cos-link">Copy Code</span></span></div>
<div class="code-wrapper">
<div class="code-left">&nbsp;</div>
<div class="code-right"><code class="hljs language-powershell">npm uninstall -g @vue/cli
</code></div>




</div>




</li>
<li>
<p class="marklang-paragraph">然后，重新安装Vue CLI：</p>
<div class="code-header"><span>powershell<span class="cosd-markdown-code-copy cos-link">Copy Code</span></span></div>
<div class="code-wrapper">
<div class="code-left">&nbsp;</div>
<div class="code-right"><code class="hljs language-powershell">npm install -g @vue/cli</code></div>




</div>




</li>




</ul>



</ul>



</div>



</div>



</div>



</div>



</div><br><br>
来源：https://www.cnblogs.com/yelanggu/p/18780112
頁: [1]
查看完整版本: vscode如何开发微信小程序？（保姆级教学）