UniApp介绍、常用标签、请求

什么是UniApp

UniApp是一款使用HTML5、CSS3、JavaScript开发的跨平台框架，它能够同时生成iOS、Android、Web、小程序等多端应用。通过使用UniApp，我们可以以一套代码开发多个平台的应用，大大简化开发工作并提高开发效率。

UniApp的常用标签

View标签

View标签是UniApp中最常用的组件之一，用来表示一个可视化的区域。它可以包含其他组件，并且可以自由控制组件的位置和大小。

<view>
  <!-- 这里是view标签的内容 -->
</view>

Text标签

Text标签用来显示文本内容，可以设置字体大小、颜色等样式。

<text class="title">这是一个标题</text>
<text>这是正文内容</text>

Image标签

Image标签用来显示图片，可以设置图片路径、尺寸等属性。

<image src="/static/logo.png" width="200" height="200"></image>

Button标签

Button标签用来创建一个按钮，可以设置按钮样式、点击事件等。

<button class="primary-button" @click="handleClick">点击按钮</button>

请求&localStorage封装

请求封装

在UniApp中，我们可以使用uni.request方法发送网络请求。为了方便使用和管理，我们可以对请求进行封装。

export function request(url, method, data) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

在组件中使用封装的请求方法:

import { request } from '@/utils/request';

export default {
  methods: {
    async getData() {
      try {
        const res = await request('/api/data', 'GET', {});
        console.log(res);
      } catch (err) {
        console.error(err);
      }
    }
  }
}

localStorage封装

UniApp支持使用localStorage来存储数据，为了方便使用和管理，我们可以对localStorage进行封装。

export function setStorage(key, value) {
  uni.setStorageSync(key, value);
}

export function getStorage(key) {
  return uni.getStorageSync(key);
}

export function removeStorage(key) {
  uni.removeStorageSync(key);
}

export function clearStorage() {
  uni.clearStorageSync();
}

在组件中使用封装的localStorage方法:

import { setStorage, getStorage } from '@/utils/storage';

export default {
  methods: {
    setData() {
      setStorage('name', 'uniapp');
    },
    getData() {
      const name = getStorage('name');
      console.log(name);
    }
  }
}

结语

UniApp是一个强大的跨平台框架，可以大大简化多平台应用的开发工作。通过使用常用标签和封装的请求和localStorage方法，我们可以更加方便地开发UniApp应用。希望本篇博客对您有所帮助！