> 注意
>
> * @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验
> * 约会的静态资源在非 h5 平台，均不转为 base64
> * H5平台，小于4kb的资源会被转换成base64，其余不转
> js 文件或 script 标签内，可以使用相对路径和绝对路径，形式如下：
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from ‘@/common/add.js’
// 相对路径
import add from ‘…/…/common/add.js’
> css 文件或 style 标签内，可以使用相对路径和绝对路径，形式如下：
/* 绝对路径 */
@import url(‘/common/uni.css’);
@import url(‘@/common/uni.css’);
/* 相对路径 */
@import url(‘…/…/common/uni.css’);
> css 文件或 style 标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下：
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(…/…/static/logo.png);
[]( )三、UniAPP 生命周期
-----------------------------------------------------------------------
> 学习一个工具的目的核心是什么？是为了解决核心业务逻辑问题，业务逻辑很多时候简单的解释一句话：“在合适的时机干合适的事情”，OK！什么是合适的时机呢？简单的说，页面运行过程中，各个阶段的回调函数就是页面中的时机，我们也叫这个为“生命周期钩子函数”，当然，业务中我们也会写到很多「回调」的逻辑，这些回调其实也是咱们自定义的时机，UniAPP 的生命周期钩子函数回调函数有哪些呢？我们来理解一下！
>
> `uni-app` 完整支持 `Vue` 实例的生命周期，同时还新增 [应用生命周期]( ) 及 [页面生命周期]( )。
### []( )（1）应用生命周期
| 函数名 | 说明 |
| :-- | :-- |
| onLaunch | 当`uni-app` 初始化完成时触发（全局只触发一次） |
| onShow | 当 `uni-app` 启动，或从后台进入前台显示 |
| onHide | 当 `uni-app` 从前台进入后台 |
| onError | 当 `uni-app` 报错时触发 |
| onUniNViewMessage | 对 `nvue` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯]( ) |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
### []( )（2）页面生命周期
| 函数名 | 说明 |
| :-- | :-- |
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考[示例]( ) |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考[示例]( ) |
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 |
| onTabItemTap | 点击 tab 时触发，参数为Object，具体见下方注意事项 |
| onShareAppMessage | 用户点击右上角分享 |
| onPageScroll | 监听页面滚动，参数为Object |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object |
| onBackPress | 监听页面返回 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 |
| onAddToFavorites | 监听用户点击右上角收藏 |
[]( )四、UniAPP 路由配置及页面跳转
----------------------------------------------------------------------------
### []( )（1）路由配置
> uni-app 页面路由全部交给**框架**统一管理，开发者需要在[pages.json]( )里配置每个路由页面的路径及页面样式（类似小程序在 app.json 中配置页面路由）。
“pages”: [
{
"path": "pages/index",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
},
{
"path": "pages/user",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
}
]
### []( )（2）路由跳转
> `uni-app` 有两种页面路由跳转方式：使用[navigator]( )组件跳转（标签式导航）、调用[API]( )跳转（编程式导航）
>
> 框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
| 路由方式 | 页面栈表现 | 触发时机 |
| --- | --- | --- |
| 初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
| 打开新页面 | 新页面入栈 | 调用 API `uni.navigateTo`、
使用组件 `<navigator open-type="navigate" />` |
| 页面重定向 | 当前页面出栈，新页面入栈 | 调用 API [uni.redirectTo]( ) 、
使用组件 |
| 页面返回 | 页面不断出栈，直到目标返回页 | 调用 API [uni.navigateBack]( ) 、
使用组件 、
用户按左上角返回按钮、安卓用户点击物理back按键 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | 调用 API [uni.switchTab]( ) 、
使用组件 、
用户切换 Tab |
| 重加载 | 页面全部出栈，只留下新的页面 | 调用 API [uni.reLaunch]( ) 、
使用组件 |
### []( )（3）获取当前页面栈
> getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
>
> `注意`： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
### []( )（4）路由传参与接收
> 说明：页面生命周期的 onLoad(）监听页面加载，其参数为上个页面传递的数据，如：
//页面跳转并传递参数
uni.navigateTo({
url: 'page2?name=liy&message=Hello'
});
> url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用`?`分隔，参数键与参数值用`=`相连，不同参数用`&`分隔。如 ‘path?key1=value2&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。
// 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.name); //打印出上个页面传递的参数。
console.log(option.message); //打印出上个页面传递的参数。
}
> `注意`：url 有长度限制，太长的字符串会传递失败，并且不规范的字符格式也可能导致传递失败，所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递
### []( )（5）小程序路由分包配置
> 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
>
> 所谓的主包，即放置默认启动页面及 TabBar 页面，而分包则是根据 pages.json 的配置进行划分。
>
> 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。
“subPackages”: [
{
"root": "news",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "新闻中心",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF"
}
}
]
}
...
]，
// 预下载分包设置
“preloadRule”: {
"pages/index": {
"network": "all",
"packages": ["activities"]
}
}
[]( )五、UniAPP 常用组件简介
-------------------------------------------------------------------------
> uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。
> 虽然不推荐使用 HTML 标签，但实际上如果开发者写了`div`等标签，在编译到非H5平台时也会被编译器转换为 `view` 标签，类似的还有 `span` 转 `text`、`a` 转`navigator`等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
> 开发者可以通过组合这些基础组件进行快速开发， 基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
`案例`：知心姐姐布局实现
[]( )六、UniAPP 常用 API 简介
----------------------------------------------------------------------------
> `uni-app`的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，`uni-app`的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。
> ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。
>
> 标准 ecmascript 的 API 非常多，比如：console、settimeout等等。
> 非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。
>
> 开发者不要把浏览器里的 js 等价于标准 js。
>
> 所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。
`案例`：知心姐姐聊天功能
[]( )七、UniAPP 自定义组件与通信
---------------------------------------------------------------------------
### []( )（1）自定义组件概念
> 组件是 `vue` 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的`component`目录下存放组件，`uni-app` 只支持 `vue` 单文件组件（.vue 组件）
> 组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：
>
> 导入 `import xxx from 'xxx'`
>
> 注册 `Vue.use('xx',xx)` `components:{ xxx }`
>
> 使用 `<xx />`
### []( )（2）父子组件通信
> 1. 父组件通过自定义属性向子组件传递数据
>
> 2. 子组件通过 `props` 接收父组件传递的数据
>
> 1. 父组件通过自定义事件标签向子组件传递事件
> 2. 子组件通过触发父组件定义事件方式修改父组件数据
### []( )（3）slot 数据分发与作用域插槽
> 1. 父组件通过调用子组件内部嵌套 html 内容作为`slot`分发给子组件
> 2. 子组件通过在 `slot` 标签上添加属性，向父组件通信数据，作用域插槽
### []( )（4）全局事件定义及通信
> 1. 在整个应用的任何地方均可以使用`uni.$on`创建一个全局事件
> 2. 在整个应用的任何地方也均可以使用 `uni.$emit` 来触发全局事件，实现多组件见的数据通信
[]( )八、UniAPP Vuex 状态管理
----------------------------------------------------------------------------
1. 概念
> Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2. 应用场景
> Vue多个组件之间需要共享数据或状态。
3. 关键规则
> * State：存储状态数据
> * Getter：从状态数据派生数据，相当于 State 的计算属性
> * Mutation：存储用于同步更改状态数据的方法，默认传入的参数为 state
> * Action：存储用于异步更改状态数据，但不是直接更改，而是通过触发 Mutation 方法实现，默认参数为context
> * Module：Vuex 模块化
4. 交互关系
5. 使用方式
> ```
> import {
> mapState,
> mapActions
> } from 'vuex'
> export default {
> computed: {
> ...mapState(['loginState', 'userInfo'])
> },
> methods: {
> ...mapActions(['userLoginAction', 'userLogoutAction']),
> }
> }
>
> ```
6. 体验案例：模拟用户登陆逻辑实现
> 注意：配合使用 Storage 来实现刷新页面后状态持续保持的业务需求
[]( )九、运行环境判断与跨端兼容
-----------------------------------------------------------------------
### []( )（1）开发环境和生产环境
> `uni-app` 可通过 `process.env.NODE_ENV` 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换。
>
> 在HBuilderX 中，点击「运行」编译出来的代码是开发环境，点击「发行」编译出来的代码是生产环境
if(process.env.NODE_ENV === ‘development’){
console.log('开发环境')
}else{
console.log('生产环境')
}
### []( )（2）判断平台
> 平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
> 编译期判断编译期判断，即[条件编译]( )，不同平台在编译出包后已经是不同的代码，
>
> ```
> // #ifdef H5
> alert("只有h5平台才有alert方法")
> // #endif
> // 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。
>
> ```
> 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 `uni.getSystemInfoSync().platform` 判断客户端环境是 Android、iOS 还是小程序开发工具
>
> ```
> switch(uni.getSystemInfoSync().platform){
> case 'android':
> console.log('运行Android上')
> break;
> case 'ios':
> console.log('运行iOS上')
> break;
> default:
> console.log('运行在开发者工具上')
> break;
> }
>
> ```
### []( )[（3）跨端兼容]( )
> uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
>
# 最后
**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**
**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**
[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
> uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
>
# 最后
**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**
**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
[外链图片转存中...(img-7oY4AKPz-1714809896706)]
[外链图片转存中...(img-k1CnVZto-1714809896706)]
[外链图片转存中...(img-rI8kb5dB-1714809896707)]
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**
[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
