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支持任意对象(包括循环引用等特殊结构)
相关推荐
浪裡遊32 分钟前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿33 分钟前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj33 分钟前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝43 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
uhakadotcom1 小时前
过来人教你写简历的技巧(如何写简历,个人评价 / 个人优势如何写)
面试·架构·github
Aphasia3111 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion1 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜1 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾1 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*1 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm