uni - app 跨平台开发-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58504010/article/details/148769670

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信 / 支付宝 / 百度 / 头条 / QQ / 钉钉 / 淘宝）等多个平台，真正实现了 "一次开发，多端部署"。

核心特点

跨平台一致性：一套代码同时运行在 iOS、Android、H5 和小程序等多个平台，大大降低开发成本。
原生性能体验：通过条件编译可以针对不同平台编写专用代码，调用各平台的原生能力，保证良好的用户体验。
丰富的组件与 API：提供了丰富的内置组件和 API，支持微信小程序语法、支付宝小程序语法等，方便开发者快速上手。
开发效率高：使用 Vue 语法开发，支持热更新，开发体验接近 Web 开发，同时支持使用 npm 安装第三方模块。

开发环境搭建

首先需要安装 HBuilderX 开发工具，它是 uni-app 官方推荐的开发工具，集成了完整的开发、调试、打包流程：

下载并安装 HBuilderX
创建 uni-app 项目：通过 HBuilderX 菜单【文件】->【新建】->【项目】，选择 "uni-app" 模板
运行项目：选择运行到浏览器、模拟器或真机

项目结构

典型的 uni-app 项目结构如下：

plaintext

├── App.vue               # 应用配置，用来配置App全局样式以及监听应用生命周期
├── main.js               # Vue初始化入口文件
├── manifest.json         # 配置应用名称、图标、权限等打包信息
├── pages.json            # 配置页面路由、导航条、选项卡等页面类信息
├── uni.scss              # 全局样式
├── pages                 # 业务页面文件存放目录
│   ├── index
│   │   ├── index.vue
│   └── logs
│       └── logs.vue
├── static                # 静态资源目录，如图片、字体等
├── components            # 组件目录
├── platform              # 存放各平台专用代码
├── uni_modules           # uni-app插件规范目录
├── package.json          # npm包管理配置文件
└── nativeplugins         # 原生插件目录

条件编译

条件编译是 uni-app 中非常重要的特性，允许在同一个项目中针对不同平台编写不同的代码：

javascript

// #ifdef H5
console.log('这段代码只在H5平台执行');
// #endif

// #ifdef APP-PLUS
console.log('这段代码只在App平台执行');
// #endif

// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序平台执行');
// #endif

页面与路由

uni-app 的路由基于配置式，在pages.json中配置路由信息：

json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "backgroundColor": "#F8F8F8",
    "backgroundTextStyle": "dark"
  }
}

使用uni.navigateTo、uni.redirectTo等 API 进行页面跳转：

javascript

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
});

// 关闭当前页面，跳转到应用内的某个页面
uni.redirectTo({
  url: '/pages/login/login'
});

UI 组件开发

uni-app 提供了丰富的内置组件，同时也支持使用第三方 UI 库：

vue

<template>
  <view class="container">
    <!-- 按钮组件 -->
    <button type="primary" @click="submitForm">提交</button>
    
    <!-- 列表组件 -->
    <scroll-view scroll-y="true" style="height: 300rpx;">
      <view class="list-item" v-for="(item, index) in list" :key="index">
        {{item.title}}
      </view>
    </scroll-view>
    
    <!-- 条件编译示例 -->
    <!-- #ifdef H5 -->
    <view class="h5-only">这个组件只在H5平台显示</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '项目1' },
        { id: 2, title: '项目2' },
        { id: 3, title: '项目3' }
      ]
    }
  },
  methods: {
    submitForm() {
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
    }
  }
}
</script>

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

.list-item {
  padding: 15rpx;
  border-bottom: 1rpx solid #eee;
}

.h5-only {
  color: red;
  margin-top: 20rpx;
}
</style>

生命周期

uni-app 应用和页面都有各自的生命周期函数：

javascript

// App.vue 应用生命周期
export default {
  onLaunch: function() {
    console.log('App Launch');
  },
  onShow: function() {
    console.log('App Show');
  },
  onHide: function() {
    console.log('App Hide');
  }
}

// 页面生命周期
export default {
  data() {
    return {
      title: '页面标题'
    }
  },
  onLoad(options) {
    // 页面加载时执行
    console.log('页面加载', options);
  },
  onReady() {
    // 页面初次渲染完成时执行
    console.log('页面初次渲染完成');
  },
  onShow() {
    // 页面显示时执行
    console.log('页面显示');
  },
  onHide() {
    // 页面隐藏时执行
    console.log('页面隐藏');
  },
  onUnload() {
    // 页面卸载时执行
    console.log('页面卸载');
  }
}

网络请求

使用uni.request进行网络请求：

javascript

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    page: 1,
    size: 10
  },
  success: (res) => {
    console.log('请求成功', res.data);
    this.list = res.data.data;
  },
  fail: (err) => {
    console.error('请求失败', err);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
  }
});