目录
学习前提
去官网中学习基本的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: {
// 添加