devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

对Uni-app学习总结_uniapp使用总结

作者：笔触狂放9 | 2024-04-18 08:57:14

赞

踩

uniapp使用总结

目录

前言

一、学习总结

二、uni-app项目的创建

三、创建相关子页

pages.json页面路由的配置

使用循环骨架m-for-skeleton

对于实现播放器的启动和停止动画的方法

​编辑

四、api接口的调用

前言

        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，用nui-app仿网易云的学习与总结

一、学习总结

  1. 让跨平台开发变得更简单。Uni-app使用Vue.js语法，可以使用同一份代码编译出iOS、Android、Web等多个平台的应用，减少了开发者的工作量。

  2. 减少开发难度。Uni-app提供了一套完整的开发生态圈，包括开发工具、UI组件库、API插件等，减少了开发者的投入。

  3. 性能表现良好。Uni-app使用了优化的渲染引擎，可以让应用在不同平台上都有流畅的性能表现。

  4. 社区活跃度高。Uni-app拥有一个庞大的开发社区，开发者可以在社区中获取资源、交流经验、解决问题。

  5. 可扩展性强。Uni-app提供了许多插件和组件，同时也支持第三方插件和组件，开发者可以根据需要进行扩展。

 现将用nui-app仿网易云的相关步骤和代码分享和大家共同学习，若有不足之处，请见谅！

二、uni-app项目的创建

        1. 创建uni-app空项目并分别运行到浏览器、Android模拟器和微信开发者工具

        2. 创建uni-app的hello项目并分别运行到浏览器、Android模拟器和微信开发者工具，以查看官方的组件、接口、模板等示例

        3. 项目结构

                · pages文件夹存放页面

                · static内的文件不会进行编译，不要放js文件，可放到common中（注意体积限制）

                · unpackage文件夹存放打包的文件

                · components文件夹存放各种组件

                · App.vue代表应用，包括应用层的生命周期方法，全局样式等

                · pages.json整个应用的页面集合，第一项为启动页，可配置页面路由及样式和标题

                · manifest.json应用配置，包括图标配置、启动界面配置、权限配置及其他开发配置

                · main.js应用入口文件

 

三、创建相关子页

 在文件pages中分别创建index、list、player、search父文件和子页面index.vue、list.vue、player.vue、search.vue.

pages.json页面路由的配置

  1. {
  2. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3. 	{
  4. 			"path": "pages/index/index",
  5. 			"style": {
  6. 			
  7. 			}
  8. 		},
  9. 		
  10. 		{
  11.             "path" : "pages/list/list",
  12.             "style" :                                                                                    
  13.             {
  14.                 "enablePullDownRefresh": false
  15.             }
  16.             
  17.         }
  18.         ,{
  19.             "path" : "pages/search/search",
  20.             "style" :                                                                                    
  21.             {
  22.                 "enablePullDownRefresh": false
  23.             }
  24.             
  25. 			
  26.         }
  27.         ,{
  28.             "path" : "pages/player/player",
  29.             "style" :                                                                                    
  30.             {
  31.                 "navigationBarTitleText": "",
  32.                 "enablePullDownRefresh": false
  33.             }
  34.             
  35.         }
  36.     ],
  37. 	"globalStyle": {
  38. 		"navigationBarTextStyle": "black",
  39. 		"navigationBarTitleText": "UAMusic-guo",
  40. 		"navigationBarBackgroundColor": "#F8F8F8",
  41. 		"backgroundColor": "#F8F8F8"
  42. 	},
  43. 	
  44. 	
  45. 	
  46. 	"uniIdRouter": {}
  47. }

使用循环骨架m-for-skeleton

循环骨架m-for-skeleton是一个第三方组件，用于在Vue.js应用程序中展示 loading 骨架屏。

安装循环骨架m-for-skeleton使用案例，可以通过以下步骤实现：

  1. 在终端中进入Vue.js项目的根目录。
  2. 运行以下命令安装m-for-skeleton组件： 
    npm install m-for-skeleton --save

  3. 在Vue.js项目的入口文件中引入组件： 
    import MforSkeleton from 'm-for-skeleton'

  4. 将组件注册为全局组件： 
    Vue.component('m-for-skeleton', MforSkeleton)

  5. 在需要展示 loading 骨架屏的组件中使用m-for-skeleton组件，例如： 
    1. <template>
    2.   <div>
    3.     <m-for-skeleton :count="5">
    4.       <div class="card">
    5.         <h2>Card Title</h2>
    6.         <p>Card description goes here</p>
    7.       </div>
    8.     </m-for-skeleton>
    9.   </div>
    10. </template>

    在这个例子中，我们在一个具有 class 名称为“card”的 div 元素上使用了m-for-skeleton组件，并指定了要展示 5 个骨架卡片。

