创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm

最近打算撸一个小程序练练手，顺便记录下开发过程。。也欢迎感兴趣的小伙伴交流小程序开发经验！

大概会有一个系列的博客吧（尽量不太监

目录

一、前置步骤

1.1 注册微信小程序账号，取得AppID

1.2 下载并安装微信开发者工具

二、uni-app

2.1 下载并安装 HBuilderX

2.2 新建uni-app项目

2.3 使用npm（可选）

 三、Color UI

3.1 运行官方demo

3.2 引入Color UI

3.3 浅试一下Color UI的效果，将原生导航栏替换为自定义样式

四、使用Webstorm替代HBuilderX

4.1 用vue-cli创建模板项目

4.2 迁移原来的HBuilderX项目

五、uni-app，从入门到放弃

---

一、前置步骤

1.1 注册微信小程序账号，取得AppID

网址：开始 | 微信开放文档

1.2 下载并安装微信开发者工具

网址：微信开发者工具下载地址与更新日志 | 微信开放文档

安装完之后记得在 设置 / 安全设置 里打开服务端口

二、uni-app

uni-app是一个基于vue的前端跨端框架，编写一套代码，可以发布到小程序、客户端、web端等各个平台。考虑到uni-app庞大的用户群体（生态好），以及项目未来的移植到其他平台的可能性，即便目前只需要开发微信小程序，uni-app依旧是一个不错的选择。

官方文档：uni-app官网

2.1 下载并安装 HBuilderX

HBuilderX是uni-app的官方IDE，不仅可以用来写代码，还可以针对不同平台编译、运行代码，并打包发布相应的版本。在微信小程序场景下，HBuilderX会将uni-app代码编译成微信小程序支持的代码格式，然后将项目导入本机上的微信小程序开发工具以供预览、上传等操作。

官方文档：uni-app官网

2.2 新建uni-app项目

跟着界面提示无脑操作即可，唯一需要注意的是新建完项目之后要把微信小程序的AppID复制到 manifest.json / 微信小程序配置 / AppID 里面。Vue版本我选的是3。

点击菜单栏的 运行 / 运行到小程序模拟器 / 微信开发者工具 就可以运行了

点击 发行 / 小程序-发行 可以将代码发行到小程序平台，这一步可以选择让HBuilderX直接把代码上传到小程序后台，也可以自行去微信开发者工具里上传。

上传成功后就可以在微信小程序后台的