uniapp入门必看_uniapp空模版的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/sqbk23_c/article/details/147730098

#引言

在如今这个多端并行的移动互联网时代，如何高效地开发出适配多个平台的应用，成为了众多开发者面临的难题。而 uni-app 就如同一位英勇的骑士，凭借着 “一次开发，多端适配” 的强大能力，为开发者们披荆斩棘，开辟出了一条便捷之路。今天，就让我们一起深入探索 uni-app 的奇妙世界吧！

一、uni-app 简介与优势

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，支持在微信小程序、H5、App 等多个平台运行。它的核心优势在于：

多端兼容 ：能将一套代码同时编译到多个平台，极大地减少了开发成本和时间，无需为每个平台单独开发一套代码。
丰富的组件库 ：内置了大量常用的 UI 组件，如按钮、列表、弹窗等，满足日常开发需求，让开发效率飞速提升。
强大的生态 ：借助 Vue.js 的强大生态，开发者可以方便地引入各种 Vue 插件和工具，拓展应用功能。

二、环境搭建

首先，我们需要在本地搭建好 uni-app 的开发环境。以下是详细的步骤：

安装 Node.js：访问Node.js 官网，下载并安装适合你系统的版本。安装完成后，打开终端，输入node -v和npm -v，检查是否安装成功。
安装 HBuilderX：HBuilderX 是 uni-app 官方推荐的开发工具，它集成了代码编辑、调试、打包等功能。前往HBuilderX 下载页面，下载并安装最新版本。安装完成后，打开 HBuilderX，进行简单的初始化设置，如选择主题、语言等。
创建 uni-app 项目：在 HBuilderX 中，点击 “新建项目”，选择 “uni-app”，然后填写项目名称、应用名称、AppID 等信息，选择合适的模板（如EMY空白模板），点击 “创建” 按钮，等待项目创建完成。创建成功后，你将看到项目的文件目录结构。

三、第一个 uni-app 应用

让我们动手创建一个简单的 “Hello World” 应用，感受一下 uni-app 的开发流程。

在项目根目录下的pages文件夹中，新建一个页面文件夹，例如hello，并在其中创建hello.vue文件。
在hello.vue文件中，编写以下代码：

<template>
  <view class="container">
    <text class="hello-text">Hello, uni-app World!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.hello-text {
  font-size: 24px;
  color: #007aff;
}
</style>

在pages.json文件中，将新建的hello页面加入到页面路径配置中：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/hello/hello",
      "style": {
        "navigationBarTitleText": "Hello World"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "uni-app"
  }
}

点击 HBuilderX 界面上方的运行按钮，选择运行的目标平台（如微信小程序、H5 等），就能看到应用的运行效果啦。如果是微信小程序，需要先登录微信开发者工具，然后将项目编译到微信开发者工具中进行预览。

四、页面开发与组件使用

（一）页面布局

uni-app 提供了灵活的页面布局方式，常用的有<view>、<scroll-view>、<swiper>等组件。

<template>
  <view class="container">
    <!-- 普通视图容器 -->
    <view class="box">这是一个普通的 view 容器</view>

    <!-- 滚动视图容器 -->
    <scroll-view class="scroll-view" scroll-y>
      <view v-for="(item, index) in list" :key="index" class="scroll-item">{{ item }}</view>
    </scroll-view>

    <!-- 轮播组件 -->
    <swiper class="swiper" indicator-dots autoplay interval="3000">
      <swiper-item>
        <view class="swiper-item">轮播图 1</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">轮播图 2</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">轮播图 3</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['列表项 1', '列表项 2', '列表项 3', '列表项 4', '列表项 5', '列表项 6', '列表项 7', '列表项 8']
    };
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.box {
  height: 100px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-view {
  height: 200px;
  background-color: #e0e0e0;
  margin-bottom: 20px;
}

.scroll-item {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}

.swiper {
  height: 150px;
}

.swiper-item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d0d0d0;
  color: white;
  font-size: 16px;
}
</style>

（二）常用组件

uni-app 内置了许多实用的组件，以下是一些常用的组件及其用法示例。

按钮组件（<button>）

<template>
  <view class="container">
    <button type="primary" @click="handleClick">主要按钮</button>
    <button type="default" @click="handleClick">普通按钮</button>
    <button type="warn" @click="handleClick">警告按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮点击了',
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

button {
  margin: 10px 0;
  width: 80%;
}
</style>

列表组件（<uni-list>和<uni-list-item>）

