学习uni-app仿网易云及总结_仿网易云项目

目录

一.了解uni-app

二.搭配开发环境

1.Node.js，其中Node.js是JavaScript的运行环境

2.HBuilderX，HBuilderX是Uni-app的开发工具

1.可以使用 HBuilderX 的插件市场安装 uni-app 插件

2.可以在 HBuilderX 中选择需要运行的平台

三.创建项目

1.项目目录

以下是我的学习仿网易云音乐项目的目录及基本文件介绍

pages文件夹：

static文件夹：

App.vue文件

 mian.js文件: 

manifest.json文件

pages.json文件

uni.scss文件

四.编写代码

封装网易音乐云调用

config.js

api.js

页面路由与传值

index页：

list页

 自定义组件

五.运行调试

1.在浏览器中预览步骤如下：

2.在手机应用上测试步骤如下：

六.展示项目

总结.

---

一.了解uni-app

uni-app是一个跨平台开发框架，可以用于同时开发iOS、Android和Web应用。它基于Vue.js框架，开发者可以用Vue.js的语法来编写应用程序，而uni-app会将代码编译成各个平台的原生代码或者H5代码。uni-app的优点包括代码复用率高、开发效率高、应用性能好等。同时，uni-app也提供了丰富的组件和插件，可以方便地实现各种功能。

二.搭配开发环境

1.Node.js，其中Node.js是JavaScript的运行环境

安装教程

2.HBuilderX，HBuilderX是Uni-app的开发工具

安装教程

1.可以使用 HBuilderX 的插件市场安装 uni-app 插件

2.可以在 HBuilderX 中选择需要运行的平台

（如微信小程序、支付宝小程序、H5 等）进行预览和测试。

三.创建项目

1.项目目录

以下是我的学习仿网易云音乐项目的目录及基本文件介绍

pages文件夹：

其主要的效果就是存放页面效果和微信小程序下面的pages文件夹是一样的

示范：首页页面效果图及代码

<template>
	<view class="content">
		<uamhead :title="title"></uamhead>
 
		<scroll-view scroll-y="true" >
			<view class="index-ss" @tap="navplayer">
				<text class="iconfont iconsearch"></text>
				<input type="text" placeholder="搜索歌单">
				
			</view>
			<view>
				<m-for-skeleton
				:avatarSize="200"
				:row="3"
				:title="false"
				:loading="loading"
				isarc="square"
				:titleStyle="{}"
				v-for="(item,key) in 4"
				:key="key">
				</m-for-skeleton>
			</view>
			<view class="index-list" v-for="(item,index) in playlist" :key="index" @click="handleToList(item.id)">
				<view class="index-list-item">
					<view class="index-list-img">
						<image :src="item.coverImgUrl" mode=""></image>
						<text>{{item.updateFrequency}}</text>
					</view>
					<view class="index-list-text">
						<view  v-for="(musicItem,index) in item.tracks" :key="index">
							{{index+1}}.{{musicItem.first}}-{{musicItem.second}}
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>
 
<script>
	import { topList } from '../../common/api.js'
	// const toplistdata=require('@/static/toplist.json')
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import uamhead from "../../components/uamhead/uamhead.vue"
	import search from "../search/search.vue"
	export default {
			components: {
				    mForSkeleton,
					search,
	
				},
		data() {
			return {
				playlist:[],
				title: 'UAMusic',
				loading: true
			}
		},
		onLoad() {
			// this.playlist= toplistdata;
			topList().then((res)=>{
							if(res.length){
								setTimeout(()=>{
									this.playlist = res;
									this.loading=false
								},2000);
							}
						});
		},
		methods: {
			handleToList(id){
				uni.navigateTo({
					url:'/pages/list/list?listid='+id
				})
			},
			navplayer(id){
				uni.navigateTo({
					url:'/pages/search/search?songid='+id
				})
			}
		}
	}
</script>
 
<style>
	.index-ss {
				display: flex;
				/* 上下居中 */
				align-items: center;
				height: 70rpx;
				margin: 70rpx 30rpx 30rpx 30rpx;
				background: #f7f7f7;
				border-radius: 50rpx;
			}
			.index-search text {
					font-size: 26rpx;
					margin-right: 26rpx;
					margin-left: 28rpx;
				}
			
				.index-search input {
					font-size: 28rpx;
					flex: 1;
				}
				
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
 
	.text-area {
		display: flex;
		justify-content: center;
	}
 
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.index-list{ margin:0 30rpx;;width: 95%}
	.index-list-item{ display: flex; margin-bottom: 35rpx;}
	.index-list-img{ width:140px; height:128px; margin-right:20rpx; border-radius: 15rpx; overflow: hidden; position: relative;}
	.index-list-img image{ width:100%; height:100%;}
	.index-list-img text{ position: absolute; font-size:22rpx; color:white; bottom: 15rpx; left:15rpx;}
	.index-list-text{ flex:1; font-size:14px; line-height: 41px; font-weight: 600;}
	.index-list-text view{}
	
