uni-app学习总结

目录

学习前提

 仿网易云项目练习

新建uni-app项目

在git上新建项目，拉取到本地

在文件夹中新建uni-app 空项目

接口调用

新建目录放api调用的文件

api 调用封装

主页歌曲榜单显示

调用api

新建文件

显示和功能

歌单歌曲列表

页面传参

调用api

样式和功能

添加自定义组件

播放器页

调用api

页面传参

样式和功能

搜索功能

调用api

样式和功能

开发总结

---

学习前提

了解uni-app官网

去官网中学习基本的uni-app代码编写，基本语言包括js、vue、css,以及ts、ts等css预编译器

 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件

• 组件标签靠近小程序规范，详见uni-app 组件规范

• 接口能力（JS API）靠近小程序规范，但需将前缀 dfs

 仿网易云项目练习

新建uni-app项目

在git上新建项目，拉取到本地

拉取

 

在文件夹中新建uni-app 空项目

在拉取的文件下新建uni-app空项目

接口调用

新建目录放api调用的文件

api 调用封装

config.js

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

api.js 

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'
 	})
 }

主页歌曲榜单显示

调用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() {
				
			}
			
		 })
	 })
 }

新建文件

显示和功能

<template>
	<view class="content">
<image class="logo" src="../../static/YOYO.png" mode=""></image>
		<view class="text-area">
			<text class="title">{
  {title}}</text>
			
		</view>
		<view class="index-list" v-for="(item,index) in playList" :key="index" @click="handleToList(item.id)">
			<!-- handleToList方法中传一个值。item.id -->
			<view class="index-list-item">
				<view class="index-list-item-tbiao">
					<image class="index-list-img" :src="item.coverImgUrl" mode=""></image>
					<text class="index-list-subheading">{
  {item.updateFrequency}}</text>
				</view>
				<view class="index-list-text">
					<view class="" v-for="(musicItem,index) in item.tracks" :key="index">
						<text>{
  {index+1}}.{
  {musicItem.first}}--{
  {musicItem.second}}</text>
					    
						
					</view>
				</view>
				
			</view>
			
		
		</view>
		
		
	</view>
</template>

<script>
	import {topList} from '../../common/api.js'
	const toplistdata=require('@/static/toplist.json')
	
	
	export default {
		data() {
			return {
				// playList:toplistdata,
				playList:[],
				title: 'Hello'
			}
		},
		onLoad() {
			//
         topList().then((res)=>{
	         console.log(res);
			 if(res.length){
				 setTimeout(()=>{
					 this.playList=res;
					 this.loading=false;
				 },2000)
			 }
          })
		},
		methods: {
			// 添加