<template>
  <view class="container">
    <uni-list>
      <uni-list-item title="列表项 1" note="这是列表项 1 的描述" />
      <uni-list-item title="列表项 2" note="这是列表项 2 的描述" />
      <uni-list-item title="列表项 3" note="这是列表项 3 的描述" />
    </uni-list>
  </view>
</template>

<script>
import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue';
import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue';

export default {
  components: {
    uniList,
    uniListItem
  }
};
</script>

<style>
.container {
  padding: 10px;
}
</style>

五、网络请求与数据处理

在开发应用时，与服务器进行数据交互是必不可少的。uni-app 提供了uni.request方法来进行网络请求。

<template>
  <view class="container">
    <button type="primary" @click="fetchData">获取数据</button>
    <view v-if="data" class="data-container">
      <text>获取到的数据：</text>
      <text class="data-text">{{ data }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const res = await uni.request({
          url: 'https://api.example.com/data',
          method: 'GET',
          dataType: 'json'
        });
        this.data = res[1].data;
        uni.showToast({
          title: '数据获取成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('请求失败:', error);
        uni.showToast({
          title: '数据获取失败',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

button {
  margin-bottom: 20px;
}

.data-container {
  width: 80%;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
}

.data-text {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>

六、本地存储与缓存

为了提升用户体验，合理利用本地存储和缓存也是非常重要的。

本地存储（uni.setStorage和uni.getStorage）

<template>
  <view class="container">
    <button type="primary" @click="saveData">保存数据到本地存储</button>
    <button type="default" @click="readData">从本地存储读取数据</button>
    <text v-if="readResult" class="result-text">{{ readResult }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      readResult: null
    };
  },
  methods: {
    saveData() {
      const dataToSave = { name: '张三', age: 25 };
      uni.setStorage({
        key: 'userInfo',
        data: dataToSave,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('保存失败:', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    },
    readData() {
      uni.getStorage({
        key: 'userInfo',
        success: (res) => {
          this.readResult = JSON.stringify(res.data);
          uni.showToast({
            title: '读取成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('读取失败:', err);
          uni.showToast({
            title: '读取失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

button {
  margin: 10px 0;
}

.result-text {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}
</style>

缓存（uni.setStorageSync和uni.getStorageSync）

// 保存缓存数据
const cacheData = { score: 100 };
uni.setStorageSync('cacheData', cacheData);

// 读取缓存数据
const readCacheData = uni.getStorageSync('cacheData');
console.log('缓存数据:', readCacheData);

七、条件编译与平台差异处理

由于不同平台可能存在一些差异，uni-app 提供了条件编译功能，让我们能够针对特定平台编写特定的代码。

<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <text class="platform-text">这是在微信小程序平台显示的内容</text>
    <!-- #endif -->

    <!-- #ifdef H5 -->
    <text class="platform-text">这是在 H5 平台显示的内容</text>
    <!-- #endif -->

    <!-- #ifdef APP-PLUS -->
    <text class="platform-text">这是在 App 平台显示的内容</text>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.platform-text {
  margin: 10px 0;
  font-size: 16px;
  color: #007aff;
}
</style>

八、应用打包与发布

当应用开发完成后，我们就可以进行打包发布了。以下是不同平台的打包步骤：

微信小程序 ：在 HBuilderX 中，点击 “发行”->“微信小程序”->“上传”，按照向导填写相关信息，然后将生成的代码包上传到微信开发者平台进行发布。
H5 ：选择 “发行”->“Web 平台”->“编译”，在输出目录中会生成编译后的 H5 文件，将其部署到你的服务器上即可。
App ：对于安卓平台，选择 “发行”->“App”->“安卓原生 App”，按照提示配置打包参数；对于 iOS 平台，需要先在苹果开发者中心进行一系列的配置，然后在 HBuilderX 中点击 “发行”->“App”->“iOS 原生 App” 进行打包。

九、总结

uni-app 作为一款优秀的跨平台开发框架，凭借其多端兼容、丰富的组件库、强大的生态等优势，在移动应用开发领域展现出了巨大的潜力。通过本文的介绍，相信大家对 uni-app 有了一个初步的了解和认识。当然，uni-app 的功能远远不止这些，它还有很多值得我们深入探索的地方。在今后的开发实践中，让我们不断学习和探索，充分利用 uni-app 的优势，开发出更多高质量的跨平台应用，为用户提供更优质的服务和体验。如果你对 uni-app 也有自己的见解和经验，欢迎在评论区分享交流哦！