一、uni-app的由来

提到小程序，大多数人第一反应该都是联想到微信。其实 Dcloud 才是小程序行业的开创者。
DCloud，数字天堂（北京）网络技术有限公司，是W3C 成员及 HTML5 中国产业联盟发起单位。

2012年，DCloud 开始研发小程序技术，优化 webview 的功能和性能。
2015年，DCloud 正式商用了自己的小程序，产品名为“流应用”，并且将技术标准贡献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。360手机助手率先接入，紧随其后的包括了大众点评、携程、京东、有道词典等。
2015年9月，DCloud 推进微信团队开展小程序，并在2016年出上线小程序业务，但是微信并没有接入联盟的标准，而是制定了自己的一套标准。
随着 DCloud 持续普及小程序理念，越来越多的大流量巨头公司纷纷开始加入其行列，但是接入联盟标准的仅有部分公司，大部分会因为商业利益而制定了私有标准，从而造成标准无法统一，十分混乱。
面对这种混乱局面，DCloud 决定开发一个免费开源的框架，通过这个框架为开发者抹平各大平台的差异，这个框架就是 uni-app，这就是它的由来。

二、html、vue、小程序的区别

此处引用一下官网推荐的《白话uni-app》，特别适合像我这样的新手阅读。
文章中讲述了许多编码方式的变化以及 uni-app 中对比于 html 标签所改变及保留的一些标签内容，除此之外还有写出新增的针对于手机端常用的新组建，内容干货巨多，写的十分详细易懂。

三、框架简介

1、目录结构

┌─cloudfunctions        云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components            符合vue组件规范的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            配置页面路由、导航条、选项卡等页面类信息，详见

Tips

• static目录为静态资源存放文件夹，该目录下的js文件不会被编译，若文件中存放有二手代码，不会经>过转换直接运行，在手机设备上会报错
• css、less/sass等资源也不要放在目录下，这类公共资源建议放在common目录下

2、资源路径说明

• 模板内引入静态资源

<!-- template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径 -->
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

• js文件引入

// js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径，js文件不支持使用/开头的方式引入
import add from '../../common/add.js'   

• css引入静态资源

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

3、应用的生命周期

• onLaunch：当uni-app初始化时完成，全局只完成一次。
• onShow：当uni-app启动，或从后台进入前台显示，即从隐藏到显示
• onHide：当uni-app从前台进入到后台，即从显示到隐藏
• onError：当uni-app报错时触发
• onUniNViewMessage：对nvue页面发送的数据进行监听
• onUnhandledRejection：对未处理的 Promise 拒绝事件监听函数
• onPageNotFound：页面不存在监听函数
• onThemeChange：监听系统主题变化

4、页面的生命周期

5、页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

6、官方文档

page.json配置 的官方文档

uni-app的官方组件文档

内容很详细，可作为工具文档使用

2020.10.30