【Uni-app】技术学习总结

目录

一、Uni-app简介

二、本次学习任务——仿网易云音乐

三、学习制作过程

   3.1、开发环境的配置

   3.2、创建项目文件

   3.3、完成主页页面

   3.4、完成歌单页面

   3.5、完成播放歌曲界面

   3.6、完成搜索界面

四、学习总结 

---

一、Uni-app简介

        Uni-app是一款基于Vue.js框架的跨平台开发工具，特点是一套代码多端运行，开发者只需要编写一份代码，就可以在多个平台上运行，同时Uni-app还提供了丰富的组件和API，方便开发者快速开发出高质量的应用程序。

二、本次学习任务——仿网易云音乐

三、学习制作过程

   3.1、开发环境的配置

        开发环境是软件开发过程中最重要的一个环节，其决定了开发效率和代码质量，减少开发过程中的错误和调试时间，本次学习使用的是Hublider X搭配微信开发小程序来进行本次技术学习

   3.2、创建项目文件

        本次项目中包含主页、歌单、播放器、搜索四个页面，在歌单页面完成前，在pagers.json中写入tabber路由

	"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/Home.png",
			"selectedIconPath": "static/Home.png",
			"text": "首页"
		}, {
			"pagePath": "pages/list/list",
			"iconPath": "static/List.png",
			"selectedIconPath": "static/List.png",
			"text": "列表"
		},{
			"pagePath": "pages/search/search",
			"iconPath": "static/Search.png",
			"selectedIconPath": "static/Search.png",
			"text": "搜索"
		},{
			"pagePath": "pages/player/player",
			"iconPath": "static/Player.png",
			"selectedIconPath": "static/Player.png",
			"text": "播放器"
		}
		]
	},
	"uniIdRouter": {}
}

   3.3、完成主页页面

        主页由四个歌单组成，分别是飙升榜，新歌榜，原创榜，热歌榜，每个歌单使用一个单独的图标，右边附带该榜的前三首歌，在图标里还附带着更新歌曲首数

   3.4、完成歌单页面

        歌单页面需要通过主页进行传参，需要如下代码

		methods: {
			navPlayer(id){
				console.log(id),
				uni.navigateTo({
					url:'/pages/player/player?id='+id
				})
			}
		}

         最终效果如下

   3.5、完成播放歌曲界面

        播放歌曲界面和歌单界面一样，需要单击歌曲调用歌曲传参，还要对开始播放时间和停止播放时间进行时间监听，在停止播放后，单击开始播放将从停止播放时间的上继续播放，代码如下

		onLoad(options){
			let id = options.id;
			
 		songDetail(id).then((res)=>{
			let s=res.data.songs[0]
			this.song.name=s.name
			this.song.id = s.id
			this.song.artist=s.ar[0].name
			this.song.picUrl=s.al.picUrl
		songUrl(this.song.id).then(res=>{
			this.song.songUrl=res.data.data[0].url;
			})
		songLyric(id).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;
		})
	})
},
		
		methods: {
			playing(){
				innerAudioContext.src = this.song.songUrl;
				if (innerAudioContext.paused == true) {
					innerAudioContext.play()
					this.isplayrotate = true;
					this.listenLyricIndex();
					console.log("开始播放")
				}
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
				this.innerAudioContext=innerAudioContext;
			},
			stopplaying(){
					innerAudioContext.pause()
					this.isplayrotate = false,
					console.log("暂停播放")
				innerAudioContext.onPause(() => { 
					innerAudioContext.startTime = innerAudioContext.currentTime
				});
			},
			formatTimeToSec(time){
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			listenLyricIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					for(var i=0;i<this.song.lyric.length;i++){
						if( this.song.lyric[this.song.lyric.length-1].time < this.innerAudioContext.currentTime ){
							this.lyricIndex = this.song.lyric.length-1;
							break;
						}
						if( this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i+1].time > this.innerAudioContext.currentTime ){
							this.lyricIndex = i;
						}
					}
				});
			}
		}

   3.6、完成搜索界面

        搜索界面对我来说是最难也是最复杂的一个界面，他的功能是输入一个字或者字母后，会跳出拥有相关字或者字母的选择，单击后跳转到该歌曲播放界面，且搜索页面还包含了热门搜索，其代码如下

		methods: {

			handleToWord(searchWord) {
				console.log("点击searchWord", searchWord)
				this.keyword = searchWord;
			},

			input() {
				this.searchingStatus = 'searching'
				let word = this.keyword
				var arr = []
				searchSuggest(word).then(res => {
					console.log("searchSuggest", res)
					arr = res.data.result.allMatch.map((item, index) => {
						return item.keyword
					})
					this.suggestWord = arr
					console.log("搜索框suggestWord", this.suggestWord)
				})
			},
			
			select(index) {
				this.keyword = index
			},

			confirm() {
				this.searchingStatus = 'result'
				searchWord(this.keyword).then((res) => {
					console.log("searchWord", res)
					if (res.data.code == '200') {
						this.searchList = res.data.result.songs;
					}
					console.log("searchList", this.searchList)
					this.historyList.unshift(this.keyword);
					this.historyList = [...new Set(this.historyList)];
					if (this.historyList.length > 10) {
						this.historyList.length = 10;
					}


					uni.setStorage({
						key: 'searchHistory',
						data: this.historyList
					})
					console.log("historyList2", this.historyList)
				})
			},

			navPlayer(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/player/player?id=' + id

				})
			},

			historydel() {
				localStorage.removeItem('searchHistory')
				this.historyList = ''
			},

			choose(index) {
				this.keyword = index
			},
		},


		onLoad() {
			searchHot().then(res => {
				this.searchword = res.data.data
				console.log(res)
			})
			searchWord().then(res => {
				console.log(res)
			})
			searchSuggest().then(res => {
					console.log(res)
				}),


				uni.getStorage({
					key: 'searchHistory',
					success: (res) => {
						console.log("searchHistory", res)
						this.historyList = res.data;
						console.log("historyList1", this.historyList)
					}
				});

		},

	}

最终效果如下 

 

四、学习总结 

对uni-app的认识

uni-app的一些关键字

正确的对pagers.json文件的修改

使用传参进入相关界面

播放界面唱盘的控制

开始播放与停止播放的时间监听

搜索输入一个字或者字母时出现相关选项

apifox的使用以及api的调用方法

使用外部插件将Hubilder X的源码传入码云仓库