当前位置: article > 正文

uni-app的实用技巧及数据缓存_uni.getstoragesync

作者：繁依Fanyi0 | 2024-03-13 23:40:24

踩

uni.getstoragesync

前言：

一、数据缓存

1. uni.setStorageSync 和 uni.getStorageSync

2. uni.setStorage 和 uni.getStorage

二、uni.addInterceptor(STRING, OBJECT)

数据缓存	request
云打包	生命周期
云函数	云服务器（Dcloud）

前言：

uni-app是小程序开发的首选，这个学期我学了这门课程，就由我来和大家分享一些uni-app的一些内容。

uni-app是一个基于Vue.js的开发框架，可以用于快速构建跨平台的应用程序，包括iOS、Android、H5和小程序等多个平台。

一、数据缓存

uni-app的数据缓存是指对数据进行本地存储，从而在下次访问时可以直接从本地获取数据，提高了程序的性能和用户体验。uni-app提供了两种数据缓存方式：

1. uni.setStorageSync 和 uni.getStorageSync

通过uni.setStorageSync可以将数据存储到localStorage中，通过uni.getStorageSync可以从localStorage中读取数据。

示例： $\sum$


 
// 存储数据 
uni.setStorageSync('name', '张三'); 
// 读取数据 
var name = uni.getStorageSync('name');

2. uni.setStorage 和 uni.getStorage

通过uni.setStorage可以将数据存储到storage中，通过uni.getStorage可以从storage中读取数据。

示例：


 
// 存储数据 
uni.setStorage({ 
  key: 'age', 
  data: 20, 
  success: function () { 
    console.log('存储成功') 
  } 
}) 
// 读取数据 
uni.getStorage({ 
  key: 'age', 
  success: function (res) { 
    console.log('读取成功', res.data) 
  } 
})

需要注意的是，storage的存储和读取都是异步的，需要通过success回调来获取结果。另外，localStorage和storage都有一定的存储容量限制，需要根据实际情况来进行选择。

`二、uni.addInterceptor(STRING, OBJECT)`

uni.addInterceptor(STRING, OBJECT) 是一个UniApp API。该函数可以向全局 Interceptor (拦截器)中添加拦截器。它接受两个参数：字符串 STRING 和对象 OBJECT。

其中，STRING 是需要拦截的 HTTP 请求的 URL 的匹配规则，可以使用字符串或正则表达式来表示。例如，可以使用字符串 "/api/*" 来表示拦截所有以 "/api/" 开头的 URL 请求；或者使用正则表达式 /\/api.*/ 来表示拦截所有以 "/api" 开头的 URL 请求。

而 OBJECT 是拦截器对象，它包含了一系列拦截器的方法，例如 request、response 等。这些方法在 HTTP 请求发起前、响应到来时等事件触发时会被自动调用，从而实现对 HTTP 请求的拦截和处理。可以在拦截器中对请求进行修改或添加一些额外的处理，然后再将请求发送到服务器。当服务器返回响应时，拦截器将会在响应数据被应用前对响应进行处理。

通过这种方法，我们可以在做前端开发的时候对所有的 HTTP 请求进行全局的拦截处理，实现对请求的统一处理、简化开发流程、提高代码质量等目的。

三、云函数

Uni-app云函数是一种运行在云端的服务器less架构的后端开发解决方案，借助于uniCloud，可以实现快速、安全、高效、弹性伸缩的开发流程。

Uni-app云函数的主要特点包括：

1. 支持主流的Node.js运行环境，集成了众多的npm包，可以轻松编写和调试JavaScript后端代码；

2. 可以快速创建和部署云函数，通过云函数实现API接口、定时任务、数据存储等各种应用场景；

3. 可以实现与Uni-app前端项目的无缝结合，直接调用云函数接口，获取返回值，提高开发效率；

4. 集成了多种安全措施，如防盗链、防DDos攻击等，保障云函数的数据安全和服务可靠性；

