和平友谊 發表於 2020-1-3 09:33:00

vscode开发小程序1

<p><span style="font-size: 16px"><strong>下载安装vscode后：</strong></span></p>
<p><strong>安装汉化插件：</strong></p>
<p>　　　　1.在vscode界面按ctrl+shift+p输入：configure display language</p>
<p>　　　　2.查找i选择nstall汉化插件：简体中文</p>
<p>　　　　3.重启restart vscode或者关掉界面重新打开</p>
<p><strong>安装微信小程序开发的一些常用插件:</strong></p>
<p>　　　　minapp、wechat-snippet、wxml</p>
<p><strong>快捷建立页面的方式：</strong></p>
<p>　　　　1.用vscode打开微信小程序的项目根目录</p>
<p>　　　　2.修改全局app.json页面，在"pages":&nbsp;[要新建页面路径]</p>
<p>　　　　3.保存，到微信开发者工具那里再保存一次就会自动根据这个新建页面。</p>
<p><strong>在线连接使用阿里巴巴图标库：</strong></p>
<p>　　　　1.使用阿里巴巴图标库的样式：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200102171818900-1794601434.png" alt="" width="449" height="241"></p>
<p>&nbsp;</p>
<p>　　　　2.复制该代码在浏览器打开后：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200102172404249-400636813.png" alt="" width="627" height="276"></p>
<p>&nbsp;</p>
<p>　　　　3.复制代码在项目的wxcss样式文件里面进行粘贴：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200103092021266-963526007.png" alt="" width="612" height="491"></p>
<p>&nbsp;</p>
<p>　　　　4.找到全局的样式，统一引入自己的样式文件：</p>
<p>　　　　<img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200103092430738-1754727787.png" alt="" width="606" height="448"></p>
<p>&nbsp;</p>
<p>　　　　5.测试引用自定义样式和图标：</p>
<p>　　　　<img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200103092859082-440497410.png" alt="" width="475" height="132"></p>
<p>&nbsp;</p>
<p>&nbsp;　　　　　　自定义的阿里图标样式：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200103093005204-1603742286.png" alt="" width="478" height="342"></p>
<p>&nbsp;</p>
<p>　　　　　　结果：</p>
<p>　　　　<img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/i-beta/1880338/202001/1880338-20200103093112581-654056942.png" alt="" width="279" height="242"></p><br><br>
来源：https://www.cnblogs.com/lyjblogg/p/12134148.html
頁: [1]
查看完整版本: vscode开发小程序1