uni-app的实用技巧及数据缓存_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的官方文档。