# 3.1 统一的代码结构
UniApp的跨平台开发是其最大的优势之一。开发者可以使用一套代码在不同的平台上构建应用，无需重复编写代码。这是因为UniApp基于Vue.js框架，使用Vue的组件化开发方式，将业务逻辑和界面组件分离，使得代码结构更加清晰和易于维护。
<template>
<view>
<text>Hello UniApp!</text>
</view>
</template>
<script>
export default {
//
};
</script>
<style>
/* 样式代码 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3.2 平台特有代码
虽然UniApp提供了统一的代码结构，但不同平台之间还是存在一些差异，比如小程序和H5的导航栏、样式等。为了适配不同平台，UniApp提供了平台特有代码的支持。
<template>
<div>
<!-- 公共代码 -->
<p>这是一个通用的组件</p>
<!-- 平台特有代码 -->
<uni-popup v-if="isWeixin">
<!-- 在微信小程序中显示 -->
<p>这是一个只在微信小程序中显示的组件</p>
</uni-popup>
<uni-popup v-else>
<!-- 在其他平台中显示 -->
<p>这是一个在其他平台中显示的组件</p>
</uni-popup>
</div>
</template>
<script>
export default {
data() {
return {
isWeixin: false,
};
},
mounted() {
// 判断当前平台是否为微信小程序
this.isWeixin = uni.getSystemInfoSync().platform === 'wechat';
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 3.3 跨平台调试
UniApp提供了跨平台调试的功能，使得开发者可以在同一个开发环境中调试多个平台。
// 运行到浏览器
npm run dev:bowser
// 或运行到微信小程序
npm run dev:mp-weixin
// 或运行到H5
npm run dev:h5
// 或运行到手机
npm run dev:app-plus
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
通过以上代码示例，我们可以更直观地了解UniApp的跨平台开发特性。使用UniApp，我们可以在一套代码中覆盖多个平台，快速构建出高性能、原生体验的应用程序。