uniapp的学习总结

21软件3班刘泉 2023-05-24 16:30:16

前言

iconfont的下载与使用

使用uni.request发起对api的网络请求并处理响应结果

认识uniapp应用生命周期和页面生命周期

安装、使用第三方组件-循环骨架m-for-skeleton

在uni-app中使用静态资源

总结

前言

一份代码多端运行：可以开发出同时支持多个平台的应用，包括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的文件，用于配置微信小程序的一些信息。

希望这可以帮助您使用静态资源。