uni-app快速入门

uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
uni-app 诞生的背景：

• 多端泛滥
• 体验不好
• 生态不丰富
  

uni-app优势

• 跨平台更多：一套代码多端使用，能优雅的在一个项目里调用不同平台的特色功能。
• 运行体验更好：组件、api 与微信小程序一致，兼容weex 原生渲染。
• 通用技术栈，学习成本低：vue 的语法，微信小程序的api，内嵌mpvue
• 开放生态，组件更丰富：支持npm 安装第三方包、支持微信小程序自定义组件及SDK，兼容mpvue 组件及项目，APP端可以和原生混合编码，Dcloud 新发布了插件市场
• 开发成本低：即便只开发一个平台，也可以提高研发效率
  uni-app功能示意图:
  
  uni-app官网：https://uniapp.dcloud.io/

快速入门

1. 下载HBuilderX 开发工具
2. 创建uni-app
3. 配置manifest.json 文件
4. uni-app 应用标志
5. 微信小程序AppID
6. 运行项目

项目目录简介

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