uni-app快速入门教程

1、什么是uni-app?

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

 

2、uni-app适用于哪些人员？

所有的前端开发人员，尤其是app和小程序开发人员。

有vue和微信小程序基础的人员，能快速上手uni-app。

不推荐无前端基础的直接学。

 

3、uni-app的开发工具

毫无疑问，首选uni-app官方推荐工具：https://www.dcloud.io/hbuilderx.html

 

4、uni-app首选学习通道

毋庸置疑，首选uni-app官方文档：https://uniapp.dcloud.io

熟悉微信小程序文档的可以直接跨越性阅读。

 

5、快速创建一个uni-app项目

安装好HBuilder-x工具后，打开界面，新建项目--->选择uni-app

 

 

 

 6、大概目录介绍，运行方式可以直接阅读工具的中文菜单栏或看文档。

┌─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            配置页面路由、导航条、选项卡等页面类信息，详见

　　

 

 

 

 

学习重点：阅读文档，实在不理解的先去学习vue和微信小程序。