uni-app开发小程序

最近上面要求把做好的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

安装后在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/