现在你可以在应用程序中使用循环骨架m-for-skeleton组件展示 loading 骨架屏。

1.使用了骨架屏框架的index.vu页面和效果图

  1. <template>
  2. 	<view class="content">
  3. 		<uamhead :title="title"></uamhead>
  4. <!-- 		<image class="logo" src="/static/long2.npg"></image>
  5. 		<view class="text-area">
  6. 			<text class="title">{{title}}</text>
  7. 		</view> -->
  8. 		
  9. 		<scroll-view scroll-y="true" >
  10. 			<view>
  11. 				<m-for-skeleton
  12. 				:avatarSize="200"
  13. 				:row="3"
  14. 				:title="false"
  15. 				:loading="loading"
  16. 				isarc="square"
  17. 				:titleStyle="{}"
  18. 				v-for="(item,key) in 4"
  19. 				:key="key">
  20. 				</m-for-skeleton>
  21. 				</view>
  22. 				<view class="index-list" v-for="(item,index) in playlist" :key="index" @click="handleToList(item.id)">
  23. 					<view class="index-list-item">
  24. 						<view class="index-list-img">
  25. 							<image :src="item.coverImgUrl" mode=""></image>
  26. 							<text>{{item.updateFrequency}}</text>
  27. 						</view>
  28. 						<view class="index-list-text">
  29. 							<view  v-for="(musicItem,index) in item.tracks" :key="index">
  30. 								{{index+1}}.{{musicItem.first}}-{{musicItem.second}}
  31. 							</view>
  32. 						</view>
  33. 					</view>
  34. 				</view>
  35. 		</scroll-view>
  36. 	</view>
  37. </template>
  38.  
  39. <script>
  40. 	import { topList } from '../../common/api.js'
  41. 	// const toplistdata=require('@/static/toplist.json')
  42. 	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
  43. 	import uamhead from "../../components/uamhead/uamhead.vue"
  44. 	export default {
  45. 		components: {
  46. 		    mForSkeleton
  47. 		},
  48. 		data() {
  49. 			return {
  50. 				playlist:[],
  51. 				title: 'UAMusic',
  52. 				loading: true
  53. 			}
  54. 		},
  55. 		onLoad() {
  56. 			// this.playlist= toplistdata;
  57. 			topList().then((res)=>{
  58. 							if(res.length){
  59. 								setTimeout(()=>{
  60. 									this.playlist = res;
  61. 									this.loading=false
  62. 								},2000);
  63. 								console.log(res)
  64. 							}
  65. 						});
  66. 		},
  67. 		methods: {
  68. 			handleToList(id){
  69. 				uni.navigateTo({
  70. 					url:'/pages/list/list?listid='+id
  71. 				})
  72. 			}
  73. 		}
  74. 	}
  75. </script>
  76.  
  77. <style>
  78. 	.content {
  79. 		display: flex;
  80. 		flex-direction: column;
  81. 		align-items: center;
  82. 		justify-content: center;
  83. 	}
  84.  
  85. 	.logo {
  86. 		height: 200rpx;
  87. 		width: 200rpx;
  88. 		margin-top: 200rpx;
  89. 		margin-left: auto;
  90. 		margin-right: auto;
  91. 		margin-bottom: 50rpx;
  92. 	}
  93.  
  94. 	.text-area {
  95. 		display: flex;
  96. 		justify-content: center;
  97. 	}
  98.  
  99. 	.title {
  100. 		font-size: 36rpx;
  101. 		color: #8f8f94;
  102. 	}
  103. 	.index-list{ margin:0 30rpx;;width: 95%}
  104. 	.index-list-item{ display: flex; margin-bottom: 35rpx;}
  105. 	.index-list-img{ width:212rpx; height:212rpx; margin-right:20rpx; border-radius: 15rpx; overflow: hidden; position: relative;}
  106. 	.index-list-img image{ width:100%; height:100%;}
  107. 	.index-list-img text{ position: absolute; font-size:22rpx; color:white; bottom: 15rpx; left:15rpx;}
  108. 	.index-list-text{ flex:1; font-size:24rpx; line-height: 68rpx;}
  109. 	
  110. </style>

