学习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文件夹是一样的
示范：首页页面效果图及代码
{{item.updateFrequency}} {{index+1}}.{{musicItem.first}}-{{musicItem.second}} 
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页
自定义组件
{{item.updateFrequency}} {{index+1}}.{{musicItem.first}}-{{musicItem.second}} 五.运行调试
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.在手机应用上测试时，需要先在微信开发者工具中登录自己的微信账号
六.展示项目
1685113563968
总结.
- 省时省力：Uniapp采用一份代码多端适配的方式，只需编写一次代码即可在多个平台上运行，大大减少了开发者的开发时间和成本。
- 易学易用：Uniapp使用Vue.js作为其开发语言，Vue.js的语法简单易懂，上手难度较低，适合新手入门。
- 性能优越：Uniapp采用了自研的渲染引擎和性能优化策略，能够保证应用程序的流畅度和稳定性。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！