uniapp多端适配

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>
相关推荐
996幸存者4 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮5 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘9 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero12 小时前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析1 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero2 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
FliPPeDround2 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite