uniapp与React Native/vue 的简单对比

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

‌关键代码示例‌：

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

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

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

‌与React Native的差异‌：

1. ‌语法机制‌：

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

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

     if (Platform.OS === 'ios') { ... }

2. ‌编译产物‌：

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

---

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

‌核心实现‌：

<!-- 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实现‌：

// 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对比

‌封装示例‌：

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实现‌：

// 传递参数
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：

     history.push('/detail', { secretData: 123 }) // 通过state传递

2. ‌安全性‌：

   • UniApp参数暴露在URL中
   • React Router可通过内存state传递敏感数据

3. ‌数据类型支持‌：

   • UniApp只能传递可序列化数据
   • React Router支持任意对象（包括循环引用等特殊结构）