关于学习uni-app的学习总结
目录
一、什么是uni-app
二、功能框架
三、功能优点
四、uni-app的生命周期：
五、uni-app的页面跳转
六、在过程中收获到的知识
七、网易云uni-app开发总结
uni-app项目的创建
使用git和gitee进行代码的版本控制
pages.json页面路由的配置
iconfont的下载与使用
安装、使用第三方组件-循环骨架m-for-skeleton
自定义组件开发-uamhead及使用向组件props传值
使用apifox调用、测试webapi
使用uni.request发起对api的网络请求并处理响应结果
使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
使用css3的animation实现音乐唱盘的动画效果
使用css的动态绑定技术实现动画启动-停止的控制
使用正则表达式对字符串进行搜索、替换
使用css的tranform配合js的setInterval同步歌曲的播放进度显示相应歌词
安装和使用uni-app的扩展组件uni-ui优化应用开发
八、我想做的
九、学习uni-app感悟
一、学习准备
二、学习过程
入门阶段
实践阶段
三、学习收获
一、什么是uni-app
Uni-app是一款基于Vue.js的跨平台开发框架，它可以用于同时开发微信小程序、H5、iOS、Android等多个平台的应用程序。Uni-app使用了一套基于Web标准的组件库和编译器，并提供各个平台特有的API和组件，以便开发者能够方便地进行跨平台开发。使用Uni-app可以大大提升开发效率和应用性能，同时也减少了不同平台开发的重复工作,由此可以从常用的 uni-app 开发工具 HBuilder 可以看出该特点
二、功能框架
Uni-app是一种跨平台的开发框架，可以使用一套代码同时开发iOS、Android和Web应用程序。它基于Vue.js框架，提供了许多功能和组件，使开发人员可以轻松地创建复杂的应用程序。
Uni-app的功能框架包括以下内容：
1. 组件库：Uni-app提供了一组内置组件，如按钮、输入框、列表、轮播图等，这些组件可以帮助您快速构建UI界面。
2. 插件市场：Uni-app插件市场提供了各种插件，包括支付、地图、分享、推送等，可以帮助您扩展应用程序的功能。
3. API：Uni-app提供了一组API，可以访问设备的硬件和软件功能，例如相机、录音、蓝牙等。
4. 路由：Uni-app的路由功能可以帮助您管理应用程序的页面，可以进行页面切换、传递参数等。
5. 文件系统：Uni-app提供了访问文件系统的API，可以读取和写入文件，以及使用本地数据库。
6. 网络请求：Uni-app支持使用ajax进行网络请求，支持GET、POST等HTTP请求方法。
7. 构建和部署：Uni-app提供了构建工具，可以将代码构建成原生应用程序和Web应用程序，然后部署到不同的平台。
三、功能优点
uni-app 的功能优点主要有以下几个：
-
跨平台开发：uni-app 支持一次开发，可同时在多个平台发布，如微信小程序、H5、Android、iOS、快应用等平台，大大提高开发效率。
-
开发简单、快捷：uni-app 采用 Vue.js 框架，开发者只需要掌握一种技术栈，即可快速构建跨平台应用程序。
-
组件丰富、易用：uni-app 提供了丰富的组件库和插件，包括基础组件、业务组件、第三方组件等，大大降低了开发难度。
-
性能高效：uni-app 采用了一系列技术手段来优化性能，如页面预加载、请求合并、增量更新等，提高了应用程序的加载速度和运行效率。
-
开源：uni-app 是一个完全开源的项目，任何人都可以参与贡献代码和提出改进建议，保证了项目的可靠性和可持续性。
综上所述，uni-app 具有跨平台、开发简单、易用、性能高效、开源等优点，在实际开发中得到了广泛应用。
四、uni-app的生命周期：
| 1. onLaunch：小程序初始化时触发，全局只触发一次。 | |
| 2. onShow：小程序启动或从后台进入前台显示时触发。 | |
| 3. onHide：小程序从前台进入后台时触发。 | |
| 4. onError：小程序发生脚本错误或API调用失败时触发。 | |
| 5. onPageNotFound：小程序页面不存在时触发。 | |
| 6. onUniNViewMessage：uni-app页面与原生页面通信时触发。 | |
| 7. onLoad：vue组件/页面生命周期，组件/页面加载时触发 | |
| 8. onReady：vue组件/页面生命周期，组件/页面初次渲染完成时触发。 | |
| 9. onUnload：vue组件/页面生命周期，组件/页面卸载时触发。 | |
| 10. onResize：uni-app应用窗口大小变化时触发。 |
这些生命周期函数可以用于处理不同场景下的业务逻辑需求，例如在onLoad函数中请求数据，onReady函数中对页面进行初始化等。
五、uni-app的页面跳转
-
在 uni-app 中，可以使用
uni.navigateTo或uni.redirectTo方法进行页面跳转。其中，navigateTo方法会保留当前页面，而redirectTo方法会关闭当前页面。 -
在跳转页面时，需要指定跳转的页面路径，可以使用相对路径或绝对路径。例如，如果要跳转到当前目录下的
page2.vue页面，可以使用相对路径：uni.navigateTo({url: 'page2'})；如果要跳转到根目录下的pages/page2.vue页面，可以使用绝对路径：uni.navigateTo({url: '/pages/page2'}) -
在跳转页面时，可以通过
uni.navigateTo或uni.redirectTo方法传递参数。例如，可以在跳转时向目标页面传递一个参数，如：uni.navigateTo({url: 'page2?name=张三'})。在目标页面的onLoad方法中，可以通过options参数获取传递过来的参数：onLoad(options) {console.log(options.name)}
六、在过程中收获到的知识
学会了使用css3的animation实现音乐唱盘的动画效果，这个就是css3的一个特性。
学会了怎么样去实现一个音乐播放器，就是实例化一个uni.createInnerAudioContext()这个对象，这个是uni-app里面别人封装好给我们用的一个apl方法和对象，其中innerAudioContext.autoplay = true这个对象是确定了这个音乐是否自动播放。还有许多方法，如：onPlay()、onPause()、onError()等这些开始和暂停的方法。
示例
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});学会使用transform 移动歌词和对应的css方法。
学会使用定时器setInterval。
用setInterval()函数在Vue组件中实现定时器功能。在Vue的mounted()钩子函数中，使用setInterval()启动定时器，同时在beforeDestroy()钩子函数中清除定时器以避免内存泄漏。
以下是一个简单的示例：
{{ counter }}
在上面的示例中，我们使用setInterval()函数每秒钟增加counter的值，并且在beforeDestroy()钩子函数中清除定时器。
七、网易云uni-app开发总结
uni-app项目的创建
使用git和gitee进行代码的版本控制
pages.json页面路由的配置
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}, {
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "榜单列表",
"enablePullDownRefresh": false
}
}, {
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/player/player",
"style" :
{
"navigationBarTitleText": "播放器",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/personacenter/personacenter",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UAMusic-lu",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc": "static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/iamges/index.png",
"selectedIconPath": "static/iamges/index1.png",
"text": "首页"
},
{
"pagePath": "pages/personacenter/personacenter",
"text": "个人中心",
"iconPath": "static/iamges/my1.png",
"selectedIconPath": "static/iamges/my.png"
}
]
},
"uniIdRouter": {}
}iconfont的下载与使用
Uni-app可以使用iconfont作为图标库，使用的过程中需要进行以下步骤：
- 登录iconfont官网，选择需要的图标，并添加到购物车；
- 进入购物车，确认购买信息并确认，然后进行付款；
- 付款成功后，进入iconfont的“已购资源”页面，找到购买的图标库，点击“下载代码”按钮；
- 在弹出的框中选择“Unicode”，然后点击“复制代码”按钮；
- 在Uni-app的项目中创建一个“iconfont.css”文件，并将复制的代码粘贴到该文件中；
- 在需要使用图标的地方，使用如下代码引用图标：
其中，“icon-xxxx”表示购买的图标库中的图标名称。
请注意，引用图标时需要将class属性设置为“iconfont”，这是iconfont的基本样式。此外，如果需要使用多个图标库，则需要在“iconfont.css”文件中分别添加相应的代码。
安装、使用第三方组件-循环骨架m-for-skeleton
自定义组件开发-uamhead及使用向组件props传值
{{ title }}
使用apifox调用、测试webapi
使用uni.request发起对api的网络请求并处理响应结果
import {baseUrl} from './config.js';
export function topList() {
return new Promise(function(resolve, reject) {
uni.request({
url: `${baseUrl}/toplist/detail`,
method: 'GET',
data: {},
success: res => {
let result = res.data.list;
resolve(result.splice(0, 4));
},
fail: (err) => {
console.log(err);
},
complete: () => {}
});
});
}
export function list(listid){
return uni.request({
url:`${baseUrl}/playlist/detail?id=${listid}`,
method:"GET"
});
}
export function songDetail(id){
return uni.request({
url : `${baseUrl}/song/detail?ids=${id}`,
method : 'GET'
})
}
export function songUrl(id){
return uni.request({
url : `${baseUrl}/song/url?id=${id}`,
method : 'GET'
})
}
export function songLyric(id){
return uni.request({
url : `${baseUrl}/lyric?id=${id}`,
method : 'GET'
})
}
export function searchHot(){
return uni.request({
url: `${baseUrl}/search/hot/detail`,
method: 'GET',
})
}
export function searchWord(word){
return uni.request({
url: `${baseUrl}/search?keywords=${word}`,
method: 'GET',
})
}
export function searchSuggest(word){
return uni.request({
url: `${baseUrl}/search/suggest?keywords=${word}&type=mobile`,
method: 'GET',
})
}
使用uni.navigate进行页面间的跳转及传递参数
navPersonacenter(id){
uni.navigateTo({
url: '/pages/personacenter/personacenter?id='
});
}使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
使用css3的animation实现音乐唱盘的动画效果
html代码：
css：
@keyframes move {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.player .run {
animation-play-state: running;
}
使用css的动态绑定技术实现动画启动-停止的控制
methods: {
playing() {
innerAudioContext.autoplay = true
innerAudioContext.src = this.song.songUrl;
innerAudioContext.onPlay(() => {
// innerAudioContext.play()
this.listenLyricIndex()
this.isplayrotate = true,
console.log("开始播放")
})
innerAudioContext.onEnded(() => {
console.log("已经播放完成")
this.isplayrotate = false
})
this.innerAudioContext = innerAudioContext
},
pause() {
innerAudioContext.pause()
this.isplayrotate = false;
console.log("停止播放")
innerAudioContext.onPause(() => { //暂停时调用的方法
innerAudioContext.startTime = innerAudioContext.currentTime
//startTime 设置开始时间 currentTime 暂停时的秒数 官方文档都有写
})
},使用正则表达式对字符串进行搜索、替换
// 歌词
songLyric(playerid).then(res => {
// this.song.lyric=res.data.lrc.lyric;
let lyric = res.data.lrc.lyric;
let result = [];
let re = /\[([^\]]+)\]([^[]+)/g;
lyric.replace(re, ($0, $1, $2) => {
result.push({
time: this.formatTimeToSec($1),
lyric: $2
});
});
this.song.lyric = result;
})
console.log(res)
})使用css的tranform配合js的setInterval同步歌曲的播放进度显示相应歌词
html代码：
{{item.lyric}}
{{song.artist}}:{{song.name}} css：
.active {
color: green;
}
.lyric .wrap {
transition: .5s;
}
.lyric .item {
/* height: 82rpx; */
}安装和使用uni-app的扩展组件uni-ui优化应用开发
八、我想做的
由于我们做这个项目是调用别人开发好的api，所以自己要学会做后端开发，自己做后端数据然后给前端调用才能更好的提升自己前后端的本领。
九、学习uni-app感悟
一、学习准备
在学习Uni-app之前，我需要具备一定的前端技能，例如HTML、CSS、JavaScript等基础知识，并且需要了解一些Vue.js的相关知识，因为Uni-app是基于Vue.js的。
二、学习过程
-
入门阶段
在学习Uni-app的入门阶段，我首先需要了解Uni-app的特点和优势，以及它的整体架构和基本组件的使用方法。这一阶段我主要通过阅读官方文档和参考案例进行学习。
-
实践阶段
接下来的实践阶段是我学习Uni-app最重要的一步，通过实践我能够更加深入地理解Uni-app的使用方法以及解决实际问题的能力。在这一阶段，我通过自己在Uni-app中开发小程序和H5页面的过程中，不断地调试和优化，积累了丰富的经验。
三、学习收获
通过学习Uni-app，我学会了如何在一个代码库中同时构建多个平台的应用程序，这不仅提高了我的开发效率，也让我更好地满足了用户的需求。此外，我还学会了如何使用Uni-app提供的组件和API，以及如何优化应用程序的性能和用户体验。
总的来说，学习Uni-app是一次非常有收获的经历，它让我更加深入地了解了Vue.js和移动端应用开发的技术和思想。同时，通过学习Uni-app，我也更加自信地面对未来的工作和学习挑战。