目录
1.Node.js，其中Node.js是JavaScript的运行环境
2.HBuilderX，HBuilderX是Uni-app的开发工具
1.可以使用 HBuilderX 的插件市场安装 uni-app 插件
一.了解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.在手机应用上测试时，需要先在微信开发者工具中登录自己的微信账号
六.展示项目
1685113563968
总结.
- 省时省力：Uniapp采用一份代码多端适配的方式，只需编写一次代码即可在多个平台上运行，大大减少了开发者的开发时间和成本。
- 易学易用：Uniapp使用Vue.js作为其开发语言，Vue.js的语法简单易懂，上手难度较低，适合新手入门。
- 性能优越：Uniapp采用了自研的渲染引擎和性能优化策略，能够保证应用程序的流畅度和稳定性。
4446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
