学习uni-app的总结_unionapp-CSDN博客

uni-app是一种基于vue.js的跨平台开发框架，允许开发者编写一次代码，发布到多个平台，包括iOS、Android、H5和小程序。文章介绍了uni-app的目录结构、主要文件作用、生命周期、请求与页面跳转，以及在项目中的实际应用，特别强调了条件编译在不同平台的应用。此外，还提到了开发工具HBuliderX的便利性和uni.request的使用方法。

一、介绍一下什么是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是一个值得考虑的选择。

学习uni-app的总结

一、介绍一下什么是uni-app?

二、学习开发工具

三 、uni-app主要的目录和文件的作用

四、认识uni-app的生命周期

页面的生命周期（page）

应用的生命周期（App.vue）

五、uni-app的请求和页面跳转

六、项目分享

七、总结

感悟：

3 条评论

三、uni-app主要的目录和文件的作用