微信小程序项目的前期环境的准备以及可能出现的错误

企业中，如果想要做微信小程序建议用HBuilderX+uni-app进行开发。

一、介绍一下什么是uni-app&HBuilderX（详可参考uni-app官网）

 HBuilderX是类似VScode的编辑器；uni-app是一个使用 Vue.js 开发所有前端应用的框架，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。那为什么建议用HBuilderX来进行开发呢？一是在HBuilderX运行速度快，二是uni-app是DCloud出品的，HBuilderXDCloud出品的，两者有一种微妙的关系，在HBuilderX中可以直接新建uni-app的框架项目，再运行到微信开发者工具即可，所以可以说是非常的方便。

二、uni-app框架的工作原理

 

 

三、那如何新建一个微信小程序项目呢？

以下是第一个方法（这种不建议，但是习惯用VScode的人可以用这种）

1、首先应全局安装脚手架

命令：npm install -g @vue/cli

tips：如果安装过就不用安装了，测试方法输入命令：vue -V，出现版本号即安装成功

2、创建项目

命令：vue create -p dcloudio/uni-preset-vue 项目名

3、启动项目

命令：npm run dev:mp-weixin

4、下载微信开发者工具并导入项目（导入一定要注意，要找到mp-weixin这个文件夹导入才行）

第二个方法（我用的）

 

成功！ 

 其中如果遇到HBuilderX无法启动微信小程序，报错内容为如下：

 修改方法是：打开服务端口即可

 

 四、目录下的文件

 

 

 

 

本文参考：uni-app & HBuilderX & 小程序_山竹回家了的博客-CSDN博客_hbuilder 小程序0.什么是uni-appuni-APP官网:https://uniapp.dcloud.io/READMEuni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。1.uni-app工作原理举例:平时我们写的vue都并非直接传输给浏览器,因为浏览器看不懂,通常会经过编译后翻译成HTML格式,再由浏览器渲染.uni-app的工作原理就是充https://blog.csdn.net/weixin_47886687/article/details/110305982