uni-app仿网易云学习心得

目录

前言

运行环境

优缺点

uniapp主要的目录和文件的作用

HBuilderX插件安装

仿网易云项目展示

新建uni-app新项目创建以下目录

接口调用&数据渲染

首页&排行榜代码展示

 榜单列表代码展示

播放器代码展示

​编辑

搜索列表代码展示

代码管理方式

---

前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序、等多个平台。
即使不跨端， uni-app 同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app

运行环境

安装HBuilderX前端开发工具
浏览器运行：进入uniapp项目，点击工具栏的运行-运行到浏览器-选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
真机运行：连接手机，开启USB调试，进入uniapp项目，点击工具栏的运行-真机运行-选择运行的设备，即可在该设备里面体验uni-app。
在微信开发者工具里运行：进入uniapp项目，点击工具栏的运行-运行到小程序模拟器-微信开发者工具，即可在微信开发者工具里面体验uni-app。 

优缺点

优点:
1. 一套代码可以生成多端
2. 学习成本低,语法是vue的,组件是小程序的
3. 拓展能力强
4. 使用HBuilderX开发,支持vue语法
5. 突破了系统对H5调用原生能力的限制
缺点:
1. 问世时间短,很多地方不完善
2. 社区不大
3. 官方对问题的反馈不及时
4. 在Android平台上比微信小程序和iOS差
5. 文件命名受限

uniapp主要的目录和文件的作用

pages.json
配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等
main.js
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。
App.vue
是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。
pages
页面管理部分用于存放页面或者组件
manifest.json
文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
package.json
配置扩展

HBuilderX插件安装

 

仿网易云项目展示

新建uni-app新项目创建以下目录

 

接口调用&数据渲染

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

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 songSimi(id){
	return uni.request({
		url : `${baseUrl}/simi/song?id=${id}`,
		method : 'GET'
	})
}

export function songComment(id){
	return uni.request({
		url : `${baseUrl}/comment/music?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'
	})
}

首页&排行榜代码展示

<template>
	<view class="content">
		<uamhead :title="title"></uamhead>
		<image class="logo" src="/static/logoUAM.png"></image>
		<view class="text-area">
			<text class="title">{
  {title}}</text>
		</view>
		<sc