5. 可以灵活地选择所在的地理位置、网络环境和计算资源，满足不同的业务需求。

总的来说，Uni-app云函数是一种适合开发者快速构建高效后端服务的云端解决方案，可以帮助开发者在短时间内完成业务逻辑的开发和部署，提高开发效率和安全性。

四、request

uni-app的uni.request是一个API接口，可用于发送HTTP请求。它使用Promise对象返回结果，支持基于Promise的异步编程风格，并提供了一些丰富的配置选项和回调函数。

uni.request支持发送不同类型的请求，例如GET、POST、PUT、DELETE等，还支持上传和下载文件以及设置请求头部信息。同时，它也支持网络请求的拦截和取消功能，并且允许开发者设置请求超时时间。

除此之外，uni.request还支持在请求过程中显示加载动画，并在请求失败时展示错误提示信息。它非常适合用于在uni-app中进行Web API调用和数据交互操作。

示例： $\prod$


uni.request({
  url: 'https://api.example.com/users',
  method: 'GET',
  data: {
    page: 1,
    limit: 10
  },
  header: {
    'Content-Type': 'application/json'
  },
  success: function (res) {
    console.log(res.data);
  },
  fail: function (err) {
    console.error(err);
  }
});

在上述示例中，uni.request方法接收一个配置对象作为参数，包括以下选项：

url：请求的URL地址。
method：请求的方法，如GET、POST等，默认为GET。
data：要发送的数据，在GET请求中会被转换为查询字符串。
header：请求的header信息。
success：请求成功时的回调函数，接收响应数据作为参数。
fail：请求失败时的回调函数，接收错误信息作为参数。

修改上述示例中的URL地址、请求方法、请求数据、请求头等，以满足你的实际需求。

需要注意的是，uni.request方法是异步的，因此你需要在success回调函数中处理响应数据或在fail回调函数中处理请求失败的情况。

除了uni.request，uni-app还提供了其他的网络请求方法，如uni.uploadFile用于文件上传、uni.downloadFile用于文件下载等。你可以根据需要选择适合的方法进行网络请求。

五、生命周期

uni-app是一个基于Vue.js的跨平台应用开发框架，它可以用于同时开发iOS、Android、H5和小程序等多个平台的应用程序。uni-app的生命周期和Vue.js类似，但也有一些特定的生命周期钩子函数。下面是uni-app的主要生命周期：

1. `beforeCreate`（beforeCreate）：在实例初始化之后，数据观测和事件配置之前被调用。


export default {
  beforeCreate() {
    // 执行一些初始化逻辑操作
    console.log('beforeCreate hook executed');
  },
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  mounted() {
    // 在mounted钩子函数中调用greet方法
    this.greet();
  }
};

2. `created`（created）：实例已经创建完成，数据观测和事件配置已完成，但尚未挂载到DOM上。


export default {
  created() {
    // 执行一些初始化逻辑操作
    console.log('created hook executed');
    
    // 发起异步请求
    fetchData().then(data => {
      // 对获取到的数据进行操作
      console.log(data);
    });
  },
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  mounted() {
    // 在mounted钩子函数中调用greet方法
    this.greet();
  }
};

3. `beforeMount`（beforeMount）：在实例挂载之前被调用。


export default {
  beforeMount() {
    // 执行一些操作
    console.log('beforeMount hook executed');
    
    // 更新组件的数据
    this.message = 'Hello, uni-app!';
  },
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  mounted() {
    // 在mounted钩子函数中调用greet方法
    this.greet();
  }
};

4. `mounted`（mounted）：实例已经挂载到DOM上，在这个时候，你可以访问到组件的DOM元素。


export default {
  mounted() {
    // 操作组件的DOM
    const element = this.$refs.myElement;
    element.innerText = 'Hello, uni-app!';
    
    // 发起异步请求
    fetchData().then(data => {
      // 对获取到的数据进行操作
      console.log(data);
    });
    
    // 注册事件监听器
    this.$refs.myElement.addEventListener('click', this.handleClick);
  },
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
    handleClick() {
      console.log('Element clicked!');
    }
  }
};

