刷刷题27（uniapp2)

一、UniApp 跨平台渲染原理及性能优化策略

UniApp 通过将 Vue 语法编译为各平台原生代码实现跨端，其底层采用双线程架构：逻辑层（JS）与视图层（WebView/Native）。例如，小程序端通过 WebView 渲染，App 端使用 Weex 原生渲染引擎。性能优化方案包括：

‌减少逻辑层与视图层通信频率 ‌：避免频繁调用 uni.$emit/uni.$on，改用 dataset 传递数据‌。
‌图片资源懒加载 ‌：使用 v-lazy 指令或动态绑定 src 属性，结合 IntersectionObserver 监听元素可见性‌。
‌长列表优化 ‌：采用 virtual-list 组件或分页加载策略，减少 DOM 节点数量‌。

二、UniApp 如何实现原生插件开发与通信？

‌开发步骤‌：

‌编写原生模块‌：通过 Android Studio/Xcode 实现原生功能（如相机控制），封装为插件‌。
‌注册插件 ‌：在 manifest.json 中声明插件依赖，使用 uni.requireNativePlugin 调用原生模块。
‌通信机制 ‌：通过 uni.postMessage 和 uni.onNativeEvent 实现 JS 与原生代码的双向通信‌。

示例（调用相机） ‌：

ini 复制代码

const cameraModule = uni.requireNativePlugin('MyCameraModule');
cameraModule.takePhoto({ quality: 'high' }, res => {
  console.log('Photo path:', res.path);
});

三、UniApp 条件编译的深度应用场景

条件编译通过 #ifdef/#ifndef 区分不同平台代码，高级用法包括：

‌差异化样式 ‌：针对 H5 和小程序调整布局，如在小程序中使用 scroll-view 替代 H5 的 overflow: scroll‌。
‌API 兼容性处理 ‌：例如仅在 App 端调用 uni.getSystemInfoSync().platform 获取设备信息‌。
‌组件按需加载 ‌：在微信小程序中动态引入 <ad> 广告组件，其他平台隐藏‌。

四、UniApp 中复杂状态管理的实现方案

‌推荐方案‌：

‌Vuex 模块化 ‌：拆分 Store 为独立模块（如 user、cart），通过命名空间隔离状态‌。
‌持久化存储 ‌：结合 uni.setStorageSync 和 Vuex 插件，实现状态持久化与自动恢复‌。
‌异步操作规范 ‌：使用 actions 处理异步请求，封装统一的错误处理逻辑‌。

‌示例（购物车状态） ‌：

javascript 复制代码

// store/modules/cart.js
export default {
  namespaced: true,
  state: { items: [] },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  }
};

五、UniApp 路由拦截与权限控制的高级实践

‌实现方案‌：

‌全局路由守卫 ‌：在 App.vue 的 onLaunch 中监听路由变化，通过 uni.addInterceptor 拦截跳转行为‌。
‌动态路由表 ‌：根据用户角色从服务端获取权限配置，动态生成 pages.json 中的路由规则‌。
‌Token 验证‌：在拦截器中检查本地存储的 Token，自动跳转登录页或刷新 Token‌。

‌示例（拦截未登录用户） ‌：

javascript 复制代码

uni.addInterceptor('navigateTo', {
  invoke(args) {
    if (!uni.getStorageSync('token') && args.url !== '/login') {
      uni.redirectTo({ url: '/login' });
      return false;
    }
    return true;
  }
});