2.list.vue页面和效果图

  1. <template>
  2.  
  3. 	<view>
  4. 		<uamhead :title="title"></uamhead>
  5. 		<view class="list-head">
  6. 			<view class="list-head-img">
  7. 				<image :src="playlist.coverImgUrl" mode=""></image>
  8. 				<text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
  9. 			</view>
  10. 			<view class="list-head-text">
  11. 				<view>{{ playlist.name }}</view>
  12. 				<view>{{ playlist.description }}</view>
  13. 			</view>
  14. 		</view>
  15. 		<scroll-view scroll-y="true" class="scroll-Y">
  16. 			<view v-show="isShow" class="list-music-title">
  17. 				<text class="iconfont iconbofang1"></text>
  18. 				<text>播放全部</text>
  19. 				<text>(共{{ playlist.trackCount }}首)</text>
  20. 			</view>
  21. 			<view class="list-music">
  22. 				<view class="list-music-item" v-for="(item,index) in playlist.tracks" :key="item.id"
  23. 					@tap="navPlayer(item.id)">
  24. 					<view class="list-music-top">{{ index + 1 }}</view>
  25. 					<view class="list-music-song">
  26. 						<view>{{ item.name }}</view>
  27. 						<view>
  28. 							<image v-if=" privileges[index].flag > 60 && privileges[index].flag < 70"
  29. 								src="../../static/独家.png" mode=""></image>
  30. 							<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>
  31. 							{{ item.ar[0].name }} - {{ item.name }}
  32. 						</view>
  33. 					</view>
  34. 					<text class="iconfont iconbofang"></text>
  35. 				</view>
  36. 			</view>
  37. 		</scroll-view>
  38. 	</view>
  39. </template>
  40.  
  41. <script>
  42. 	import {uamhead} from '../../components/uamhead/uamhead.vue'
  43. 	import {
  44. 		list
  45. 	} from '../../common/api.js'
  46. 	
  47. 	export default {
  48. 		data() {
  49. 			return {
  50. 				title: "榜单列表",
  51. 				playlist: {
  52. 					coverImgUrl: '',
  53. 					trackCount: '',
  54. 					creator: ''
  55. 				},
  56. 				privileges: [],
  57. 				isShow: false
  58. 			}
  59. 		},
  60. 		onLoad(options) {
  61. 			let listid = options.listid;
  62. 			list(listid).then((res) => {
  63. 				if (res.data.code == '200') {
  64. 					this.title = res.data.playlist.name
  65. 					this.playlist = res.data.playlist
  66. 					this.privileges = res.data.privileges
  67. 					this.isShow = true
  68. 				}
  69. 			})
  70. 		},
  71. 		methods: {
  72. 			navPlayer(id) {
  73. 				console.log(id)
  74. 				uni.navigateTo({
  75. 					
  76. 				url:'/pages/player/player?songId='+id
  77. 				})
  78. 				
  79. 			}
  80. 		}
  81. 	}
  82. </script>
  83.  
  84. <style>
  85. 	.list-head {
  86. 		display: flex;
  87. 		margin: 30rpx;
  88. 	}
  89.  
  90. 	.list-head-img {
  91. 		width: 265rpx;
  92. 		height: 265rpx;
  93. 		border-radius: 15rpx;
  94. 		margin-right: 40rpx;
  95. 		overflow: hidden;
  96. 		position: relative;
  97. 	}
  98.  
  99. 	.list-head-img image {
  100. 		width: 100%;
  101. 		height: 100%;
  102. 	}
  103.  
  104. 	.list-head-img text {
  105. 		position: absolute;
  106. 		font-size: 26rpx;
  107. 		color: white;
  108. 		right: 8rpx;
  109. 		top: 8rpx;
  110. 	}
  111.  
  112. 	.list-head-text {
  113. 		flex: 1;
  114. 		font-size: 24rpx;
  115. 		color: #c3d1e3;
  116. 	}
  117.  
  118. 	.list-head-text image {
  119. 		width: 52rpx;
  120. 		height: 52rpx;
  121. 		border-radius: 50%;
  122. 	}
  123.  
  124. 	.list-music {
  125. 		background: white;
  126. 		border-radius: 50rpx;
  127. 		overflow: hidden;
  128. 		margin-top: 45rpx;
  129. 	}
  130.  
  131. 	.list-music-item {
  132. 		display: flex;
  133. 		margin: 0 30rpx 60rpx 44rpx;
  134. 		align-items: center;
  135. 	}
  136.  
  137. 	.list-music-top {
  138. 		width: 56rpx;
  139. 		font-size: 28rpx;
  140. 		color: #979797;
  141. 	}
  142.  
  143. 	.list-music-song {
  144. 		flex: 1;
  145. 		line-height: 40rpx;
  146. 	}
  147.  
  148. 	.scroll-Y {
  149. 		height: 700rpx;
  150. 	}
  151.  
  152. 	.list-music-title {
  153. 		
  154. 		height: 58rpx;
  155. 		line-height: 58rpx;
  156. 		margin: 30rpx 30rpx 70rpx 30rpx;
  157. 	}
  158.  
  159. 	.list-music-song image {
  160. 		width: 34rpx;
  161. 		height: 22rpx;
  162. 		margin-right: 10rpx;
  163. 	}
  164. </style>

