我的uni-app刨坑——概念学习

一、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、资源路径说明

• 模板内引入静态资源

• 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、页面的生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+ App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

5、页面栈

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

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 APIuni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 APIuni.navigateBack、使用组件、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 APIuni.switchTab 、使用组件、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 APIuni.reLaunch 、使用组件

6、官方文档

page.json配置 的官方文档

uni-app的官方组件文档

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

---

2020.10.30