如何使用uni-app快速成型一个微信小程序（一）

前言

在很多年前，微信小程序还在内测的时候，就尝试写过几个小程序，但是那个时候也是因为刚开始做开发，后端语言还没整明白，并且感觉小程序应该不会火，加上小程序是用它自己的一套语法，所以对我个人而言学习成本较高，遂没有继续研究下去。
19年的时候感觉后端在干下去有点不符合预期路线，所以将目光转向了前端，那时node风头正劲，故也从Vue、React等前端框架中进行选型，看了很多之后最后也是决定上手了Vue并实现了几个中小型项目（PHP做后端服务，Vue前端框架），也算是不违揹我的“不落地的技术是没有价值的”技术理念，最近偶然也听身边多个朋友提到了 uni-app 这个框架，看了一下官网宣称一次编程生成多端的大饼，并且底层是采用了vue进行再次封装，使用vue的语法，心中便对这个框架多了几分期待，故打算用这个框架去实现以下几年前没有上手的小程序，前后花了两天下午将框架基本使用、小程序发布上架等流程基本摸清，掌握了小程序的独立开发能力。以下将梳理整合这几个小时了解和学到的东西，以供和我一样情况的同学参考。

UNI-APP

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
DCloud公司拥有420万开发者，几十万应用案例、6.5亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯

以上摘自 uni-app手册 第一章，我们可以从这几句话看到简直我等贴心棉袄，一次开发多次成型，并且有自己的插件市场，避免了重复造轮子的成本浪费，更适合敏捷开发。

Nodejs & Vue

由于 uni-app 底层是采用了 Vue 框架，所以需要基于 Node 环境，Vue基本语法和Node 环境安装及配置此处不再赘述，有需要的同学可以查看我另一篇博文 Vue2.0 + Vue-cli3 新手入门 里面详尽的介绍了 Node 环境的安装和 Vue 的语法。

uni-app 快速上手

这里推荐下HbuilderX 这款编辑器，之前用过它之前版本，感觉和现在用的 Jetbrains 和 Vscode 之间总是差点意思，但是uni-app 和 HX 一起使用简直珠联璧合，框架深度支持uni-app。

1. 从 下载地址 选择 Download，选择适合自己环境的版本，我选择的是
   
   下载后安装即可。
2. 新建项目
   
3. 目录结构
   
   熟悉Vue 的同学应该很清楚，结构基本与 vue-cli 一致，但是目录结构还是有一些区别

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

page 目录下是我们的主要的业务程序页面，components 下可以放一些我们常用的组件，从插件市场下载的组件也是储存在这里。

4. 运行demo
   
   待其命令结束，会自动打开浏览器，页面如下：
   
   我们见到这个页面证明我们的框架已经跑起来了。