使用VS Code开发微信小程序
<style>.MathJax, .MathJax_Message, .MathJax_Preview { display: none }</style><div class="main_father clearfix d-flex justify-content-center mainfather-concision" style="height: 100%">
<div id="mainBox" class="container clearfix container-concision">
<div class="blog-content-box">
<div class="article-header-box">
<div class="article-header">
<div class="article-title-box">
<h1 id="articleContentId" class="title-article"><span style="font-size: 1.17em">使用VS Code开发微信小程序</span></h1>
</div>
</div>
</div>
<div id="article_content" class="article_content clearfix">
<div id="content_views" class="markdown_views prism-atom-one-light">
<div class="toc">
<ul>
<li>微信开发工具</li>
<li>
<ul>
<li>结构</li>
<li>缺点</li>
</ul>
</li>
<li>VS Code</li>
<li>VS Code 下载插件</li>
<li>
<ul>
<li>Chinese</li>
<li>小程序开发助手</li>
<li>Easy less</li>
<li>minapp</li>
<li>vscode wxml</li>
<li>wechat-snippet</li>
<li>中文乱码处理</li>
<li>配置Easy less</li>
</ul>
</li>
<li>说明</li>
</ul>
</div>
<p> </p>
<h1>微信开发工具</h1>
<p>说归说，但是开发微信小程序的时候，这个微信开发工具还是离不开的。VS Code在我看来就是一个敲代码的记事本，编译运行还得靠其他软件。但它的作用是让使用者更舒适的编写代码，而且插件安装方便，使用起来还是很香的。</p>
<h2>结构</h2>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144515228-1647250572.png"></p>
<p> </p>
<p> </p>
<h2>缺点</h2>
<ul>
<li>编写时代码提示少，很多代码靠手打</li>
<li>代码没有相对应的高亮，阅读难度大</li>
<li>代码编辑区小，视觉体验不好。里面的代码还自动换行，虽然说这是为了能在编辑区内不用拖动横向滚动条就能预览整个页面的代码。但这导致一行代码过多少自动换行后，阅读性大打折扣，视觉体验更不好了。给个对比图感受一下：（资源管理器我都关了）</li>
<li>小程序开发工具不支持 less，这与写样式的文件wxss同作用，只是后缀不一样而已。用less写样式代码能使可读性提高很多。</li>
<li><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144540029-247721985.png">
<p> </p>
<p> <img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144550486-1165603295.png"></p>
<p> </p>
<p> </p>
</li>
</ul>
<p>其他缺点暂时没发现，不过以上四条就是让我转向VS Code的主要原因。</p>
<h1>VS Code</h1>
<p>这个是微软开发的产品，进微软官网也能下载，就在Visual Studio下面。<br> 下载地址：https://code.visualstudio.com/</p>
<h1>VS Code 下载插件</h1>
<p>进入VS Code后，在最右侧点击那个四个方块构成的图标，在搜索框输入名字回车就行。插件没下载时，在插件右下角都有一个【下载/install】，安装完成的有一个【设置】图标。<br> 对于开发小程序来说，前三个已经差不多了。再往下几个都是在提高编程的舒适度。</p>
<h2>Chinese</h2>
<p>不用多说，让英文界面变中文的<br> <img src="https://img-blog.csdnimg.cn/20210405181807279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzU1MzQyMjQ1,size_16,color_FFFFFF,t_70#"></p>
<h2>小程序开发助手</h2>
<p>开发小程序没它不行。让vscode 提供对 .wxss .wxml 文件后缀的支持。<br> <img src="https://img-blog.csdnimg.cn/20210405181642152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzU1MzQyMjQ1,size_16,color_FFFFFF,t_70"></p>
<h2>Easy less</h2>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144608717-3456963.png"></p>
<p> </p>
<p> </p>
<h2>minapp</h2>
<p>支持微信小程序的语法高亮，增加wxml,wxss代码提示<br><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144620218-2003209309.png"></p>
<p> </p>
<p> </p>
<h2>vscode wxml</h2>
<p>支持微信小程序的语法高亮，增加wxml,wxss代码提示<br><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144633315-1507413151.png"></p>
<p> </p>
<p> </p>
<h2>wechat-snippet</h2>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144645595-1952262330.png"></p>
<p> </p>
<p> </p>
<h2>中文乱码处理</h2>
<p>进入设置界面<br><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144700492-2130292930.png"></p>
<p> </p>
<p> 在搜索框中输入：Files.autoGuessEncoding。把它打上勾就行</p>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144713672-296878907.png"></p>
<p> </p>
<p> </p>
<h2>配置Easy less</h2>
<p>原生小程序不支持 less，其他基于小程序的框架大体都支持，如 wepy，mpvue，taro等，但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的，因此可以用以下方式来实现。</p>
<ol>
<li>编辑器是：VS Code</li>
<li>安装插件：easy less</li>
<li>在VS Code的设置中加入如下，配置：<br> 进入设置界面，定价左上角一个类似与文件的图标，并添加代码：</li>
</ol>
<pre><code class="prism language-xml">"less.compile": {
"outExt": ".wxss"
}
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144724288-654109786.png"></p>
<p><img src="https://img2023.cnblogs.com/blog/116961/202304/116961-20230414144732705-1471546154.png"></p>
<p> </p>
<p> 4. 在要编写样式的地方，新建 less 文件，如index.less，然后正常编辑即可。</p>
<h1>说明</h1>
<p>微信开发工具是开发小程序必须的软件，而VS Code是用来增强编写代码体验的。所以对于开发来说VS Code不安装也是可以的。我是两个都用，一个负责预览，一个负责敲代码。<br> 开发小程序时。用微信开发工具新建一个小程序，用VS Code的打开文件夹功能，在磁盘中找到刚才创建的小程序，点击打开就行。</p>
<p>微信开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html（下载开发版）<br> VS Code下载地址：https://code.visualstudio.com/</p>
</div>
</div>
<div id="treeSkill"> </div>
</div>
<div class="recommend-box insert-baidu-box recommend-box-style "> </div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/yelanggu/p/17318277.html
頁:
[1]