5. `beforeUpdate`（beforeUpdate）：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。


export default {
  data() {
    return {
      message: 'Hello, world!',
      count: 0
    };
  },
  beforeUpdate() {
    // 执行一些操作
    console.log('beforeUpdate hook executed');
    
    // 访问更新前的数据
    console.log('Count before update:', this.count);
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

6. `updated`（updated）：在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。


export default {
  updated() {
    // 操作更新后的DOM
    const element = this.$refs.myElement;
    element.innerText = 'Hello, updated uni-app!';
    
    // 做一些额外的数据处理
    if (this.count >= 10) {
      console.log('Count is greater than or equal to 10!');
    }
    
    // 发起异步请求
    fetchData().then(data => {
      // 对获取到的数据进行操作
      console.log(data);
    });
  },
  data() {
    return {
      message: 'Hello, world!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

7. `beforeDestroy`（beforeDestroy）：在实例销毁之前调用。这个时候，实例仍然完全可用。


export default {
  beforeDestroy() {
    // 清理定时器
    clearInterval(this.timer);
    
    // 移除事件监听器
    this.$refs.myElement.removeEventListener('click', this.handleClick);
    
    // 执行清理逻辑
    cleanup();
  },
  mounted() {
    // 创建定时器
    this.timer = setInterval(() => {
      console.log('Timer tick');
    }, 1000);
    
    // 注册事件监听器
    this.$refs.myElement.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Element clicked!');
    },
    cleanup() {
      console.log('Cleaning up...');
    }
  }
};

8. `destroyed`（destroyed）：在实例销毁之后调用，此时组件已经被销毁，数据和事件监听都已被移除。


export default {
  destroyed() {
    // 清除资源
    releaseResources();
    
    // 发送销毁通知
    this.$emit('component-destroyed');
  },
  mounted() {
    // 做一些初始化操作
    initialize();
  }
};

除了上述的常见生命周期钩子函数外，uni-app还提供了一些平台特定的生命周期钩子函数：

- `onLaunch`（小程序）：应用初始化时触发。
- `onShow`（小程序）：应用启动或从后台进入前台时触发。
- `onHide`（小程序）：应用从前台进入后台时触发。
- `onError`（小程序）：应用发生错误时触发。
- `onPageNotFound`（小程序）：页面未找到时触发。

这些生命周期钩子函数允许开发者在应用的不同阶段执行特定的代码逻辑，以实现对应的功能和操作。详细的生命周期钩子函数使用方法和注意事项可以参考uni-app的官方文档。

六、云服务器（Dcloud）

六.一、Dcloud简介

DCloud是一家提供uni-app跨平台开发框架和云服务的公司，而非一个特定的云服务器提供商。DCloud提供了基于HBuilderX开发工具的云打包服务，开发者可以使用该服务将uni-app应用程序快速打包成小程序、App和H5等形式，并发布到各个平台。

当开发者使用DCloud云打包服务时，DCloud会提供一个云端的构建环境和资源，用于将开发者所编写的uni-app应用程序打包成各种平台下的可执行文件或网页。开发者不需要自己配置服务器环境，只需上传应用代码和配置相关选项，DCloud将自动进行构建和打包工作。

需要注意的是，DCloud云服务是针对uni-app开发者的，用于简化应用打包和发布流程，并提供了一些额外的功能和服务，比如自动更新、云函数和云数据库等，以满足开发者的需求。

然而，如果你需要自行搭建云服务器来托管uni-app应用程序，你可以选择其他通用的云服务器提供商（如阿里云、腾讯云、AWS等）或通过自有服务器的方式进行部署。这些云服务器提供商可以满足uni-app应用的基本运行需求，并提供一定程度的灵活性和可扩展性。

六.二、云服务器

对于uni-app应用程序的云服务器，你可以将它们部署到各种云服务提供商或自己的私有服务器。以下是一些常见的云服务器选项：

1. 云服务提供商（Cloud Service Providers）：如阿里云、腾讯云、~~AWS（亚马逊云服务）、Google Cloud等~~，它们提供了各种云计算服务和资源，包括虚拟机、容器、对象存储、数据库等。你可以选择适合你应用程序需求和预算的云服务器实例进行部署。一般使用阿里云和腾讯云

2. 轻量级容器服务（Lightweight Container Services）：如Docker、Kubernetes等，它们提供了容器化应用程序部署和管理的解决方案。使用容器服务可以实现更灵活、高效的部署方式，并且可以跨多个云平台进行部署。

3. 自有服务器（Private Servers）：如果你有自己的服务器资源，可以选择将uni-app应用程序部署到自有服务器上。你可以使用虚拟化技术如KVM、VMware等创建虚拟机实例，并在其中配置Web服务器环境来托管uni-app应用程序。

在选择云服务器时，你需要考虑以下因素：

- 可扩展性：确保云服务器提供商可以根据应用需求进行弹性扩展，以便适应流量增长或其他变化。
- 性能：选择具有良好性能的服务器实例，以确保应用程序的响应速度和用户体验。
- 可用性：选择提供高可用性的云服务器，以确保你的应用程序在遇到故障或意外事件时可持续运行。
- 成本效益：评估不同云服务器选项的价格和费用结构，并选择适合你预算的选项。

此外，在部署uni-app应用程序时，你还需要设置域名、配置SSL证书以实现HTTPS访问，确保服务器安全和数据传输的保护。

需要根据你的具体需求和预算来选择适合的云服务器方案。在部署过程中，确保按照相关文档和最佳实践进行配置和管理，并定期进行安全和性能优化。

注意 $\cdot$ ：Dcloud里阿里云服务器可免费使用，但不能升级，升级就要收费，不建议小白升级，本人亲身经历!!!!

七、云打包

uni-app云打包是DCloud提供的一项云服务，用于将uni-app应用程序快速打包成小程序、App、H5等形式，并发布到各个平台。

使用uni-app云打包可以带来以下几个主要优势：

1. 快速打包：云打包服务提供了高效的打包流程和资源，可以大大缩短打包时间，节省开发者的时间和精力。

2. 平台适配：云打包服务可以根据目标平台的要求，自动进行适配和转换，确保应用程序在不同平台上的运行和展示效果一致。

3. 一键发布：云打包服务提供了一键式的发布功能，让开发者可以轻松地将应用程序发布到目标平台，无需手动配置和调试复杂的环境。

4. 功能扩展：云打包服务还提供了一些额外的功能和服务，如自动更新、云函数和云数据库等，使开发者可以更方便地构建和管理应用程序。

使用uni-app云打包的基本流程如下：

1. 登录DCloud官网，并进入uni-app云打包服务页面。

2. 创建一个新的打包任务，选择目标平台和配置相关选项。

3. 上传uni-app应用程序的代码和资源文件。

4. 根据需要配置应用的图标、名称、版本号等信息。

5. 开始打包任务，并等待打包成功。

6. 打包完成后，可以下载打包好的应用程序，或者直接发布到各个平台。

云打包服务能够极大地简化uni-app应用程序的打包和发布过程，使开发者能够更快速、高效地将应用推向市场，并且无需过多关注底层的技术细节和配置。

注意：云打包要是涉及云函数的话，云函数过期了你的东西也就没了，只能看见壳子。并且打包到微信小程序和成一个app展示的效果是不一样的，微信小程序能兼容你的所有功能，其他的平台未必。

总结:

uni-app是一个很好用的程序，上手十分简单，我十分建议大家学习使用，并且现在是小程序为主流，大家这方面的基础不要落下，我在这里希望我的文章对大家有帮助，能让大家的学业和事业顺顺利利

end

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/231195