最近上面要求把做好的app项目原封不动，在微信小程序端再做一份，这可苦了前端的同事，把做好的东西换个方式再搞一份也确实是挺烦人的。虽然作为一个后端人员，但同样是一个新人的我也跟着凑了凑热闹，一是为了提升自己，作为后端人员，咱前端多少也得会点儿，它的写法与html、js写法类似，不像flutter之类，学习难度也不算太大；二是随时做准备，指不定哪天工期太赶，就把我拉进去写前端了，因此做下笔记，以备后用。
一、关于uni-app 根据官网的描述，uni-app是一款由DCloud开发，基于vue.js的，前端的框架，顾名思义，uni代表了整合，它可以使得一套代码在多端运行，小程序、app、ios、web端都能通过源代码编译成对应平台的代码并打包成不同类别的项目，方便快捷，对于程序员来说，学习成本也是比较低的。由于基于vue.js，因此也符合了当下的趋势，是大前端这一概念的体现，可以说会用这套框架，对于前端的理解也可以加深许多。
二、准备工作
1、下载HbuilderX HbuilderX是一款非常灵巧的前端IDE，也由DCloud开发，高效、轻巧、拥有强大的语法提示并且专为vue打造，它里面的插件非常适合进行前端项目的开发。
下载地址：https://www.dcloud.io/hbuilderx.html
2、下载微信小程序开发工具 开发微信小程序自然就要相应的工具了，虽然微信开发的语法与html略有不同，但开发人员对于它的了解可以不需要太多，因为之前也说过uni-app让一套代码在多端运行，可以自动编译成微信小程序的代码，这里的开发工具主要用于调试与样式预览。安装后在HbuilderX的工具->设置->运行配置 进行路径配置。
文章图片
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、获取appid 开发微信小程序是要一个appid进行授权的，否则微信是不能拉起开发的应用的，可以在微信公众平台进行申请https://mp.weixin.qq.com/
4、安装node.js 【学习笔记|uni-app开发小程序】安装后在HbulderX的工具->设置->运行配置 进行npm和node的路径配置
文章图片
5、安装easy-git HbuilderX也有相应的git插件，前往https://ext.dcloud.net.cn即可下载easy-git
文章图片
三、环境搭建
1、新建项目 通过HbuilderX新建一个uni-app项目
文章图片
2、appid配置 将在微信开发平台申请的appid分别配置在HbuilderX与微信小程序开发工具上
HbuilderX配置在项目里的manifest.json文件中
文章图片
微信小程序开发工具在项目的详情中可以设置
文章图片
3、运行项目 在HbuilderX中点击运行小程序模拟器即可跳转到微信小程序开发工具进行预览，当然HbuilderX也提供了其他端的运行，可以根据需要进行选择。
文章图片
即可在微信小程序开发工具预览到界面
文章图片
后续uni-app、vue.js以及组件的使用可以在官网进行详细的学习https://uniapp.dcloud.net.cn/
推荐阅读
- Java|Java基础——数组
- 人工智能|干货！人体姿态估计与运动预测
- java简介|Java是什么（Java能用来干什么？）
- Java|规范的打印日志
- Linux|109 个实用 shell 脚本
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经，最新整理
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- Spring注解驱动第十讲--@Autowired使用
- SqlServer|sql server的UPDLOCK、HOLDLOCK试验