uni-app移动应用开发总结
Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以让你使用一份代码在多个平台上构建出原生的、高性能的应用。通过Uni-app，你可以将一份代码编译成Android、iOS原生应用程序、H5应用程序以及各种小程序（如微信小程序、支付宝小程序等）。
在这门课程里我学到的东西
uni-app项目的创建
1.打开文件，点击新建项目
2.选择uni-app，输入工程名，如：test，选择默认模板， 点击创建，即可成功创建uni-app；
使用git和gitee进行代码的版本控制
Git是一种分布式版本控制系统，它可以帮助你管理代码的版本。而Gitee是一个在线代码托管平台，它提供了Git仓库的服务。下面是使用Git和Gitee进行代码版本控制的步骤：
-
在Gitee上创建一个仓库。这个仓库将存储你的代码。
-
使用Git命令行工具克隆你在Gitee上创建的仓库。在命令行中输入：
git clone https://gitee.com/你的用户名/你的仓库名.git
- 将代码添加到本地仓库中。使用以下命令将代码添加到 Git 仓库：
git add .
- 提交代码到本地仓库。使用以下命令提交代码：
git commit -m "你的提交信息"
- 推送代码到远程仓库（即Gitee上的仓库）。使用以下命令推送代码：
git push origin master
- 如果你想在本地分支上工作，使用以下命令创建一个新分支：
git checkout -b 你的分支名
-
在你的分支上添加、修改、提交和推送代码。
-
当你完成一个功能或修复一个bug后，将分支合并到主分支。使用以下命令：
git checkout master
git merge 你的分支名
- 推送合并后的代码到远程仓库：
git push origin master
这样，你就可以使用Git和Gitee进行代码的版本控制了。
pages.json页面路由的配置
在一个基于React的应用中，我们需要配置页面路由，以便我们的应用能够响应地址栏发生的变化。在React中，常用的页面路由配置方式是使用一个名为react-router-dom的第三方库。页面路由配置可以在一个名为pages.json的文件中进行。
pages.json文件包含了整个应用的页面路由配置信息。每一个页面都由一个对象来配置，这个对象包含了页面的路径、页面对应的组件、是否需要登录等信息。以下是一个pages.json文件的示例：
{
"pages": [
{
"path": "/login",
"component": "Login",
"auth": false
},
{
"path": "/dashboard",
"component": "Dashboard",
"auth": true
}
]
}
在上面的示例中，我们定义了两个页面路由。第一个页面路由的路径是/login，对应的React组件名为Login，这个页面不需要登录即可访问；第二个页面路由的路径是/dashboard，对应的React组件名为Dashboard，这个页面需要登录才能访问。
进一步解释：
path：表示页面的访问路径，例如/login表示访问应用的登录页面。component：表示页面对应的React组件的名称，例如Login表示登录页面的React组件名称。auth：表示是否需要登录才能访问这个页面，如果为true则表示需要登录，如果为false则表示不需要登录。
在uni-app中使用静态资源
在uni-app中，可以在项目根目录下的 static 文件夹中存放静态资源，比如图片、字体等。通过在页面中使用相对路径引用这些静态资源，可以直接使用它们。
例如，假设我们在 static 目录下有一张名为 logo.png 的图片，我们可以在页面中这样引用它：
其中，.. 表示上一级目录，因为通常我们在页面中使用相对路径时是以当前页面所在的目录作为相对路径的起点，而 static 目录位于项目根目录下。
当然，如果我们需要在 JavaScript 代码中使用静态资源，也可以通过 uni-app 提供的 uni. 对象来进行引用。比如：
uni.getImageInfo({
src: '/static/logo.png',
success: (res) => {
console.log(res.width)
}
})
其中，uni.getImageInfo 是 uni-app 提供的用于获取图片信息的 API，通过 src 参数指定图片路径。这里我们传入的图片路径是相对于项目根目录的路径，因此需要在前面加上 /。
iconfont的下载与使用
Iconfont是阿里巴巴矢量图标库，提供了海量的免费图标资源，可在各种项目中使用。以下是Iconfont的下载与使用步骤：
-
打开iconfont官网（https://www.iconfont.cn/）。
-
注册或登录账号。
-
搜索需要的图标，将其加入购物车。
-
在购物车中选择需要的图标，点击“添加至项目”。
-
在新建项目中选择需要的图标，点击“添加至项目”。
-
进入项目页面，单击“下载至本地”按钮。
-
选择需要的字体格式、图标代码以及文件压缩格式，单击“下载”按钮。
-
下载完成后，将压缩包解压缩到您的项目中。
-
在HTML文件中引入字体文件。例如：
- 在需要使用图标的元素中添加图标代码。例如：
以上就是Iconfont的下载与使用步骤。需要注意的是，Iconfont的下载与使用需要遵循其使用规则，不得将其用于商业目的。
安装、使用第三方组件-循环骨架m-for-skeleton
循环骨架m-for-skeleton是一种在Vue项目中使用的第三方组件，可以用于创建骨架屏效果。下面是安装和使用循环骨架m-for-skeleton的步骤：
- 在项目中安装循环骨架m-for-skeleton：
npm install m-for-skeleton --save
- 在需要使用骨架屏效果的组件中引入m-for-skeleton：
import MForSkeleton from 'm-for-skeleton'
- 在组件中使用循环骨架m-for-skeleton：
{{ item.name }}
在上面的代码中，MForSkeleton组件的skeleton-num属性指定了需要显示的骨架屏数量。在MForSkeleton组件内部，使用v-for指令渲染出包含指定数量子元素的父元素，并为每个子元素设置骨架屏效果。
- 在父组件中将需要显示骨架屏效果的子组件包含在循环骨架m-for-skeleton组件内即可。
需要注意的是，循环骨架m-for-skeleton中的子元素只是用于占位的，不需要绑定数据或者事件等操作，因为这些操作都会被覆盖为骨架屏效果。
自定义组件开发-uamhead及使用向组件props传值
- 创建自定义组件
首先，我们创建一个名为 "UamHead" 的组件，并放置在一个名为 "components" 的目录中。在该组件中，我们可以定义需要传递给组件的 props 以及用于展示的内容。
{{ title }}
![]()
在上面的代码中，我们创建了一个 "UamHead" 组件。我们定义了三个 props：title，logo 和 altText。title 和 logo 都是必传的，而 altText 是可选的。这些 props 可以通过组件的属性传递值。在组件内部，我们使用了这些传入的值来展示组件内容。
- 在父组件中使用自定义组件
现在，我们可以在父组件中使用 "UamHead" 组件，并为它传递 props 值。我们只需在父组件中导入 "UamHead" 组件，然后将 props 值传递给它就可以了。
在上面的代码中，我们导入了 "UamHead" 组件并在父组件中注册它。然后，我们可以在父组件中使用该组件，并为它传递 props 值。在这个例子中，我们传递了 title，logo 和 altText 三个值。
注意，我们在传递 altText 时，使用了中划线语法。这是因为在 HTML 中，属性名称不能包含大写字母，否则 Vue 将不会识别该属性。所以，我们应该使用中划线将多个单词连接起来。
这样，通过以上步骤，我们就可以开发一个自定义组件并在父组件中使用它，并向组件的 props 传递需要的值了。
使用apifox调用、测试webapi
要使用 Apifox 调用和测试 Web API，需要遵循以下步骤：
- 创建一个 Apifox 账号并登录
- 在 Apifox 中创建一个新的 API 项目
- 添加 API 请求，并配置请求的 URL、方法、请求头、请求体等信息
- 发送 API 请求，并查看响应结果
具体步骤如下：
- 创建 Apifox 账号并登录
如果您还没有 Apifox 账号，可以前往 Apifox 官网进行注册并登录。
- 创建一个新的 API 项目
在 Apifox 中创建一个新的 API 项目，可以通过点击顶部菜单栏中的「新建项目」按钮来完成。
- 添加 API 请求
在新建的 API 项目中，可以通过点击左侧导航栏中的「API」来添加 API 请求。
添加 API 请求时，需要填写以下信息：
- 请求名称：用于标识请求的名称，可以自定义。
- 请求 URL：填写需要请求的 API 的 URL 地址。
- 请求方法：填写 API 请求的方法，如 GET、POST、PUT、DELETE 等。
- 请求头：填写 API 请求所需的请求头信息，如 Content-Type、Authorization 等。
- 请求体：填写 API 请求所需的请求体信息，如 JSON、表单提交等。
在填写完上述信息后，可以点击右上角的「保存」按钮，保存 API 请求配置信息。
- 发送 API 请求
在添加完 API 请求后，可以点击「测试」按钮，然后在新弹出的页面中填写请求的参数，然后点击「发送请求」按钮。
可以查看 API 请求的响应结果，并检查返回的数据是否符合预期。
总之，使用 Apifox 可以方便地调用和测试 Web API，为开发者提供了一个非常有用的工具。
使用uni.request发起对api的网络请求并处理响应结果
假设我们要使用uni.request发起对一个示例API的网络请求，并处理响应结果，我们可以按照以下步骤进行：
- 在页面中引入uni.request：
import uniRequest from '@/common/uniRequest.js'
- 使用uni.request发起网络请求：
uniRequest({
url: 'https://example.com/api/getUserInfo',
method: 'GET',
data: {
userId: '123'
}
}).then(response => {
console.log('response:', response)
}).catch(error => {
console.log('error:', error)
})
其中，url表示API的地址，method表示请求方法，data表示请求参数。
- 处理响应结果，例如：
.then(response => {
if (response.statusCode === 200) {
console.log(response.data)
} else {
console.log('请求失败')
}
})
在上面的例子中，我们根据statusCode判断请求是否成功，并处理成功和失败的情况。具体的业务逻辑根据实际情况而定。
完整的uniRequest代码可以参考以下示例：
import store from '@/store'
function uniRequest(options) {
const { token } = store.state
if (token) {
options.header = {
...options.header,
Authorization: `Bearer ${token}`
}
}
return new Promise((resolve, reject) => {
uni.request({
...options,
success: (response) => {
resolve(response)
},
fail: (error) => {
reject(error)
}
})
})
}
export default uniRequest
在上面的代码中，我们在每个请求的header中添加了Authorization字段，用于传递用户的token信息。具体的实现方式根据实际情况而定。另外，我们将uni.request包装成了一个Promise，方便后续的业务处理。
使用uni.navigate进行页面间的跳转及传递参数
uni-navigate是uni-app提供的页面跳转方法，用于在uni-app中进行页面间的跳转。
使用uni-navigate进行页面跳转的步骤如下：
- 在跳转源页面，通过uni.navigate方法跳转到目标页面，例如：
uni.navigateTo({
url: '/pages/target/target?id=1&name=uni-app'
})
这里的url为目标页面的路径，可以带上参数，例如id和name。
- 在目标页面中，可以通过this.$route.query获取到跳转时传递的参数，例如：
// 获取id和name参数
let id = this.$route.query.id
let name = this.$route.query.name
这里的this.$route.query是通过uni-app提供的路由管理对象获取到的，可以获取到传递的参数值。
- 如果需要从目标页面返回到跳转源页面，可以使用uni.navigateBack方法，例如：
uni.navigateBack()
这里的uni.navigateBack没有参数，表示返回到上一个页面。如果需要返回到更上级的页面，可以设置参数delta，例如：
uni.navigateBack({
delta: 2
})
这里的delta为2，表示返回到上上个页面。
综上所述，使用uni-navigate进行页面间的跳转及传递参数非常简单，只需要在源页面中调用uni.navigate方法跳转到目标页面，并在目标页面中通过this.$route.query获取传递的参数，同时可以通过uni.navigateBack方法返回到上一个页面。
使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
要使用uni.createInnerAudioContext()创建音频对象并控制音频的播放，可以按照以下步骤进行：
- 创建一个音频对象：
const innerAudioContext = uni.createInnerAudioContext()
- 加载音频资源：
innerAudioContext.src = 'http://example.com/example.mp3'
- 设置音频的播放参数：
// 设置音频的初始时间，单位为秒
innerAudioContext.startTime = 0
// 设置音频的播放速度，可以从0.5-2倍之间任意设置
innerAudioContext.playbackRate = 1.2
- 监听音频的事件，例如开始播放、暂停、停止、播放结束等：
// 监听音频播放开始事件
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
// 监听音频播放暂停事件
innerAudioContext.onPause(() => {
console.log('暂停播放')
})
// 监听音频播放停止事件
innerAudioContext.onStop(() => {
console.log('停止播放')
})
// 监听音频播放结束事件
innerAudioContext.onEnded(() => {
console.log('播放结束')
})
- 控制音频的播放、暂停、停止等操作：
// 播放音频
innerAudioContext.play()
// 暂停音频
innerAudioContext.pause()
// 停止音频
innerAudioContext.stop()
使用css3的animation实现音乐唱盘的动画效果
可以使用如下的代码来实现音乐唱盘的动画效果：
HTML：
CSS：
.turntable {
position: relative;
width: 200px;
height: 200px;
background-color: #333;
border-radius: 50%;
}
.circle {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: #777;
border-radius: 50%;
animation: turntable-rotate 6s linear infinite;
}
.needle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 20%;
height: 2px;
background-color: #fff;
box-shadow: 0 0 10px #fff;
animation: needle-move 1s linear infinite;
}
@keyframes turntable-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes needle-move {
0% {
transform: translate(-50%, -50%) rotate(-45deg);
}
50% {
transform: translate(-50%, -50%) rotate(45deg);
}
100% {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
解释：
- 通过 HTML 的 div 元素来表示唱盘和唱针，其中唱盘和唱针使用内部 div 元素来实现。
- 唱盘使用
.turntable类来控制背景色、圆角等样式，使用.circle类来控制唱盘的大小和背景色，同时通过animation属性来设置旋转动画。 - 唱针使用
.needle类来控制大小、颜色和位置（通过transform属性来设置旋转和平移），同时也通过animation属性来设置上下移动动画。 - 使用
@keyframes规则来分别定义旋转和移动动画的细节，其中旋转动画按照 0 到 360 度来一遍循环，移动动画则是从初始位置到 45 度，然后再回到初始位置，一遍循环的总时间为 1 秒钟。
使用css的动态绑定技术实现动画启动-停止的控制
可以通过CSS的animation-play-state属性实现动画的启动和停止控制。
该属性有两个取值：
-
running：表示动画正在运行。
-
paused：表示动画已经暂停。
例如，以下是一个简单的动画：
.box {
width: 100px;
height: 100px;
position: relative;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
接下来，我们可以为该动画添加一个按钮，通过点击按钮来控制动画的启动和停止：
var box = document.querySelector('.box');
var btnStart = document.querySelector('#btn-start');
var btnStop = document.querySelector('#btn-stop');
btnStart.addEventListener('click', function() {
box.style.animationPlayState = 'running';
});
btnStop.addEventListener('click', function() {
box.style.animationPlayState = 'paused';
});
在上面的JavaScript代码中，我们通过querySelector方法获取到了按钮和动画元素。然后，我们为两个按钮分别添加了点击事件，事件触发后我们直接使用样式修改动画元素的animation-play-state属性来实现控制。
作为一款跨平台移动应用开发框架，Uni-app的学习曲线相对较低，尤其适合初学者入门。在学习过程中，我总结出以下几点心得体会：
-
掌握基础：学习任何技术都必须掌握其基础知识，Uni-app也不例外。需要先了解HTML、CSS和JavaScript等前端基础知识，再进一步学习Vue.js框架的相关知识。
-
了解多端适配：由于Uni-app支持多平台开发，需要了解如何进行多端适配。比如，在编写样式时要注意使用rpx单位而非px单位，在不同平台上进行预览、调试等操作时要遵循不同的规范。
-
熟悉组件使用：Uni-app提供了很多常用组件，如数据绑定、事件处理、列表渲染等组件，熟悉它们的使用可以大大提高开发效率并减少代码量。
-
学会调试：在开发过程中，可能会遇到各种错误和问题，需要学会使用调试工具进行排查。HBuilderX作为Uni-app的IDE集成了丰富的工具和插件，可以帮助我们更快速地进行调试。
-
保持学习和实践：Uni-app是一个不断更新和演变的框架，我们需要保持学习和实践，掌握最新的开发技术和解决方案，并将其应用到具体的项目中，在实践中不断积累经验和提高能力。
总之，通过系统的学习和实践，我相信大家都可以掌握Uni-app这个强大的移动端开发框架。
在学习过程中我深深体会到uni-app的强大之处
-
开发效率高：Uni-app提供了内置的组件库、丰富多样的模板和示例代码，并且支持HBuilderX可视化编辑器，可以快速搭建UI界面，省去了手写页面样式的繁琐过程。同时，在开发过程中，Uni-app还封装了常见API，例如路由、网络请求、存储、传感器等，加速了业务逻辑的实现，提升了开发的效率。
-
一份代码多端运行：Uni-app可以在多个平台上运行，包括Android、iOS原生应用程序、H5应用程序以及各种小程序（如微信小程序、支付宝小程序等）。这意味着我们只需要编写一次代码，就可以在不同的平台上发布应用程序，减少了不必要的重复工作，缩短了上线时间。
-
高性能表现：Uni-app采用了渲染层和逻辑层分离的架构设计，同时拥有相对较优秀的性能表现。其中，渲染层采用的是原生渲染技术，而逻辑层则通过JSBridge与渲染层进行通信。这种设计方式保证了应用具备良好的用户交互体验，并且能够保证在各种平台上的流畅运行。
-
学习曲线低：Uni-app采用的是Vue.js框架，对于熟悉Vue.js框架的开发者非常友好。同时，Uni-app还提供了详细的文档和示例代码，使得初学者能够很快掌握其使用方法。此外，Uni-app的社区活跃、问题及时得到解决，也让开发者更容易入门。
Uni-app支持原生, Vue语法 以及 uni API 三种编写方式。原生编写方式可以使用原生的HTML、CSS和JavaScript编写页面；而Vue编写方式则基于Vue框架，拥有完整的 Vue.js 模板工程体系，同时还内置了HBuilderX可视化编辑器，提供了丰富的组件库，可以快速搭建UI界面；uni API 则封装了常见API，比如路由、网络请求、存储、传感器等，避免了不同平台繁琐的API调用差异问题。
Uni-app的优点包括：开发成本低、维护成本低、效率高、跨平台性强、并且对于原生技术栈的学习曲线较低，便于初学者入门。因此，Uni-app受到了众多开发者的欢迎和广泛应用。