uni-app的学习总结

最新推荐文章于 2024-06-13 16:57:43 发布

搭code

最新推荐文章于 2024-06-13 16:57:43 发布

阅读量1.6k

点赞数 56

文章标签： uni-app 学习

本文链接：https://blog.csdn.net/DX_hdh/article/details/138182879

版权

一、介绍-什么是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，我也更加自信地面对未来的工作和学习挑战。

搭code

关注

56
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
uni-app的学习总结

/script>跨平台开发：Uni-app 提供了跨平台的能力，你可以使用相同的代码基础开发出适配多个平台的应用，包括 Web、iOS 和 Android。这样可以大大减少开发成本和时间。组件库的使用：Uni-app 提供了丰富的组件库，包括基础组件和扩展组件，可以帮助你快速搭建界面和实现功能。合理使用组件库可以提高开发效率。API 接口调用。
复制链接

扫一扫