707
社区成员
发帖
与我相关
我的任务
分享uniapp的学习总结
目录
使用uni.request发起对api的网络请求并处理响应结果
前言
一份代码多端运行：可以开发出同时支持多个平台的应用，包括H5、小程序、Android和iOS等。
组件化开发：采用Vue.js框架，开发者可以使用Vue.js的组件化开发模式，可以快速构建应用。
轻量级高效率：采用前端渲染，使得应用启动速度更快，并且可以使用异步加载模块，提高页面性能。
丰富的插件生态：uni-app提供了丰富的插件生态，包括图像处理、地图、支付、社交化分享等插件，方便开发者快速打造应用。
良好的性能表现：由于uni-app采用了原生渲染，应用具有很好的性能表现。
完善的开发工具支持：uni-app提供了专业的开发工具，包括：HBuilderX、uni-app官方插件市场等等，让开发者在开发过程中更加轻松便捷。
iconfont的下载与使用
Iconfont 是阿里巴巴矢量图标库，提供了丰富的图标资源和方便易用的 Web Fonts 技术，可以方便地在网站中使用自定义图标。
下面是 iconfont 的下载与使用步骤：
-
登录 iconfont 官网：https://www.iconfont.cn/
-
在页面中选择需要使用的图标，并添加进购物车。
-
点击购物车图标，进入购物车页面。在购物车页面中，点击“下载代码”，选择需要使用的格式（如 HTML、CSS、JavaScript 等）进行下载。
-
下载完成后，将下载的文件解压并拷贝到需要使用图标的文件夹中。
-
在 HTML 文件中引入 iconfont.css 文件，如下所示：
<link rel="stylesheet" href="路径/iconfont.css">
- 在 HTML 文件中，通过
<i>标签使用图标，如下所示：
<i class="iconfont icon-名称"></i>
其中，“名称”是选定图标的名称，可以在 iconfont.css 文件中进行查找。
- 样式修改：可以通过修改 CSS 样式表中的相关样式来修改图标的颜色、大小等样式。
以上就是 iconfont 的下载与使用步骤。
使用uni.request发起对api的网络请求并处理响应结果
下面是一份使用uni.request发起对API的网络请求并处理响应结果的基本示例代码：
// 发起网络请求
uni.request({
url: 'http://your-api-url.com',
method: 'GET',
data: {
param1: 'value1',
param2: 'value2'
},
success: res => {
// 处理响应结果
console.log('请求成功：', res.data)
},
fail: err => {
// 处理请求失败情况
console.error('请求失败：', err)
}
})
在上面的代码中，我们使用了uni.request方法发起一个GET请求，并传递了请求参数和回调函数。在回调函数success和fail中，我们可以对请求结果进行处理。
需要注意的是，uni.request方法返回的结果是一个Promise对象，我们也可以使用async/await的方式进行处理。
async function requestApi() {
try {
const res = await uni.request({
url: 'http://your-api-url.com',
method: 'GET',
data: {
param1: 'value1',
param2: 'value2'
}
})
console.log('请求成功：', res.data)
} catch (err) {
console.error('请求失败：', err)
}
}
requestApi()
上面的代码中，我们使用了async/await的方式进行请求，将请求的过程封装在一个名为requestApi的异步函数中，并通过调用这个函数来发起请求和处理结果。
认识uniapp应用生命周期和页面生命周期
Uniapp的应用生命周期和页面生命周期如下：
应用生命周期
- onLaunch： 当Uniapp应用初始化完成时触发，一般用来进行一些全局初始化操作；
- onShow： 当应用进入前台运行时触发，一般用来进行一些应用级别的数据刷新；
- onHide： 当应用进入后台运行时触发，一般用来进行一些数据保存或清理操作；
- onError： 当应用出现全局错误时触发，一般用来进行错误日志上传或错误提示操作。
页面生命周期
- onShow： 当页面显示时触发，一般用来进行页面级别的数据刷新；
- onHide： 当页面隐藏时触发，一般用来进行页面级别的数据保存或清理操作；
- onReady： 当页面渲染完成时触发，一般用来进行页面级别的一些交互操作；
- onUnload： 当页面卸载时触发，一般用来进行一些数据清理或存储操作。
在Uniapp中，应用生命周期可以在App.vue文件中进行监听和处理，而页面生命周期可以在各个页面对应的.vue文件中进行监听和处理。
安装、使用第三方组件-循环骨架m-for-skeleton
循环骨架m-for-skeleton是Vue框架的一个第三方组件库，用于在列表数据加载过程中展示骨架屏效果，提升用户体验，下面是安装使用步骤：
- 安装循环骨架m-for-skeleton库
npm install m-for-skeleton --save
- 在Vue项目中引入m-for-skeleton组件
在Vue的main.js中通过import引入m-for-skeleton组件，如下：
import MForSkeleton from 'm-for-skeleton'
Vue.use(MForSkeleton)
- 在需要使用循环骨架的组件中使用m-for-skeleton组件
在需要使用循环骨架的组件中引入m-for-skeleton组件，使用方式如下：
<template>
<div>
<m-for-skeleton
v-if="loading"
:skeleton-rows="5"
:skeleton-row-height="50"
/>
<ul v-else>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
loading: true,
list: []
}
},
mounted () {
this.getData()
},
methods: {
getData () {
setTimeout(() => {
this.list = ['item1', 'item2', 'item3', 'item4', 'item5']
this.loading = false
}, 2000)
}
}
}
</script>
skeleton-rows属性表示骨架行数，skeleton-row-height属性表示骨架行高度，可以根据实际情况进行调整。loading属性代表当前是否处于加载数据状态。
以上就是循环骨架m-for-skeleton的安装和使用方法，希望能够对你有所帮助。
在uni-app中使用静态资源
要在uni-app中使用静态资源，您可以按照以下步骤操作：
-
将您的静态资源（如图片、字体等）放置在
/static目录下，或者在项目根目录下创建一个名为/assets的目录，并在该目录下创建一个名为/static的子目录，然后将静态资源放置在该子目录中。 -
在需要使用静态资源的组件中，使用
@/或/static/前缀来引用静态资源。例如，如果您有一个名为logo.png的图片文件，您可以在模板中使用以下代码来显示它：<img src="@/static/logo.png">。
请注意，如果您使用的是uni-app的微信小程序端，还需要在/static目录下放置一个名为project.config.json的文件，用于配置微信小程序的一些信息。
希望这可以帮助您使用静态资源。
总结
Uni-app是一款基于Vue.js框架的跨平台开发工具，可以使用同一套代码，在多个平台（包括App、微信小程序、H5等）上构建应用。以下是对Uni-app的总结：
- 优点：
- 跨平台：可以同时开发多个平台的应用，大大减少了开发成本和时间；
- 代码结构明确：使用Vue.js的单文件组件，代码结构清晰，易于维护；
- 开发效率高：使用HBuilderX作为开发工具，提供了丰富的插件和模板，开发效率比较高；
- 支持原生插件和SDK：可以使用原生插件和SDK扩展应用的功能；
- 社区活跃：有一个较为活跃的社区，可以获得大量的插件和模板。
- 缺点：
- 性能不如原生应用：由于需要适配多个平台，一些Native的特性无法完全利用，性能上略逊于原生应用；
- 平台差异：不同平台的API、组件、样式等存在差异，需要开发者花更多精力进行适配；
- 第三方库支持不完善：由于平台差异和开发者使用较少的原因，一些第三方库的支持不够完善。
总之，Uni-app是一款非常优秀的跨平台开发工具，适合那些需要构建多个平台应用的开发者。但是在选择使用时，需要权衡其优缺点，选择适合自己项目的开发方式。
...全文
请发表友善的回复…
发表回复
