小程序-IDE
<h2>1 相关架构及技术：</h2>
<p>小程序：vue+uniapp
后台：vue+avue+elementui、spring-boot
（徽盟徐伟反馈 前台VUE使用的是2.0版本）</p>
<h2>2 前台调试需要安装的工具：</h2>
<p>HbuilderX、uniapp 、微信开发者工具</p>
<h3>2.1 安装过程</h3>
<p>1、下载安装微信开发者工具
<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</a>
注意：微信开发者工具尽量安装在默认目录盘，其他盘符可能会引起HBuilderX 加载异常；
安装后微信扫二维码登陆；</p>
<p>2、下载前台工具
<a href="https://www.dcloud.io/hbuilderx.html">https://www.dcloud.io/hbuilderx.html</a>
3、uniapp 手动下载及使用方式：<a href="https://zh.uniapp.dcloud.io/quickstart.html">https://zh.uniapp.dcloud.io/quickstart.html</a>
HBuilderX 对Uniapp的兼容比较友好，也可以直接用HBuilderX 中运行时来下载该插件；</p>
<h3>2.2 调试过程及相关配置</h3>
<p>使用uniapp的demo工程测试；
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8dfb99eb677c3d0bb3b89dc9029f1546&amp;file=file.png" alt="" />
选择 在微信小程序中运行；
首次运行会提示 uniapp组件安装或者更新；
等待所有依赖组件安装完成后，重新运行即可；
运行结果如下图：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=c3bbf83ae864ba1beb58c9ef854d6e3f&amp;file=file.png" alt="" /></p>
<p>如果出现如下类似提示：</p>
<pre><code>16:53:53.408 [微信小程序开发者工具] × #initialize-error: Error: ENOENT: no such file or directory, open 'C:\Users\38019\AppData\Local\微信开发者工具\User Data\3e5d725bf5abbd2bfd7bc047ee989e46\Default\.cli'</code></pre>
<p>一般是HBuilderX 加载微信开发工具失败；
可以尝试，进入运行配置：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a2166bb3127b22438aedabe9fe537b89&amp;file=file.png" alt="" />
修改运行路径：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a5ee24575fb33dfefcbc7ff064ab7d79&amp;file=file.png" alt="" />
并确保微信开发小程序工具的端口服务端口打开:
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=3efc34ad955f64126804fd00e99a14d7&amp;file=file.png" alt="" /></p>
<h2>3 其他调试环境要求：</h2>
<p>项目实际部署不止有前台展示，还需要和Server侧进行数据获取交互；
以VUE举例：</p>
<pre><code>mounted () {
axios
.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response =&gt; (this.info = response.data.sites))
.catch(function (error) { // 请求失败处理
console.log(error);
});</code></pre>
<p>安装、调试微信小程序的PC需要访问的网络包括：
1、腾讯微信服务器（开发者工具需要微信扫码登录）；
2、Spring-boot部署所在的服务器地址；
3、CDN、Jquery官网等 vue或者jquery等控件的在线地址；（极少有框架将这些静态数据负载到自己的系统上的，调试阶段可以放本地，但记得在发布的时修改链接地址）；
4、其他控件在线地址；</p>
<p>以下比较稳定的 CDN：
Staticfile CDN（国内） : <a href="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">https://cdn.staticfile.org/vue/3.0.5/vue.global.js</a>
字节跳动 CDN（国内） : <a href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js">https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js</a>
unpkg：<a href="https://unpkg.com/vue@next">https://unpkg.com/vue@next</a>,
cdnjs : <a href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js">https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js</a></p>
<h2>4 vscode配置</h2>
<p>见 <a href="http://10.50.4.28:8090/archives/vscodevueelement-ui">vscode运行Vue及相关配置</a></p>