uniapp与React Native/vue 的简单对比

1. 在UniApp中如何通过条件编译实现多平台代码适配?

关键代码示例‌:

javascript 复制代码
// 仅H5平台生效
// #ifdef H5
console.log("H5平台特定逻辑");
// #endif

// 仅微信小程序生效
// #ifdef MP-WEIXIN
wx.request({...});
// #endif

// 多平台共用代码
function commonLogic() { ... }

与React Native的差异‌:

  1. 语法机制‌:

    • UniApp使用注释指令(如#ifdef)实现条件编译,代码在编译时按平台剔除无关内容。

    • React Native通过运行时判断Platform.OS实现平台分支逻辑:

      ini 复制代码
      if (Platform.OS === 'ios') { ... }
  2. 编译产物‌:

    • UniApp为每个平台生成独立包,体积更小。
    • React Native所有平台代码打包在一起,运行时动态选择逻辑。

2. 图片懒加载自定义组件设计

核心实现‌:

xml 复制代码
<!-- lazy-image.vue -->
<template>
  <image :src="loaded ? realSrc : placeholder" @load="handleLoad" />
</template>

<script>
export default {
  props: {
    realSrc: String,
    placeholder: { type: String, default: '/placeholder.png' }
  },
  data() {
    return { loaded: false };
  },
  mounted() {
    // #ifdef H5
    const observer = new IntersectionObserver(entries => {
      if (entries.isIntersecting) {
        this.loaded = true;
        observer.disconnect();
      }
    });
    observer.observe(this.$el);
    // #endif

    // #ifdef MP-WEIXIN
    const observer = wx.createIntersectionObserver();
    observer.relativeToViewport().observe('', res => {
      if (res.intersectionRatio > 0) this.loaded = true;
    });
    // #endif
  }
}
</script>

平台适配要点‌:

  • H5使用标准IntersectionObserver API
  • 微信小程序使用wx.createIntersectionObserver
  • 通过条件编译隔离平台逻辑

3. UniApp中Vuex与Composition API的差异

Vuex实现‌:

javascript 复制代码
// store.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: { increment: state => state.count++ }
})

// 页面使用
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState(['count']),
  methods: mapMutations(['increment'])
}

与Composition API对比‌:

  1. 状态管理方式‌:

    • Vuex:集中式存储,强调单一数据源
    • Composition API:分散式状态,可通过reactive()创建响应式对象
  2. 代码组织‌:

    • Vuex需要严格定义state/mutations/actions
    • Composition API更灵活,使用setup()自由组合逻辑
  3. 调试支持‌:

    • Vuex有devtools时间旅行调试
    • Composition API需自行实现调试工具

4. uni.request封装与Axios对比

封装示例‌:

php 复制代码
const http = {
  request(options) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: 'https://api.example.com' + options.url,
        method: options.method || 'GET',
        data: options.data,
        header: { 'X-Token': uni.getStorageSync('token') },
        success: res => res.statusCode === 200 ? resolve(res.data) : reject(res),
        fail: reject
      })
    })
  }
}

// 使用
http.request({ url: '/user', method: 'POST', data: { name: 'John' } })

与Axios对比‌:

特性 uni.request Axios
运行环境 多平台(小程序/H5等) 主要浏览器/Node
拦截器 需手动实现 内置拦截器机制
自动JSON转换 部分平台需要手动处理 自动转换请求/响应数据
取消请求 不支持 支持CancelToken
适配器扩展 无法扩展 支持自定义适配器

5. 页面跳转传参与React Router对比

UniApp实现‌:

javascript 复制代码
// 传递参数
const complexData = { user: { id: 1, tags: ['a', 'b'] } }
uni.navigateTo({
  url: `/pages/detail?payload=${encodeURIComponent(JSON.stringify(complexData))}`
})

// 接收参数
onLoad(options) {
  const data = JSON.parse(decodeURIComponent(options.payload))
}

与React Router差异‌:

  1. 参数传递方式‌:

    • UniApp:强制URL字符串传输,需手动序列化

    • React Router:

      php 复制代码
      history.push('/detail', { secretData: 123 }) // 通过state传递
  2. 安全性‌:

    • UniApp参数暴露在URL中
    • React Router可通过内存state传递敏感数据
  3. 数据类型支持‌:

    • UniApp只能传递可序列化数据
    • React Router支持任意对象(包括循环引用等特殊结构)
相关推荐
LeeAt7 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅8 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233325 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
Java技术小馆1 小时前
GitDiagram如何让你的GitHub项目可视化
java·后端·面试