从入门到开发：使用uni-app构建跨平台应用

uni-app 是一个基于 Vue.js 的前端框架，旨在帮助开发者构建跨平台应用，包括 iOS、Android、Web、以及各种小程序。本文将详细介绍 uni-app 的项目构成、标签、语法、方法声明、组件、传值和路由，帮助新手从入门到开发自己的项目。

目录

项目构成

标签与语法

方法声明

组件

传值

路由

示例项目：商品展示页

---

项目构成

uni-app 项目的基本目录结构如下：

my-uni-app
├── pages                // 页面目录
│   ├── index
│   │   └── index.vue
├── static               // 静态资源目录
│   └── images
│       └── logo.png
├── unpackage            // 编译后生成的文件目录
├── main.js              // 项目入口文件
├── App.vue              // 应用根组件
├── manifest.json        // 应用配置文件
├── pages.json           // 页面配置文件
└── uni.scss             // 全局样式文件

标签与语法

uni-app 使用 Vue.js 的语法和组件体系，但增加了一些自定义标签，如 <view> 和 <text>。

示例：

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

<script>
export default {
  data() {
    return {
      message: "Welcome to uni-app"
    };
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.title {
  font-size: 20px;
  color: #333;
}
</style>

方法声明

在 uni-app 中，方法的声明和使用与 Vue.js 保持一致：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<template>
  <view>
    <button @click="increment">Click me</button>
    <text>{{ count }}</text>
  </view>
</template>

组件

uni-app 支持组件化开发，可以创建和引入自定义组件：

创建组件：

components/MyComponent.vue

<template>
  <view>
    <text>{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    text: String
  }
};
</script>

<style>
/* 组件样式 */
</style>

使用组件：

<template>
  <view>
    <my-component text="Hello from component!"></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

传值

组件之间的传值通过 props 和 events 实现：

父组件传值给子组件：

<my-component :text="parentText"></my-component>

子组件向父组件发送事件：

MyComponent.vue

<template>
  <button @click="sendEvent">Send Event</button>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$emit('customEvent', 'Hello, parent!');
    }
  }
};
</script>

ParentComponent.vue

<template>
  <my-component @customEvent="handleEvent"></my-component>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message);
    }
  }
};
</script>

路由

uni-app 使用 pages.json 配置文件管理路由和页面路径：

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "About"
      }
    }
  ]
}

页面导航：

// 使用 JavaScript 进行页面跳转
uni.navigateTo({
  url: '/pages/about/about'
});

使用 <navigator> 标签：

<navigator url="/pages/about/about">
  Go to About Page
</navigator>

示例项目：商品展示页

以下是一个完整的示例项目，展示如何使用 uni-app 构建一个简单的商品展示页面：

项目结构：

my-uni-app
├── pages
│   ├── index
│   │   └── index.vue
│   ├── product
│   │   └── product.vue
└── pages.json

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/product/product",
      "style": {
        "navigationBarTitleText": "Product"
      }
    }
  ]
}

index.vue

<template>
  <view class="container">
    <view class="product-list">
      <view class="product-item" v-for="product in products" :key="product.id">
        <image :src="product.image" class="product-image"></image>
        <text class="product-name">{{ product.name }}</text>
        <text class="product-price">{{ product.price }}</text>
        <button @click="viewProduct(product.id)">View Details</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: "Product 1", price: "$10", image: "/static/images/product1.jpg" },
        { id: 2, name: "Product 2", price: "$20", image: "/static/images/product2.jpg" }
      ]
    };
  },
  methods: {
    viewProduct(id) {
      uni.navigateTo({
        url: `/pages/product/product?id=${id}`
      });
    }
  }
};
</script>

<style>
.container {
  padding: 10px;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: 48%;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px;
}
.product-image {
  width: 100%;
  height: 150rpx;
}
.product-name {
  font-size: 16px;
  color: #333;
}
.product-price {
  font-size: 14px;
  color: #999;
}
</style>

product.vue

<template>
  <view class="container">
    <text class="product-details">Product Details for ID: {{ productId }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: null
    };
  },
  onLoad(options) {
    this.productId = options.id;
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.product-details {
  font-size: 18px;
  color: #333;
}
</style>