</style>

static文件夹：

主要存放静态文件的，比如图片等。

App.vue文件

App.vue是针对整个项目称作根组件。

 mian.js文件: 

作用:main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件.

manifest.json文件

manifest.json文件是一个项目配置文件。

pages.json文件

pages.json是一个非常重要的配置文件,它用于配置小程序的页面路径、窗口表现、导航条样式等信息

uni.scss文件

css代码全局生效

四.编写代码

封装网易音乐云调用

config.js

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

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: () => {}
		});
	});
}

页面路由与传值

例：从index页点击所选榜单后跳转到所选列表页

index页：

list页

 自定义组件

<template>
	<view class="content">
		<uamhead :title="title"></uamhead>
 
		<scroll-view scroll-y="true" >
			<view class="index-ss" @tap="navplayer">
				<text class="iconfont iconsearch"></text>
				<input type="text" placeholder="搜索歌单">
				
			</view>
			<view>
				<m-for-skeleton
				:avatarSize="200"
				:row="3"
				:title="false"
				:loading="loading"
				isarc="square"
				:titleStyle="{}"
				v-for="(item,key) in 4"
				:key="key">
				</m-for-skeleton>
			</view>
			<view class="index-list" v-for="(item,index) in playlist" :key="index" @click="handleToList(item.id)">
				<view class="index-list-item">
					<view class="index-list-img">
						<image :src="item.coverImgUrl" mode=""></image>
						<text>{{item.updateFrequency}}</text>
					</view>
					<view class="index-list-text">
						<view  v-for="(musicItem,index) in item.tracks" :key="index">
							{{index+1}}.{{musicItem.first}}-{{musicItem.second}}
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	import { topList } from '../../common/api.js'
	// const toplistdata=require('@/static/toplist.json')
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import uamhead from "../../components/uamhead/uamhead.vue"
	import search from "../search/search.vue"
	export default {
			components: {
				    mForSkeleton,
					search,
	
				},
		data() {
			return {
				playlist:[],
				title: 'UAMusic',
				loading: true
			}
		},
		onLoad() {
			// this.playlist= toplistdata;
			topList().then((res)=>{
							if(res.length){
								setTimeout(()=>{
									this.playlist = res;
									this.loading=false
								},2000);
							}
						});
		},
		methods: {
			handleToList(id){
				uni.navigateTo({
					url:'/pages/list/list?listid='+id
				})
			},
			navplayer(id){
				uni.navigateTo({
					url:'/pages/search/search?songid='+id
				})
			}
		}
	}
</script>

五.运行调试

Uni-app的运行和调试可以分为两种方式：在浏览器中预览和在手机应用上测试。

1.在浏览器中预览步骤如下：

1.打开命令行工具，进入项目所在目录。

2.执行命令npm run dev:mp-weixin（mp-weixin表示微信小程序，可以根据实际情况修改）。

3.等待编译完成后，在浏览器中打开开发者工具，选择手机模拟器模式，即可预览。

2.在手机应用上测试步骤如下：

1.打开命令行工具，进入项目所在目录。

2.执行命令npm run dev:mp-weixin（mp-weixin表示微信小程序，可以根据实际情况修改）。

3.将生成的dist目录复制到微信开发者工具中。

4.在微信开发者工具中选择“预览”，扫描二维码即可在手机上预览和测试。

注意事项：

1.在进行调试前，需要先安装Node.js和npm。

2.如果遇到编译错误，可以尝试执行npm install命令更新依赖。

3.在手机应用上测试时，需要先在微信开发者工具中登录自己的微信账号

六.展示项目

总结.

• 省时省力：Uniapp采用一份代码多端适配的方式，只需编写一次代码即可在多个平台上运行，大大减少了开发者的开发时间和成本。
• 易学易用：Uniapp使用Vue.js作为其开发语言，Vue.js的语法简单易懂，上手难度较低，适合新手入门。
• 性能优越：Uniapp采用了自研的渲染引擎和性能优化策略，能够保证应用程序的流畅度和稳定性。