资料观看顺序（在比较中学习）：

　　1. 什么是uniapp（https://uniapp.dcloud.io/）

　　2. 如何学习uniapp（https://uniapp.dcloud.io/resource）

　　3. 快速上手（https://uniapp.dcloud.io/quickstart）

　　4. 白话uni-app【html、vue、小程序的区别】（https://ask.dcloud.net.cn/article/35657）与《 微信小程序转换uni-app详细指南》

　　5. VUE学习笔记（一）——开发环境安装与部署项目与 VUE学习笔记（二）——目录介绍

　　6. 条件编译-解决各端差异（https://uniapp.dcloud.io/platform）

　　7.观看 《uni-app官方教程》。

　　8.看完uniapp官网的《 框架介绍》、《 组件概述》（先看常用的）、《 API概述》（先大体了解）、《 生命周期》、《路由（ navigator 组件、 uni.navigateTo(OBJECT)API）》《 uniapp跨端开发注意》、《 案例》（包括案例页和HBuilderX中的模板项目）

　　9.然后就是刷几个 三方培训机构视频+Vue官网的视频。

　　10.现在就可以上手大部分项目了，边做项目边学完《 组件概述》、《 API概述》。

　　注意：uni-app 使用vue的语法+小程序的标签和API，HBuilder X创建项目中包含了大量可供学习或使用的模板框架。

 

一，uniapp目录结构

登录后复制 
┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此,static目录下的文件均会被完整打包进去，且不会编译（es6代码不要放这里了，css和less/scss等文件建议放到自建的common文件夹下）。非static目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

 

二，使用到的工具

　　 HBuilderX、 微信小程序开发工具（实时调试用，初步上手阶段比浏览器好用点）、 谷歌浏览器、手机模拟器（ 逍遥、 夜神、 蓝叠）。

 

三，.Vue文件介绍

　　一般包含