一、介绍-什么是uni-app
- Uni-app 是一个基于 Vue.js 的跨平台应用开发框架,它可以帮助开发者使用 Vue.js 开发一套代码,然后通过编译工具将代码转换成多个平台的原生应用,包括但不限于微信小程序、支付宝小程序、H5、以及各种移动端应用(如iOS和Android应用)。
- Uni-app 提供了一套完整的开发工具链和组件库,使得开发者可以方便地开发跨平台的应用,并且享受到 Vue.js 的开发体验。
二、学习开发工具
-
HBuilder X(强烈推荐):HBuilder X 是一个集成了多种开发工具的 IDE,特别适用于 Uni-app 的开发。它集成了代码编辑器、调试器、编译工具等,能够满足 Uni-app 开发的全部需求。
-
微信开发者工具:如果你要开发微信小程序,需要安装微信开发者工具用于调试和发布微信小程序。
-
支付宝小程序开发者工具:如果你要开发支付宝小程序,需要安装支付宝小程序开发者工具用于调试和发布支付宝小程序。
-
Android Studio / Xcode:如果你要开发 Android 应用或者 iOS 应用,需要安装 Android Studio 或者 Xcode 用于调试和发布移动应用。
-
以上工具都可以免费下载和使用。对于初学者,我推荐使用 HBuilder X,因为它集成了所有必要的工具,并且支持跨平台开发。发布移动应用。(如果需要请点击:HBuilder Xhttps://www.dcloud.io/hbuilderx.html)
三 、uni-app主要的目录和文件的作用
common:
是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面components:
是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数pages:
是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。static:
存放静态资源的 ,如图片资源,image标签想要引入本地文件,只能放到static里才能访问到unpackage:
里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面,App.vue:
是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。除此之外,应用生命周期仅可在App.vue中监听,在页面监听无效。main.js :
入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex,注意uniapp无法使用vue-router,路由须在pages.json中进行配置。如果开发者坚持使用vue-router,可以在插件市场找到转换插件。manifest.json:
文件是应用的配置文件,用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录,CLI 创建的工pages.json:
配置文件,全局页面路径配置,应用的状态栏、导航条、标题、窗口背景色设置等
程此文件在 src 目录。
四、认识uni-app的生命周期
1、页面的生命周期(page)
onLoad():页面挂载
onShow():页面显示出来
onHide():页面隐藏起来
onReachBottom():页面滚动到底部了
onUnload():页面卸载
onPageScroll():页面发生滚动了
onPullDownRefresh():页面在顶部执行了下拉刷新
onReady():页面准备就绪了,可供用户使用了
2、应用的生命周期(App.vue)
onLaunch():应用启动,初始化完成时触发(全局只触发一次)
onShow():应用显示出来
onHide():应用隐藏起来, 从前台进入后台
五、uni-app的请求和页面跳转
1、请求(使用自动生成的即可)
uni.request({
url: '',
data: {},
methods: 'get',
success:(res) =>{
console.log(res)
},
fail: (err) => {
console.log(err)
})
2、页面跳转(常用的)
- uni.redirectTo 不保留当前页面,跳转到应用内的某个页面。(与上面的区别一样,场景不同的)
uni.redirectTo({
url: 'test?id=1'
});
- uni.navigateTo 常用,保留当前页面,跳转到应用内的某个页面。
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
六、经验与知识
学会了怎么样去实现一个音乐播放器,就是实例化一个uni.createInnerAudioContext()这个对象,这个是uni-app里面别人封装好给我们用的一个apl方法和对象,其中innerAudioContext.autoplay = true这个对象是确定了这个音乐是否自动播放。还有许多方法,如:onPlay()、onPause()、onError()等这些开始和暂停的方法。
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
学会使用transform 移动歌词和对应的css方法。
学会使用定时器setInterval。
用setInterval()函数在Vue组件中实现定时器功能。在Vue的mounted()钩子函数中,使用setInterval()启动定时器,同时在beforeDestroy()钩子函数中清除定时器以避免内存泄漏。
以下是一个简单的示例:
<template>
<div>
<p>{{ counter }}</p>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0,
timer: null
};
},
mounted() {
this.timer = setInterval(() => {
this.counter++;
}, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
在上面的示例中,我们使用setInterval()
函数每秒钟增加counter
的值,并且在beforeDestroy()
钩子函数中清除定时器
七、网易云项目-分享
在项目开始之前我们需要注意:
-
版权和合法性:确保你使用的音乐资源是合法的,不要侵犯版权。可以选择使用公共领域的音乐或者购买合法的音乐版权。
-
UI/UX 设计:网易云音乐拥有简洁清晰的用户界面和良好的用户体验,你需要注意 UI 设计和交互设计,使你的应用易于使用和吸引用户。
-
功能实现:仿网易云项目可能涉及到音乐播放、搜索、收藏、评论等功能。确保你能够实现这些功能,并且保持其稳定性和流畅性。
-
性能优化:音乐播放类应用对性能要求较高,尤其是在移动端。优化应用的性能,确保音乐播放流畅,同时不影响其他功能的使用。
-
安全性:保护用户的个人信息安全是至关重要的。确保你的应用在数据传输和存储方面有良好的安全措施,以防止信息泄露和攻击。
-
跨平台适配:如果你计划将应用发布到多个平台,比如 Web、iOS 和 Android,确保应用在不同平台上的适配性和一致性。
-
学习和尊重网易云音乐的特色:深入了解网易云音乐的特色和用户喜好,可以帮助你更好地仿制并吸引用户。
-
持续学习和改进:技术和用户需求都在不断变化,持续学习和改进是保持应用竞争力的关键。跟进新技术、用户反馈和行业趋势,不断改进你的应用。
这个学期我们学习的案例是仿网易云项目,在项目中让我对uni-app的加深理解,主要实现了:
分享效果截图
1、主页歌曲榜单的显示效果
2、榜单歌曲实现显示
3、播放器页面实现
4、搜索页面实现
代码的创建
1、项目的创建
使用git和gitee进行代码的版本控制
iconfont的下载与使用
Uni-app可以使用iconfont作为图标库,使用的过程中需要进行以下步骤:
- 登录iconfont官网,选择需要的图标,并添加到购物车;
- 进入购物车,确认购买信息并确认,然后进行付款;
- 付款成功后,进入iconfont的“已购资源”页面,找到购买的图标库,点击“下载代码”按钮;
- 在弹出的框中选择“Unicode”,然后点击“复制代码”按钮;
- 在Uni-app的项目中创建一个“iconfont.css”文件,并将复制的代码粘贴到该文件中;
- 在需要使用图标的地方,使用如下代码引用图标:
<text class="iconfont icon-xxxx"></text>
安装、使用第三方组件-循环骨架m-for-skeleton
自定义组件开发-uamhead及使用向组件props传值
<template>
<view class="uam-head" >
<view class="uam-head-icon" >
<text @tap="handleToBack" class="iconfont iconzuojiantou-copy"></text> | <text @tap="handleToHome" class="iconfont iconshouye"></text>
</view>
<image class="headimg" src="../../static/iamges/logo.png" mode=""></image>
<view class="uam-head-text">{{ title }}</view>
</view>
</template>
<script>
import '../../common/iconfont.css'
export default {
data() {
return {
};
},
props : ['title'],
methods : {
handleToBack(){
uni.navigateBack();
},
handleToHome(){
history.back({
url: '/pages/index/index'
});
}
}
}
</script>
使用apifox调用、测试webapi
使用uni.request发起对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: () => {}
});
});
}
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',
})
}
使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
使用css3的animation实现音乐唱盘的动画效果
html:
<view class="player">
<image :src="song.picUrl" :class="{ 'run' : isplayrotate }" mode=""></image>
<text class="iconfont iconpause" v-if="isplayrotate" @tap="pause"></text>
<text class="iconfont iconbofang" v-else="" @tap="playing"></text>
<view></view>
</view>
css:
@keyframes move {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.player .run {
animation-play-state: running;
}
安装和使用uni-app的扩展组件
八、项目总结
-
跨平台开发:Uni-app 提供了跨平台的能力,你可以使用相同的代码基础开发出适配多个平台的应用,包括 Web、iOS 和 Android。这样可以大大减少开发成本和时间。
-
组件库的使用:Uni-app 提供了丰富的组件库,包括基础组件和扩展组件,可以帮助你快速搭建界面和实现功能。合理使用组件库可以提高开发效率。
-
API 接口调用:仿网易云项目需要与后端进行数据交互,Uni-app 提供了丰富的 API 调用能力,可以方便地与后端接口进行通信,获取数据并进行展示。
-
UI 设计:仿网易云项目的 UI 设计需要简洁清晰,符合用户习惯。Uni-app 提供了灵活的样式设计和布局方式,可以实现符合要求的界面设计。
-
数据管理:对于仿网易云项目这样的应用,数据管理是非常重要的。你可以使用 Vuex 或者其他状态管理工具来管理应用的数据流,确保数据的一致性和可靠性。
-
性能优化:音乐播放类应用对性能要求较高,特别是在移动端。你需要注意优化应用的性能,包括减少不必要的渲染、优化网络请求和资源加载等方面,确保应用流畅运行。
-
用户体验:仿网易云项目需要提供良好的用户体验,包括流畅的界面操作、快速的加载速度和友好的交互反馈。在开发过程中要时刻关注用户体验,不断改进和优化。
-
安全性:保护用户的个人信息安全是至关重要的。确保应用在数据传输和存储方面有良好的安全措施,以防止信息泄露和攻击。
综上所述,使用 Uni-app 编写仿网易云项目需要综合考虑技术、设计和用户体验等方面,不断学习和改进,才能开发出符合用户期待的高质量应用。
总的来说,学习Uni-app是一次非常有收获的经历,它让我更加深入地了解了Vue.js和移动端应用开发的技术和思想。同时,通过学习Uni-app,我也更加自信地面对未来的工作和学习挑战。