当前位置：首页 > news >正文

uniapp多端适配

news 来源：原创 2025/4/29 15:48:01

UniApp是一个基于Vue.js开发多端应用的框架，它可以让开发者编写一次代码，同时适配iOS、Android、Web等多个平台。

环境搭建：

UniApp基于Vue.js开发，所以需要先安装Vue CLI

npm install -g @vue/cli

创建一个新的UniApp项目，名为"myapp"

vue create -p dcloudio/uni-preset-vue myapp

进入项目目录，并运行以下命令启动开发服务器：

cd myapp
npm run dev:mp-weixin

多端适配

基于flexbox的弹性布局来实现不同设备的适配

display: flex;
在UniApp中使用rpx作为单位进行适配

<template>
  <view class="container">
  <view class="box">1</view>
  <view class="box">2</view>
  <view class="box">3</view>
  </view>
  </template>

  <style>
  .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 200rpx; /* 在UniApp中使用rpx作为单位进行适配 */
  height: 200rpx;
  background-color: #f00;
}
</style>

条件编译

UniApp提供了条件编译的功能，可以根据不同平台对代码进行选择性编译

<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <button @click="wechatLogin">微信登录</button>
    <!-- #endif -->
 
    <!-- #ifdef H5 -->
    <button @click="webLogin">网页登录</button>
    <!-- #endif -->
 
    <!-- ... -->
  </view>
</template>
 
<script>
export default {
  methods: {
    wechatLogin() {
      // 微信登录逻辑
    },
 
    webLogin() {
      // 网页登录逻辑
    },
 
    // ...
  }
}
</script>

跨端UI组件

UniApp内置了一些跨平台的UI组件，使得开发者可以更方便地实现多端适配。

比如，可以使用uni-icons组件来显示不同平台的图标。

<template>
  <view>
    <uni-icons :type="iconType"></uni-icons>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      iconType: ''
    };
  },
  onLoad() {
    #ifdef MP-WEIXIN
    this.iconType = 'wechat';
    #endif
 
    #ifdef H5
    this.iconType = 'html5';
    #endif
  }
}
</script>