学习uni-app的总结
目录
一、介绍一下什么是uni-app?
二、学习开发工具
三 、uni-app主要的目录和文件的作用
四、认识uni-app的生命周期
页面的生命周期（page）
应用的生命周期（App.vue）
五、uni-app的请求和页面跳转
六、项目分享
七、总结
感悟：
一、介绍一下什么是uni-app?
1.uni-app是基于vue.js前端框架的，而它所有不同的是编写一套代码能发布到不同的平台，如IOS、android、H5以及各种小程序(微信、百度...)等等。
2.uni-app其实是微信小程序和vue的结合体，语法基本一致，与其不同的是uni-app没有div和span标签。
二、学习开发工具
- HBulider X(选择这个开发软件的优点是它有很多插件，下载完插件有利于开发使用，是我们开发起来十分方便）
- uni-app官方文档（里面介绍的非常详细）
三 、uni-app主要的目录和文件的作用
common：
是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面components：
是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数pages：
是uni-app放页面的文件夹，我们每次在这里面新建一个页面，hbuilder X都会在pages.json里面配置好。static：
存放静态资源的 ，如图片资源，image标签想要引入本地文件，只能放到static里才能访问到unpackage：
里面的打包后的东西，我们可以不用管，h5打包后会放在这个里面的dist/build/h5里面，App.vue：
是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。main.js ：
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。manifest.json：
文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工pages.json：
配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等
程此文件在 src 目录。
四、认识uni-app的生命周期
页面的生命周期（page）
onLoad()：页面挂载
onShow()：页面显示出来
onReady()：页面准备就绪了，可供用户使用了
onHide()：页面隐藏起来
onUnload()：页面卸载
onReachBottom()：页面滚动到底部了
onPageScroll()：页面发生滚动了
onPullDownRefresh()：页面在顶部执行了下拉刷新
应用的生命周期（App.vue）
onLaunch()：应用启动，初始化完成时触发（全局只触发一次）
onShow()：应用显示出来
onHide()：应用隐藏起来， 从前台进入后台
五、uni-app的请求和页面跳转
- 请求（使用原生的即可）
uni.request({ url: '', data: {}, methods: 'get', success:(res) =>{ console.log(res) }, fail: (err) => { console.log(err) })
- 页面跳转(常用的)
uni.navigateTo 常用，保留当前页面，跳转到应用内的某个页面。
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});uni.redirectTo 不保留当前页面，跳转到应用内的某个页面。（与上面的区别一样，场景不同的）
uni.redirectTo({
url: 'test?id=1'
});
六、项目分享
这个学期我们学习的案例是仿网易云项目，在项目中让我对uni-app的加深理解，主要实现了:
在此之中，有些条件限制叫做条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称
条件编译写法 说明 #ifdef APP-PLUS
需条件编译的代码
#endif仅出现在 App 平台下的代码 #ifndef H5
需条件编译的代码
#endif除了 H5 平台，其它平台均存在的代码 #ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集） %PLATFORM% 可取值如下：
| 值 | 生效条件 |
|---|---|
| VUE3 | HBuilderX 3.2.0+ 详情 |
| APP-PLUS | App |
| APP-PLUS-NVUE或APP-NVUE | App nvue 页面 |
| APP-ANDROID | App Android 平台 仅限 uts文件 |
| APP-IOS | App iOS 平台 仅限 uts文件 |
| H5 | H5 |
| MP-WEIXIN | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 |
| MP-BAIDU | 百度小程序 |
| MP-TOUTIAO | 字节跳动小程序 |
| MP-LARK | 飞书小程序 |
| MP-QQ | QQ小程序 |
| MP-KUAISHOU | 快手小程序 |
| MP-JD | 京东小程序 |
| MP-360 | 360小程序 |
| MP | 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序 |
| QUICKAPP-WEBVIEW | 快应用通用(包含联盟、华为) |
| QUICKAPP-WEBVIEW-UNION | 快应用联盟 |
| QUICKAPP-WEBVIEW-HUAWEI | 快应用华为 |
主页歌曲榜单的显示
- 歌单歌曲显示
- 播放器页
- 搜索页
源码地址：uniappProjects:
七、总结
学会使用阿里云智能logo设计网站设计应用logo安装与使用微信小程序开发工具
在uni-app中使用静态资源与iconfont的下载与使用
认识uniapp应用生命周期和页面生命周期
uni-app基础组件的使用view、scrollview、text、list、rich-text等
安装、使用第三方组件-循环骨架m-for-skeleton
自定义组件开发-uamhead及使用向组件props传值
使用apifox调用、测试webapi
使用uni.request发起对api的网络请求并处理响应结果
在模板中声明事件及在代码中定义响应方法
uni-app中进行数据绑定、使用v-属性
使用uni.navigate进行页面间的跳转及传递参数
使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
使用css3的animation实现音乐唱盘的动画效果
@keyframes move{
from{
transform : rotate(0deg);
}
to{
transform : rotate(360deg);
}
}使用css的动态绑定技术实现动画启动-停止的控制
使用正则表达式对字符串进行搜索、替换
使用css的tranform配合js的setInterval同步歌曲的播放进度显示相应歌词
安装和使用uni-app的扩展组件uni-ui优化应用开发
感悟：
uni-app是一款非常强大的跨平台开发工具，它可以让开发者更轻松地开发跨平台应用程序，提高开发效率，同时还可以保证应用程序的性能和用户体验。如果您正在寻找一款平台开发工具那么uni-app是一个值得考虑的选择。