3.player.vue页面和效果图

  1. <template>
  2. 	<view>
  3. 		<uamhead :title="title"></uamhead>
  4. 	<view class="player">
  5. 				<image :src="song.picUrl" :class="{'run' : isplayrotate}" mode=""></image>
  6. 				<text class="iconfont iconpause" v-if="isplayrotate" @tap="noplaying"></text>
  7. 				<text class="iconfont iconbofang" v-else="" @tap="playing"></text>
  8. 				<view></view>
  9. 			</view>
  10. 		
  11. 		<scroll-view class="lyric" scroll-y="true">
  12. 				<view class= "wrap" :style="{ transform : ' translateY(' + -(lyricIndex - 1)*82 + 'rpx)' }">
  13. 				  <view class="item" :class="{ active : lyricIndex == index}" v-for="(item, index) in song.lyric" :key="index" >
  14. 				  {{item. lyric}}
  15. 				  </view>
  16. 				  </view>
  17. 			</scroll-view>
  18. 			
  19. 			
  20. 		<view>{{song.artist}}:{{song.name}}</view>
  21. 		
  22. 	
  23. 	</view>
  24. </template>
  25. <script>
  26. 	const innerAudioContext = uni.createInnerAudioContext();
  27. 	import uamhead from '../../components/uamhead/uamhead.vue'
  28. 	import {
  29. 		songDetail,
  30. 		songLyric,
  31. 		songUrl
  32. 	} from '../../common/api.js';
  33. 	export default {
  34. 		data() {
  35. 			return {
  36. 				title: "黑胶唱片",
  37. 				song: {
  38. 					id: '',
  39. 					name: '',
  40. 					artist: '',
  41. 					picUrl: '',
  42. 					songUrl: '',
  43. 					lyric: ''
  44. 				},
  45. 				 isplayrotate: false,
  46. 				 lyricIndex: 0
  47. 			}
  48. 		},
  49. 		onLoad(options) {
  50. 			let sId =options.songId;
  51. 			songDetail(sId).then(res => {
  52. 				let s = res.data.songs[0]
  53. 				this.song.name = s.name
  54. 				this.song.id = s.id
  55. 				this.song.artist = s.ar[0].name
  56. 				this.song.picUrl = s.al.picUrl
  57. 				//获取音乐的地址
  58. 				songUrl(this.song.id).then(res => {
  59. 					this.song.songUrl = res.data.data[0].url;
  60. 					console.log(this.song.songUrl)
  61. 				})
  62. 				songLyric(sId).then(res=>{
  63. 				var	lyric=res.data.lrc.lyric;
  64. 				var result=[];
  65. 				let re = /\[([^\]]+)\]([^[]+)/g;
  66. 					// console.log('this.song.lyric')
  67. 					lyric.replace(re,($0,$1,$2)=>{
  68. 						result.push({time : this.formatTimeToSec($1),lyric : $2});
  69. 						
  70. 					});
  71. 					this.song.lyric=result;
  72. 					
  73. 				})
  74. 				
  75. 			})
  76. 		},
  77. 		methods: {
  78. 		playing() {
  79. 			
  80. 						innerAudioContext.autoplay = true;
  81. 						innerAudioContext.src = this.song.songUrl;
  82. 						innerAudioContext.onPlay(() => {
  83. 							this.isplayrotate = true;
  84. 							this.listenLyricIndex();
  85. 							this.innerAudioContext = innerAudioContext
  86. 						});
  87. 						innerAudioContext.onEnded(()=>{
  88. 							this.isplayrotate=false;
  89. 						})
  90. 		
  91. 					},
  92. 					noplaying() {
  93. 						innerAudioContext.pause();
  94. 					this.isplayrotate = false;
  95. 						innerAudioContext.onPause(() => { //暂停时调用的方法  
  96. 							
  97. 							innerAudioContext.startTime = innerAudioContext.currentTime	//startTime  设置开始时间  currentTime 暂停时的秒数 
  98. 						
  99. 						});
  100. 	},
  101. 	
  102. 			formatTimeToSec(time){
  103. 				var arr=time.split(':');
  104. 				return (parseFloat(arr[0]) *60 + parseFloat(arr[1])).toFixed(2);
  105. 			},
  106. 			listenLyricIndex(){
  107. 			    clearInterval(this.timer);
  108. 			    this.timer= setInterval(()=>{
  109. 			    for(var i=0;i<this.song.lyric.length;i++){
  110. 			    if(this.song.lyric[this.song.lyric.length-1].time < this.innerAudioContext.currentTime ){
  111. 			    this.lyricIndex=this.song.lyric.length-1;
  112. 			    break;
  113. 			    }
  114. 			    if(this.song.lyric[i].time<this.innerAudioContext.currentTime && this.song.lyric[i+1].time > this.innerAudioContext.currentTime ){
  115. 			    this.lyricIndex=i;
  116. 			    }
  117. 			    }
  118. 			    });
  119. 				}
  120. 		}
  121. 	}
  122. </script>
  123.  
  124. <style>
  125. 	.player {
  126. 		width: 480rpx;
  127. 		height: 480rpx;
  128. 		background: url(~@/static/disc.png);
  129. 		background-size: cover;
  130. 		margin: 210rpx auto 44rpx auto;
  131. 		position: relative;
  132. 		z-index: 2;
  133. 	}
  134.  
  135. 	.player image {
  136. 		width: 480rpx;
  137. 		height: 480rpx;
  138. 		border-radius: 50%;
  139. 		position: absolute;
  140. 		left: 0;
  141. 		top: 0;
  142. 		right: 0;
  143. 		bottom: 0;
  144. 		margin: auto;
  145. 		z-index: 3;
  146. 	}
  147.  
  148. 	.player text {
  149. 		width: 100rpx;
  150. 		height: 100rpx;
  151. 		font-size: 100rpx;
  152. 		position: absolute;
  153. 		left: 0;
  154. 		top: 0;
  155. 		right: 0rpx;
  156. 		bottom: 0;
  157. 		margin: 180rpx auto;
  158. 		color: white;
  159. 		z-index: 4;
  160. 	}
  161.  
  162. 	.player view {
  163. 		position: absolute;
  164. 		width: 170rpx;
  165. 		height: 266rpx;
  166. 		position: absolute;
  167. 		left: 60rpx;
  168. 		right: 0;
  169. 		margin: auto;
  170. 		top: -170rpx;
  171. 		background: url(~@/static/needle.png);
  172. 		background-size: cover;
  173. 	}
  174.  
  175. 	.player image {
  176. 		width: 295rpx;
  177. 		height: 295rpx;
  178. 		border-radius: 50%;
  179. 		position: absolute;
  180. 		left: 0;
  181. 		top: 0;
  182. 		right: 0;
  183. 		bottom: 0;
  184. 		margin: auto;
  185. 		z-index: 3;
  186. 		animation: 10s linear infinite move;
  187. 		animation-play-state: paused;
  188. 	}
  189. 	
  190.  
  191.  
  192. 	@keyframes move {
  193. 		from {
  194. 			transform: rotate(0deg);
  195. 		}
  196.  
  197. 		to {
  198. 			transform: rotate(360deg);
  199. 		}
  200. 	}
  201.  
  202. 	.player .run {
  203. 		animation-play-state: running;
  204. 		
  205. 	}
  206. 	
  207. 	.lyric{height: 260rpx;line-height: 82rpx;font-size: 32rpx;text-align: center;color: #949495;overflow: hidden;}
  208. 	.active{ color:blue;}
  209. 	.lyric .wrap{ transition:.5s;}
  210. 	.lyric .item{  /* 
  211. 	*/
  212. 	/* overflow: hidden */;
  213. 	}
  214. </style>

对于实现播放器的启动和停止动画的方法

需要使用JavaScript来启动和停止动画。你可以使用JavaScript来动态地应用CSS类名来触发或停止动画。你可以使用以下代码来启动动画：

document.getElementById('yourElement').classList.add('yourAnimationClass');

这将向具有id“yourElement”的元素添加一个类名为“yourAnimationClass”的CSS类，该类定义了你的CSS动画。

停止动画时，你可以使用以下代码：

document.getElementById('yourElement').classList.remove('yourAnimationClass');

这将从具有id“yourElement”的元素中删除所添加的类名，从而停止动画。

可以使用任何JavaScript事件来触发这些方法，例如单击按钮或滚动到页面底部。

4.search.vue页面和效果页面

  1. <template>
  2. 	<view class="search">
  3. 		<uamhead :title="title"></uamhead>
  4. 		<view title="搜索" :icon="true" :iconBlack="true"></view>
  5. 		<view class="container">
  6. 			<scroll-view scroll-y="true">
  7. 				<view class="search-search">
  8. 					<text class="iconfont iconsearch"></text>
  9. 					<input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleToSearch"
  10. 						@input="handleToSuggest" />
  11. 					<text v-show="searchType == 2" @tap="handleToClose" class="iconfont iconguanbi"></text>
  12. 				</view>
  13. 				<block v-if="searchType == 1">
  14. 					<view class="search-history">
  15. 						<view class="search-history-head">
  16. 							<text>历史记录</text>
  17. 							<text class="iconfont iconlajitong" @tap="handleToClear"></text>
  18. 						</view>
  19. 						<view class="search-history-list">
  20. 							<view v-for="(item,index) in historyList" :key="index" @tap="handleToWord(item)">{{ item }}
  21. 							</view>
  22. 						</view>
  23. 					</view>
  24. 					<view class="search-hot">
  25. 						<view class="search-hot-title">热搜榜</view>
  26.  
  27. 						<view class="search-hot-item" v-for="(item,index) in searchHot" :key="index"
  28. 							@tap="handleToWord(item.searchWord)">
  29. 							<view class="search-hot-top">{{ index + 1 }}</view>
  30. 							<view class="search-hot-word">
  31. 								<view>
  32. 									{{ item.searchWord }}
  33. 									<image :src="item.iconType ? item.iconUrl : ''" mode="aspectFit"></image>
  34. 								</view>
  35. 								<view>{{ item.content }}</view>
  36. 								<!-- <text class="search-hot-count">{{ item.score}}</text>2222222222222222 -->
  37. 							</view>
  38.  
  39. 						</view>
  40. 					</view>
  41. 				</block>
  42. 				<block v-else-if="searchType == 2">
  43. 					<view class="search-result">
  44.  
  45. 						<view class="search-result-item" v-for="(item,index) in searchList" :key="index"
  46. 							@tap="handleToDetail(item.id)">
  47. 							<view class="search-result-word">
  48. 								<view>{{ item.name }}</view>
  49. 								<view>{{ item.artists[0].name }} - {{ item.album.name }}</view>
  50. 							</view>
  51. 							<text class="iconfont iconbofang"></text>
  52. 						</view>
  53. 					</view>
  54. 				</block>
  55. 				<block v-else-if="searchType == 3">
  56. 					<view class="search-suggest">
  57. 						<view class="search-suggest-title">搜索"{{ this.searchWord }}"</view>
  58.  
  59. 						<view class="search-suggest-item" v-for="(item,index) in suggestList" :key="index"
  60. 							@tap="handleToWord(item.keyword)">
  61. 							<text class="iconfont iconsearch"></text>
  62. 							{{ item.keyword }}
  63. 						</view>
  64. 					</view>
  65. 				</block>
  66. 			</scroll-view>
  67. 		</view>
  68. 	</view>
  69. </template>
  70.  
  71. <script>
  72. 	import {
  73. 		searchHot,
  74. 		searchWord,
  75. 		searchSuggest
  76. 	} from '../../common/api.js'
  77. 	import '../../common/iconfont.css'
  78. 	export default {
  79. 		data() {
  80. 			return {
  81. 				title: '',
  82. 				searchHot: [],
  83. 				searchWord: '',
  84. 				historyList: [],
  85. 				searchType: 1,
  86. 				searchList: [],
  87. 				suggestList: []
  88. 			}
  89. 		},
  90. 		onLoad() {
  91. 			searchHot().then((res) => {
  92. 				if (res.data.code == '200') {
  93. 					this.searchHot = res.data.data;
  94. 					// console.log(res)
  95. 				}
  96. 			});
  97. 			uni.getStorage({
  98. 				key: 'searchHistory',
  99. 				success: (res) => {
  100. 					this.historyList = res.data;
  101. 					console.log(res)
  102. 				}
  103. 			});
  104. 		},
  105. 		methods: {
  106.  
  107. 			handleToSearch() {
  108. 				this.historyList.unshift(this.searchWord);
  109. 				this.historyList = [...new Set(this.historyList)];
  110. 				if (this.historyList.length > 10) {
  111. 					this.historyList.length = 10;
  112. 				}
  113. 				uni.setStorage({
  114. 					key: 'searchHistory',
  115. 					data: this.historyList
  116. 				});
  117. 				this.getSearchList(this.searchWord);
  118. 			},
  119. 			handleToClear() {
  120. 				uni.removeStorage({
  121. 					key: 'searchHistory',
  122. 					success: () => {
  123. 						this.historyList = [];
  124. 					}
  125. 				});
  126. 			},
  127. 			getSearchList(word) {
  128. 				searchWord(word).then((res) => {
  129. 					if (res.data.code == '200') {
  130. 						this.searchList = res.data.result.songs;
  131. 						this.searchType = 2;
  132. 					}
  133. 				});
  134. 			},
  135.  
  136. 			handleToClose() {
  137. 				this.searchWord = '';
  138. 				this.searchType = 1;
  139. 			},
  140. 			handleToSuggest(ev) {
  141. 				let value = ev.detail.value;
  142. 				if (!value) {
  143. 					this.searchType = 1;
  144. 					return;
  145. 				}
  146. 				searchSuggest(value).then((res) => {
  147. 					if (res.data.code == '200') {
  148. 						this.suggestList = res.data.result.allMatch;
  149. 						this.searchType = 3;
  150. 					}
  151. 				});
  152. 			},
  153. 			handleToWord(word) {
  154. 				this.searchWord = word;
  155. 				this.handleToSearch();
  156. 			},
  157. 			handleToDetail(id) {
  158. 				uni.navigateTo({
  159. 					url: '/pages/player/player?songId=' + id
  160. 				});
  161. 			}
  162. 		}
  163. 	}
  164. </script>
  165.  
  166. <style scoped>
  167. 	.search-search {
  168. 		display: flex;
  169. 		background: #f7f7f7;
  170. 		height: 73rpx;
  171. 		margin: 28rpx 30rpx 30rpx 30rpx;
  172. 		border-radius: 50rpx;
  173. 		align-items: center;
  174. 	}
  175.  
  176. 	.search-search text {
  177. 		margin: 0 27rpx;
  178. 	}
  179.  
  180. 	.search-search input {
  181. 		font-size: 26rpx;
  182. 		flex: 1;
  183. 	}
  184.  
  185. 	.search-history {
  186. 		margin: 0 30rpx;
  187. 		font-size: 26rpx;
  188. 	}
  189.  
  190. 	.search-history-head {
  191. 		display: flex;
  192. 		justify-content: space-between;
  193. 	}
  194.  
  195. 	.search-history-list {
  196. 		display: flex;
  197. 		margin-top: 36rpx;
  198. 		flex-wrap: wrap;
  199. 	}
  200.  
  201. 	.search-history-list view {
  202. 		padding: 20rpx 40rpx;
  203. 		background: #f7f7f7;
  204. 		border-radius: 50rpx;
  205. 		margin-right: 30rpx;
  206. 		margin-bottom: 20rpx;
  207. 	}
  208.  
  209. 	.search-hot {
  210. 		margin: 30rpx 30rpx;
  211. 		font-size: 26rpx;
  212. 		color: #bebebe;
  213. 	}
  214.  
  215. 	.search-hot-title {}
  216.  
  217. 	.search-hot-item {
  218. 		display: flex;
  219. 		align-items: center;
  220. 		margin-top: 40rpx;
  221. 	}
  222.  
  223. 	.search-hot-top {
  224. 		width: 60rpx;
  225. 		color: #fb2221;
  226. 		font-size: 34rpx;
  227. 	}
  228.  
  229. 	.search-hot-word {
  230. 		flex: 1;
  231. 	}
  232.  
  233. 	.search-hot-word view:nth-child(1) {
  234. 		color: black;
  235. 	}
  236.  
  237. 	.search-hot-word image {
  238. 		width: 48rpx;
  239. 		height: 22rpx;
  240. 	}
  241.  
  242. 	.search-hot-count {}
  243.  
  244. 	.search-result {
  245. 		border-top: 2rpx #e5e5e5 solid;
  246. 		padding: 30rpx;
  247. 	}
  248.  
  249. 	.search-result-item {
  250. 		display: flex;
  251. 		align-items: center;
  252. 		border-bottom: 2rpx #e5e5e5 solid;
  253. 		padding-bottom: 30rpx;
  254. 		margin-bottom: 30rpx;
  255. 	}
  256.  
  257. 	.search-result-item text {
  258. 		font-size: 50rpx;
  259. 	}
  260.  
  261. 	.search-result-word {
  262. 		flex: 1;
  263. 	}
  264.  
  265. 	.search-result-word view:nth-child(1) {
  266. 		font-size: 28rpx;
  267. 		color: #3e6694;
  268. 	}
  269.  
  270. 	.search-result-word view:nth-child(2) {
  271. 		font-size: 26rpx;
  272. 	}
  273.  
  274. 	.search-suggest {
  275. 		border-top: 2rpx #e5e5e5 solid;
  276. 		padding: 30rpx;
  277. 		font-size: 26rpx;
  278. 	}
  279.  
  280. 	.search-suggest-title {
  281. 		color: #537caa;
  282. 		margin-bottom: 40rpx;
  283. 	}
  284.  
  285. 	.search-suggest-item {
  286. 		color: #666666;
  287. 		margin-bottom: 70rpx;
  288. 	}
  289.  
  290. 	.search-suggest-item text {
  291. 		color: #c2c2c2;
  292. 		font-size: 26rpx;
  293. 		margin-right: 26rpx;
  294. 	}
  295. </style>

四、api接口的调用

在common中创建api.js和config.js

api.js页面

  1.  
  2. import { baseUrl } from './config.js';
  3.  
  4. export function topList(){
  5. 	return new Promise(function(resolve,reject){
  6. 		uni.request({
  7. 			url: `${baseUrl}/toplist/detail`,
  8. 			method: 'GET',
  9. 			data: {},
  10. 			success: res => {
  11. 				let result = res.data.list;
  12. 				resolve(result.splice(0,4));
  13. 			},
  14. 			fail: (err) => {
  15. 				console.log(err);
  16. 			},
  17. 			complete: () => {}
  18. 		});
  19. 	});
  20. }
  21.  
  22. export function list(listId){
  23. 	return uni.request({
  24. 		url: `${baseUrl}/playlist/detail?id=${listId}`,
  25. 		method: 'GET'
  26. 	});
  27. }
  28.  
  29. export function songDetail(id){
  30. 	return uni.request({
  31. 		url : `${baseUrl}/song/detail?ids=${id}`,
  32. 		method : 'GET'
  33. 	})
  34. }
  35.  
  36. export function songUrl(id){
  37. 	return uni.request({
  38. 		url : `${baseUrl}/song/url?id=${id}`,
  39. 		method : 'GET'
  40. 	})
  41. }
  42.  
  43. export function songLyric(id){
  44. 	return uni.request({
  45. 		url : `${baseUrl}/lyric?id=${id}`,
  46. 		method : 'GET'
  47. 	})
  48. }
  49. export function songSimi(id){
  50. 	return uni.request({
  51. 		url : `${baseUrl}/simi/song?id=${id}`,
  52. 		method : 'GET'
  53. 	})
  54. }
  55.  
  56. export function songComment(id){
  57. 	return uni.request({
  58. 		url : `${baseUrl}/comment/music?id=${id}`,
  59. 		method : 'GET'
  60. 	})
  61. }
  62.  
  63. export function searchHot(){
  64. 	return uni.request({
  65. 		url : `${baseUrl}/search/hot/detail`,
  66. 		method : 'GET'
  67. 	})
  68. }
  69.  
  70. export function searchWord(word){
  71. 	return uni.request({
  72. 		url : `${baseUrl}/search?keywords=${word}`,
  73. 		method : 'GET'
  74. 	})
  75. }
  76.  
  77. export function searchSuggest(word){
  78. 	return uni.request({
  79. 		url : `${baseUrl}/search/suggest?keywords=${word}&type=mobile`,
  80. 		method : 'GET'
  81. 	})
  82. }
  83.

config.js页面

export const baseUrl = 'https://flask-web-frak-shishn-kvmjsphrif.cn-shenzhen.fcapp.run';

以上也只是对网易云播放器的模仿与学习，若有侵权请及时联系作者。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/445045
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号