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 的下载与使用步骤:

  1. 登录 iconfont 官网:https://www.iconfont.cn/

  2. 在页面中选择需要使用的图标,并添加进购物车。

  3. 点击购物车图标,进入购物车页面。在购物车页面中,点击“下载代码”,选择需要使用的格式(如 HTML、CSS、JavaScript 等)进行下载。

  4. 下载完成后,将下载的文件解压并拷贝到需要使用图标的文件夹中。

  5. 在 HTML 文件中引入 iconfont.css 文件,如下所示:

<link rel="stylesheet" href="路径/iconfont.css">

 

  1. 在 HTML 文件中,通过 &lt;i> 标签使用图标,如下所示:
<i class="iconfont icon-名称"></i>

 

其中,“名称”是选定图标的名称,可以在 iconfont.css 文件中进行查找。

  1. 样式修改:可以通过修改 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框架的一个第三方组件库,用于在列表数据加载过程中展示骨架屏效果,提升用户体验,下面是安装使用步骤:

  1. 安装循环骨架m-for-skeleton库
npm install m-for-skeleton --save

 

  1. 在Vue项目中引入m-for-skeleton组件

在Vue的main.js中通过import引入m-for-skeleton组件,如下:

import MForSkeleton from 'm-for-skeleton'
Vue.use(MForSkeleton)

 

  1. 在需要使用循环骨架的组件中使用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中使用静态资源,您可以按照以下步骤操作:

  1. 将您的静态资源(如图片、字体等)放置在/static目录下,或者在项目根目录下创建一个名为/assets的目录,并在该目录下创建一个名为/static的子目录,然后将静态资源放置在该子目录中。

  2. 在需要使用静态资源的组件中,使用@//static/前缀来引用静态资源。例如,如果您有一个名为logo.png的图片文件,您可以在模板中使用以下代码来显示它:&lt;img src="@/static/logo.png">

请注意,如果您使用的是uni-app的微信小程序端,还需要在/static目录下放置一个名为project.config.json的文件,用于配置微信小程序的一些信息。

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

总结

Uni-app是一款基于Vue.js框架的跨平台开发工具,可以使用同一套代码,在多个平台(包括App、微信小程序、H5等)上构建应用。以下是对Uni-app的总结:

  1. 优点:
  • 跨平台:可以同时开发多个平台的应用,大大减少了开发成本和时间;
  • 代码结构明确:使用Vue.js的单文件组件,代码结构清晰,易于维护;
  • 开发效率高:使用HBuilderX作为开发工具,提供了丰富的插件和模板,开发效率比较高;
  • 支持原生插件和SDK:可以使用原生插件和SDK扩展应用的功能;
  • 社区活跃:有一个较为活跃的社区,可以获得大量的插件和模板。
  1. 缺点:
  • 性能不如原生应用:由于需要适配多个平台,一些Native的特性无法完全利用,性能上略逊于原生应用;
  • 平台差异:不同平台的API、组件、样式等存在差异,需要开发者花更多精力进行适配;
  • 第三方库支持不完善:由于平台差异和开发者使用较少的原因,一些第三方库的支持不够完善。

总之,Uni-app是一款非常优秀的跨平台开发工具,适合那些需要构建多个平台应用的开发者。但是在选择使用时,需要权衡其优缺点,选择适合自己项目的开发方式。

...全文
42 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

1,381

社区成员

发帖
与我相关
我的任务
社区描述
柳职院电子信息工程学院同学们的学习园地
社区管理员
  • c_university_1974
  • qq_39231145
  • zhuisir
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

各位加入社区的同学,请完善社区信息,把社区昵称改为【班级-姓名】,社区签名改为【班级-学号-姓名】的格式

如【社区昵称】20计应1班  张某某(班级用简称)

     【社区签名】2020级计算机应用技术1班 20201234567 张某某 (班级用全称)

试试用AI创作助手写篇文章吧