🔄 跨端开发 - UNIAPP

What is uni-app? What platforms does it support?

考察点：uni-app基础概念。

答案：

uni-app 是由 DCloud（数字天堂）开发的一个使用 Vue.js 开发所有前端应用的框架。它允许开发者编写一套代码，发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

支持的平台：

• 移动端：iOS App、Android App（通过原生渲染）
• Web端：H5（浏览器）
• 小程序：微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、钉钉小程序、淘宝小程序
• 快应用：华为、小米、OPPO、vivo等厂商的快应用
• 桌面端：Windows、MacOS（通过Electron）

核心特点：

1. 一码多端：真正实现写一套代码，发布到多个平台
2. Vue.js语法：基于Vue.js开发，学习成本低
3. 原生性能：App端采用原生渲染，性能接近原生应用
4. 丰富的组件和API：提供完整的组件库和统一的API

适用场景：

• 需要快速覆盖多个平台的项目
• 团队具备Vue.js开发经验
• 对开发效率要求较高的中小型应用

What is the core development language of uni-app? How does it differ from native mini-program development?

考察点：技术栈对比。

答案：

uni-app 的核心开发语言是 Vue.js，使用 Vue 的语法和生态系统来构建跨平台应用。

uni-app 技术栈：

• 模板语法：Vue.js 的 template 语法
• 脚本语言：JavaScript/TypeScript + Vue Composition API 或 Options API
• 样式语言：CSS/SCSS/Less，支持 rpx 响应式单位
• 状态管理：Vuex/Pinia
• 构建工具：基于 webpack/vite 的编译系统

与原生小程序开发的主要区别：

代码对比示例：

<!-- uni-app (Vue语法) -->
<template>
  <view class="container">
    <text @click="handleClick">{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app'
    }
  },
  methods: {
    handleClick() {
      console.log('点击了')
    }
  }
}
</script>

<!-- 微信小程序原生语法 -->
<view class="container">
  <text bindtap="handleClick">{{message}}</text>
</view>

// .js文件
Page({
  data: {
    message: 'Hello 微信小程序'
  },
  handleClick: function() {
    console.log('点击了')
  }
})

uni-app 的优势在于统一了开发体验，降低了学习和维护成本，特别适合需要快速覆盖多个平台的项目。

What is the role of the pages.json configuration file in uni-app?

考察点：配置文件理解。

答案：

pages.json 是 uni-app 项目的核心配置文件，用于配置应用的页面路径、窗口表现、标签栏、网络超时等全局配置。它相当于原生小程序的 app.json 配置文件。

主要配置项：

1. pages（页面路径配置）：

   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "navigationBarTitleText": "首页",
           "enablePullDownRefresh": true
         }
       },
       {
         "path": "pages/detail/detail",
         "style": {
           "navigationBarTitleText": "详情页"
         }
       }
     ]
   }
   

2. globalStyle（全局样式配置）：

   {
     "globalStyle": {
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "uni-app",
       "navigationBarBackgroundColor": "#F8F8F8",
       "backgroundColor": "#F8F8F8"
     }
   }
   

3. tabBar（底部标签栏配置）：

   {
     "tabBar": {
       "color": "#7A7E83",
       "selectedColor": "#3cc51f",
       "borderStyle": "black",
       "backgroundColor": "#ffffff",
       "list": [
         {
           "pagePath": "pages/component/index",
           "iconPath": "static/image/icon_component.png",
           "selectedIconPath": "static/image/icon_component_HL.png",
           "text": "组件"
         },
         {
           "pagePath": "pages/API/index",
           "iconPath": "static/image/icon_API.png",
           "selectedIconPath": "static/image/icon_API_HL.png",
           "text": "接口"
         }
       ]
     }
   }
   

4. condition（启动模式配置）：

   {
     "condition": {
       "current": 0,
       "list": [
         {
           "name": "详情页",
           "path": "pages/detail/detail",
           "query": "id=1&name=uniapp"
         }
       ]
     }
   }
   

核心作用：

• 应用配置中心：统一管理应用的全局配置
• 页面路由管理：定义页面路径和路由规则
• UI样式统一：配置全局的导航栏、状态栏样式
• 功能开关控制：控制下拉刷新、上拉加载等功能
• 平台差异化配置：支持不同平台的特殊配置

注意事项：

• pages 数组的第一项为应用启动页（首页）
• 新增页面需要在 pages.json 中注册才能访问
• 配置修改后需要重新编译才能生效

How to navigate between pages in uni-app? What are the common navigation methods?

考察点：页面导航机制。

答案：

uni-app 提供了多种页面跳转方式，通过统一的路由API实现跨平台的页面导航功能。

常用的跳转方式：

1. uni.navigateTo（保留当前页面）：

   // 跳转到应用内的某个页面，保留当前页面
   uni.navigateTo({
     url: '/pages/detail/detail?id=1&name=uniapp',
     success: function(res) {
       console.log('跳转成功')
     },
     fail: function(err) {
       console.log('跳转失败')
     }
   })
   

2. uni.redirectTo（关闭当前页面）：

   // 关闭当前页面，跳转到应用内的某个页面
   uni.redirectTo({
     url: '/pages/login/login'
   })
   

3. uni.reLaunch（关闭所有页面）：

   // 关闭所有页面，打开到应用内的某个页面
   uni.reLaunch({
     url: '/pages/index/index'
   })
   

4. uni.switchTab（切换到 tabBar 页面）：

   // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
   uni.switchTab({
     url: '/pages/tabbar/home'
   })
   

5. uni.navigateBack（返回上一页）：

   // 关闭当前页面，返回上一页面或多级页面
   uni.navigateBack({
     delta: 1  // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
   })
   

跳转方式对比：

传参和接收参数：

// 传参（发送页面）
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

// 接收参数（目标页面）
export default {
  onLoad(options) {
    console.log(options.id)    // 123
    console.log(options.name)  // test
  }
}

最佳实践：

• 根据业务场景选择合适的跳转方式
• 注意页面栈的层级限制（最多10层）
• 传递复杂数据时可使用全局数据或本地存储
• 在跳转前做好参数验证和错误处理

What are the lifecycle hooks in uni-app? What is their relationship with Vue lifecycle?

考察点：生命周期理解。

答案：

uni-app 的生命周期分为应用生命周期和页面生命周期，它在支持 Vue 标准生命周期的基础上，新增了应用级别和页面级别的生命周期钩子。

应用生命周期（App.vue）：

// App.vue
export default {
  onLaunch: function(options) {
    console.log('App Launch', options)
    // 应用初始化完成时触发（全局只触发一次）
  },
  onShow: function(options) {
    console.log('App Show', options)
    // 应用启动，或从后台进入前台显示
  },
  onHide: function() {
    console.log('App Hide')
    // 应用从前台进入后台
  },
  onError: function(err) {
    console.log('App Error', err)
    // 应用发生错误时触发
  }
}

页面生命周期：

export default {
  // Vue 标准生命周期（仍然支持）
  created() {
    console.log('Vue created')
  },
  mounted() {
    console.log('Vue mounted')
  },

  // uni-app 页面生命周期
  onLoad(options) {
    console.log('页面加载', options)
    // 监听页面加载，其参数为上个页面传递的数据
  },
  onShow() {
    console.log('页面显示')
    // 监听页面显示。页面每次出现在屏幕上都触发
  },
  onReady() {
    console.log('页面初次渲染完成')
    // 监听页面初次渲染完成
  },
  onHide() {
    console.log('页面隐藏')
    // 监听页面隐藏
  },
  onUnload() {
    console.log('页面卸载')
    // 监听页面卸载
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
    // 监听用户下拉动作
  },
  onReachBottom() {
    console.log('上拉触底')
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage() {
    // 用户点击右上角分享
    return {
      title: '分享标题',
      path: '/pages/index/index'
    }
  }
}

生命周期执行顺序：

页面加载流程：
onLoad → created → mounted → onShow → onReady

页面切换流程：
离开页面：onHide → onUnload
进入页面：onLoad → onShow

与Vue生命周期的关系：

使用建议：

• 数据初始化：在 onLoad 中进行，可获取页面参数
• DOM操作：在 onReady 中进行，确保页面渲染完成
• 接口调用：可在 onLoad 或 onShow 中调用
• 资源清理：在 onUnload 中清理定时器、事件监听等
• 页面缓存：利用 onShow/onHide 处理页面切换逻辑

uni-app 的生命周期设计兼顾了 Vue 的组件化开发和小程序的页面管理特性。

How to use conditional compilation in uni-app? What are the applicable scenarios?

考察点：条件编译机制。

答案：

条件编译是 uni-app 解决跨平台差异的核心机制，通过特殊的注释语法，让同一套代码在不同平台编译时包含不同的代码块。

基本语法：

// 基本格式
// #ifdef 平台名称
平台特有的代码
// #endif

// 多平台
// #ifdef 平台名称1 || 平台名称2
多平台共用代码
// #endif

// 排除平台
// #ifndef 平台名称
除了该平台外的其他平台代码
// #endif

常用平台标识：

代码示例：

1. JavaScript 中的条件编译：

export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    // #ifdef H5
    document.title = '网页标题'
    // #endif
    
    // #ifdef MP-WEIXIN
    wx.setNavigationBarTitle({
      title: '微信小程序标题'
    })
    // #endif
    
    // #ifdef APP-PLUS
    plus.navigator.setStatusBarStyle('dark')
    // #endif
  },
  methods: {
    handleClick() {
      // #ifdef H5
      window.open('https://uniapp.dcloud.io')
      // #endif
      
      // #ifdef MP
      uni.navigateTo({
        url: '/pages/webview/webview'
      })
      // #endif
    }
  }
}

2. CSS 样式中的条件编译：

.container {
  padding: 20px;
}

/* #ifdef H5 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.container {
  padding-top: 44px; /* 微信小程序导航栏高度 */
}
/* #endif */

/* #ifdef APP-PLUS */
.container {
  padding-top: var(--status-bar-height);
}
/* #endif */

3. 模板中的条件编译：

<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <web-header></web-header>
    <!-- #endif -->
    
    <!-- #ifdef MP -->
    <mp-header></mp-header>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <app-header></app-header>
    <!-- #endif -->
    
    <view class="content">
      <!-- #ifndef H5 -->
      <button @click="scanCode">扫码</button>
      <!-- #endif -->
    </view>
  </view>
</template>

4. 整个文件的条件编译：

// utils/platform.h5.js
// 该文件只在H5平台编译

// utils/platform.mp.js  
// 该文件只在小程序平台编译

// 在引入时
// #ifdef H5
import platform from './utils/platform.h5.js'
// #endif
// #ifdef MP
import platform from './utils/platform.mp.js'
// #endif

适用场景：

1. API差异处理：

   • 不同平台的特有API调用
   • 支付、分享等功能的平台差异

2. UI适配：

   • 不同平台的样式适配
   • 导航栏、状态栏高度处理

3. 功能开关：

   • 某些功能只在特定平台提供
   • H5端的网页特有功能

4. 性能优化：

   • 针对不同平台的优化策略
   • 小程序的包体积优化

最佳实践：

• 尽量减少条件编译的使用，优先考虑统一的解决方案
• 将平台差异封装成公共方法或组件
• 使用文件级条件编译来组织代码结构
• 定期检查和清理不必要的条件编译代码

How to handle data binding and event handling in uni-app?

考察点：基础语法应用。

答案：

uni-app 完全采用 Vue.js 的数据绑定和事件处理语法，提供了响应式的数据绑定和丰富的事件处理机制。

数据绑定：

1. 插值表达式：

<template>
  <view>
    <text>{{message}}</text>
    <text>{{user.name}}</text>
    <text>{{formatDate(timestamp)}}</text>
  </view>
</template>

2. 属性绑定：

<template>
  <view>
    <image :src="imageUrl" :class="imageClass"></image>
    <input :placeholder="placeholderText" :disabled="isDisabled">
  </view>
</template>

3. 条件渲染：

<template>
  <view>
    <text v-if="isLogin">欢迎回来</text>
    <text v-else>请先登录</text>
    <view v-show="loading">加载中...</view>
  </view>
</template>

4. 列表渲染：

<template>
  <view>
    <view v-for="(item, index) in list" :key="item.id">
      <text>{{index}} - {{item.name}}</text>
    </view>
  </view>
</template>

事件处理：

1. 基本事件绑定：

<template>
  <view>
    <button @click="handleClick">点击</button>
    <input @input="handleInput" @blur="handleBlur">
    <view @touchstart="handleTouchStart">触摸区域</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击')
    },
    handleInput(e) {
      this.inputValue = e.target.value
    },
    handleBlur(e) {
      console.log('输入框失去焦点')
    }
  }
}
</script>

2. 事件修饰符：

<template>
  <view>
    <button @click.stop="handleClick">阻止冒泡</button>
    <form @submit.prevent="handleSubmit">阻止默认行为</form>
    <input @keyup.enter="handleEnter">回车键</input>
  </view>
</template>

3. 传递参数：

<template>
  <view>
    <button @click="handleClick('参数')">传递参数</button>
    <view v-for="item in list" :key="item.id" @click="selectItem(item)">
      {{item.name}}
    </view>
  </view>
</template>

What is the rpx unit? How does it solve screen adaptation issues?

考察点：响应式布局。

答案：

rpx（responsive pixel）是 uni-app 提供的响应式像素单位，可以根据屏幕宽度进行自适应调整，解决不同设备的屏幕适配问题。

rpx 的计算规则：

• 规定屏幕宽度为 750rpx
• 在任何屏幕上，750rpx = 屏幕宽度
• 1rpx = 屏幕宽度 / 750

换算关系：

使用示例：

.container {
  width: 750rpx;      /* 占满屏幕宽度 */
  height: 200rpx;     /* 响应式高度 */
  padding: 20rpx;     /* 响应式内边距 */
  margin: 10rpx;      /* 响应式外边距 */
  font-size: 28rpx;   /* 响应式字体 */
}

.box {
  width: 375rpx;      /* 屏幕宽度的一半 */
  height: 375rpx;
}

适配优势：

• 自动适配：无需手动计算不同设备的尺寸
• 设计稿对应：UI设计稿按750px宽度设计，开发时直接使用rpx
• 精确还原：保证在不同设备上的视觉效果一致

How to import and use components in uni-app?

考察点：组件系统基础。

答案：

uni-app 支持 Vue 组件系统，提供全局组件注册和局部组件引入两种方式。

局部组件引入：

<template>
  <view>
    <my-component :title="title" @change="handleChange"></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      title: '组件标题'
    }
  },
  methods: {
    handleChange(data) {
      console.log('组件传递的数据:', data)
    }
  }
}
</script>

全局组件注册：

// main.js
import MyComponent from './components/MyComponent.vue'
Vue.component('my-component', MyComponent)

easycom 自动引入：

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
      "^my-(.*)": "@/components/my-$1/my-$1.vue"
    }
  }
}

How to implement local storage in uni-app?

考察点：数据持久化。

答案：

uni-app 提供统一的本地存储 API，支持同步和异步两种方式。

基本使用：

// 存储数据
uni.setStorage({
  key: 'user',
  data: {name: 'John', age: 25},
  success: function () {
    console.log('存储成功')
  }
})

// 同步存储
uni.setStorageSync('token', 'abc123')

// 获取数据
uni.getStorage({
  key: 'user',
  success: function (res) {
    console.log(res.data)
  }
})

// 同步获取
const token = uni.getStorageSync('token')

// 删除数据
uni.removeStorage({key: 'user'})
uni.removeStorageSync('token')

// 清空存储
uni.clearStorage()
uni.clearStorageSync()

存储限制：

• 单个 key 存储数据大小限制为 1MB
• 总存储大小限制因平台而异（通常 10MB+）
• 数据会自动进行 JSON 序列化和反序列化

最佳实践：

• 敏感信息加密后存储
• 定期清理无用数据
• 使用 try-catch 处理存储异常

What is the compilation principle of uni-app? How does it achieve one codebase for multiple platforms?

考察点：编译机制理解。

答案：

uni-app 通过编译时转换和运行时适配的结合，实现了一套代码编译到多个平台的目标。其核心是将 Vue.js 代码转换为各平台的原生代码。

编译架构：

Vue.js 源码
    ↓
编译器分析（AST解析）
    ↓
平台差异处理（条件编译）
    ↓
多平台代码生成
    ├── H5: 标准Vue.js + uni API polyfill
    ├── 小程序: wxml/wxss/js + 运行时适配层
    ├── App: nvue/weex + 原生渲染
    └── 快应用: 快应用DSL + 运行时桥接

编译过程详解：

1. 源码解析阶段：

   // 原始Vue代码
   <template>
     <view @click="handleClick">{{message}}</view>
   </template>
   
   // AST解析后的数据结构
   {
     type: 'template',
     children: [{
       tag: 'view',
       events: [{name: 'click', handler: 'handleClick'}],
       text: '{{message}}'
     }]
   }
   

2. 平台代码生成：

   H5平台：

   // 编译为标准Vue组件
   <template>
     <div class="uni-view" @click="handleClick">{{message}}</div>
   </template>
   

   微信小程序：

   <!-- 编译为小程序语法 -->
   <view bindtap="handleClick">{{message}}</view>
   

   App端（nvue）：

   // 编译为weex组件
   <div @click="handleClick">
     <text>{{message}}</text>
   </div>
   

运行时适配层：

1. API统一层：

   // uni-app统一API
   uni.showToast({title: '提示'})
   
   // 各平台运行时转换
   // H5: 自定义toast组件
   // 微信小程序: wx.showToast()
   // App: plus.nativeUI.toast()
   

2. 事件系统适配：

   // 统一事件处理
   const eventHandler = {
     // H5环境
     h5: (event) => event,
     // 小程序环境  
     mp: (event) => ({
       target: event.target,
       detail: event.detail
     }),
     // App环境
     app: (event) => transformAppEvent(event)
   }
   

核心技术实现：

1. 条件编译系统：

   // 编译时根据平台标识包含不同代码
   if (process.env.UNI_PLATFORM === 'h5') {
     // H5特有代码
   } else if (process.env.UNI_PLATFORM === 'mp-weixin') {
     // 微信小程序特有代码
   }
   

2. 组件映射表：

   const componentMap = {
     view: {
       h5: 'div',
       mp: 'view', 
       app: 'div'
     },
     text: {
       h5: 'span',
       mp: 'text',
       app: 'text'  
     }
   }
   

3. CSS转换引擎：

   // rpx单位转换
   function transformRpx(css, platform) {
     return css.replace(/(\d+)rpx/g, (match, value) => {
       const ratio = getDeviceRatio(platform)
       return (value * ratio) + 'px'
     })
   }
   

多端运行的关键优势：

• 编译时优化：只包含目标平台需要的代码，减小包体积
• 运行时适配：统一API调用，屏蔽平台差异
• 组件映射：自动转换为平台原生组件，保证性能
• 样式处理：自动处理单位换算和兼容性问题

这种编译 + 运行时的架构设计，既保证了开发体验的一致性，又能充分利用各平台的原生能力。

How to use Vuex for state management in uni-app?

考察点：状态管理应用。

答案：

uni-app 完全支持 Vuex 进行全局状态管理，用于处理跨页面的数据共享和状态同步。

基本配置：

// store/index.js
import { createStore } from 'vuex'
import user from './modules/user'

const store = createStore({
  modules: {
    user
  },
  state: {
    count: 0,
    appVersion: '1.0.0'
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    },
    SET_COUNT(state, count) {
      state.count = count
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('INCREMENT')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

export default store

// main.js
import { createApp } from 'vue'
import store from './store'

const app = createApp(App)
app.use(store)

在页面中使用：

<template>
  <view>
    <text>Count: {{count}}</text>
    <text>Double: {{doubleCount}}</text>
    <button @click="increment">增加</button>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['INCREMENT']),
    increment() {
      this.INCREMENT()
    }
  }
}
</script>

How to handle network requests in uni-app? What are the best practices for request encapsulation?

考察点：网络请求封装。

答案：

uni-app 使用 uni.request 进行网络请求，建议封装统一的请求库来处理公共逻辑。

请求封装示例：

// utils/request.js
class Request {
  constructor(options = {}) {
    this.baseURL = options.baseURL || ''
    this.timeout = options.timeout || 60000
    this.interceptors = {
      request: [],
      response: []
    }
  }

  // 请求拦截器
  interceptRequest(fn) {
    this.interceptors.request.push(fn)
  }

  // 响应拦截器  
  interceptResponse(fn) {
    this.interceptors.response.push(fn)
  }

  request(options) {
    return new Promise((resolve, reject) => {
      // 请求配置处理
      let config = {
        url: this.baseURL + options.url,
        method: options.method || 'GET',
        data: options.data || {},
        header: {
          'Content-Type': 'application/json',
          ...options.header
        },
        timeout: this.timeout
      }

      // 执行请求拦截器
      this.interceptors.request.forEach(fn => {
        config = fn(config)
      })

      uni.request({
        ...config,
        success: (res) => {
          // 执行响应拦截器
          let response = res
          this.interceptors.response.forEach(fn => {
            response = fn(response)
          })
          
          if (res.statusCode === 200) {
            resolve(response.data)
          } else {
            reject(new Error(`请求失败：${res.statusCode}`))
          }
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  }

  get(url, params) {
    return this.request({
      url,
      method: 'GET',
      data: params
    })
  }

  post(url, data) {
    return this.request({
      url,
      method: 'POST', 
      data
    })
  }
}

// 创建实例
const http = new Request({
  baseURL: 'https://api.example.com'
})

// 添加请求拦截器（添加token）
http.interceptRequest((config) => {
  const token = uni.getStorageSync('token')
  if (token) {
    config.header.Authorization = `Bearer ${token}`
  }
  return config
})

// 添加响应拦截器（错误处理）
http.interceptResponse((response) => {
  if (response.data.code !== 200) {
    uni.showToast({
      title: response.data.message,
      icon: 'none'
    })
  }
  return response
})

export default http

How to create custom components in uni-app? What are the component communication methods?

考察点：组件开发与通信。

答案：

uni-app 使用 Vue 组件系统，支持完整的组件化开发和多种通信方式。

自定义组件创建：

<!-- components/MyCard.vue -->
<template>
  <view class="card">
    <view class="card-header">
      <text class="title">{{title}}</text>
    </view>
    <view class="card-body">
      <slot></slot>
    </view>
    <view class="card-footer">
      <button @click="handleClick">{{buttonText}}</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MyCard',
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    buttonText: {
      type: String,
      default: '按钮'
    }
  },
  emits: ['cardClick'],
  methods: {
    handleClick() {
      this.$emit('cardClick', {
        title: this.title,
        timestamp: Date.now()
      })
    }
  }
}
</script>

组件通信方式：

1. Props 下传数据：

<my-card :title="cardTitle" :button-text="btnText"></my-card>

2. Emit 上传事件：

<my-card @card-click="handleCardClick"></my-card>

3. Provide/Inject 跨层级通信：

// 祖先组件
export default {
  provide() {
    return {
      theme: this.theme,
      updateTheme: this.updateTheme
    }
  }
}

// 后代组件
export default {
  inject: ['theme', 'updateTheme']
}

4. Vuex 全局状态：

// 任意组件
this.$store.commit('UPDATE_USER', userData)

5. Event Bus 事件总线：

// utils/eventBus.js
import { createApp } from 'vue'
export const EventBus = createApp({}).config.globalProperties

// 发送事件
EventBus.$emit('custom-event', data)

// 接收事件  
EventBus.$on('custom-event', handler)

How does the plugin system work in uni-app?

考察点：插件机制理解。

答案：

uni-app 插件系统分为内置插件和原生插件两大类，通过统一的API接口为开发者提供扩展能力。

插件类型：

1. 内置插件（JS插件）：

   • 纯JavaScript实现，跨平台兼容
   • 通过npm安装，编译时集成
   • 示例：uni-ui组件库、uni-simple-router

2. 原生插件（Native Plugin）：

   • 使用原生语言开发（iOS/Android）
   • 提供系统级能力（相机、蓝牙等）
   • 需要云打包或离线SDK集成

使用原生插件：

// 1. 在manifest.json中配置
{
  "nativePlugins": {
    "TestPlugin": {
      "version": "1.0.0", 
      "provider": "插件ID"
    }
  }
}

// 2. 在代码中使用
const testPlugin = uni.requireNativePlugin('TestPlugin')

testPlugin.doSomething({
  data: 'test'
}, (result) => {
  console.log('插件回调:', result)
})

自定义原生插件开发：

// Android插件示例 (Java)
public class TestModule extends UniModule {
    @UniJSMethod(uiThread = false)
    public void doSomething(JSONObject options, UniJSCallback callback) {
        // 插件逻辑
        JSONObject result = new JSONObject();
        result.put("code", 0);
        callback.invoke(result);
    }
}

// iOS插件示例 (Objective-C)
@implementation TestModule
UNI_EXPORT_METHOD(@selector(doSomething:callback:))
- (void)doSomething:(NSDictionary *)options callback:(UniModuleCallback)callback {
    // 插件逻辑
    callback(@{@"code": @0});
}
@end

插件生态：

• DCloud插件市场：官方插件商店
• 社区插件：开源社区贡献
• 企业定制插件：针对特定需求开发

插件系统让uni-app在保持跨平台一致性的同时，能够充分利用各平台的原生能力。

How to handle platform differences in uni-app?

考察点：平台差异处理。

答案：

uni-app 提供多种方式处理平台差异，确保在不同平台上的功能和体验一致性。

差异处理策略：

1. 条件编译：

// #ifdef H5
// H5平台特有代码
// #endif

// #ifdef MP-WEIXIN || MP-ALIPAY  
// 小程序通用代码
// #endif

// #ifndef APP-PLUS
// 非App平台代码
// #endif

2. 平台判断API：

// 运行时平台判断
const platform = uni.getSystemInfoSync().platform
const isH5 = platform === 'h5'
const isApp = platform === 'app'

// 更精确的平台检测
// #ifdef H5
const isWechatBrowser = /micromessenger/i.test(navigator.userAgent)
// #endif

3. 差异化配置：

// pages.json中的平台配置
{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页",
      "h5": {
        "titleNView": false
      },
      "mp-weixin": {
        "navigationBarBackgroundColor": "#000000"
      }
    }
  }]
}

How to implement pull-to-load and pull-to-refresh in uni-app?

考察点：列表交互实现。

答案：

uni-app 提供原生支持的下拉刷新和上拉加载功能。

下拉刷新实现：

// pages.json配置
{
  "path": "pages/list/list",
  "style": {
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
  }
}

// 页面代码
export default {
  data() {
    return {
      list: [],
      loading: false
    }
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    async refreshData() {
      this.loading = true
      try {
        const res = await api.getList()
        this.list = res.data
      } finally {
        this.loading = false
        uni.stopPullDownRefresh() // 停止下拉刷新动画
      }
    }
  }
}

上拉加载实现：

export default {
  data() {
    return {
      list: [],
      page: 1,
      hasMore: true
    }
  },
  onReachBottom() {
    if (this.hasMore) {
      this.loadMore()
    }
  },
  methods: {
    async loadMore() {
      try {
        const res = await api.getList({
          page: this.page + 1
        })
        if (res.data.length > 0) {
          this.list = [...this.list, ...res.data]
          this.page++
        } else {
          this.hasMore = false
        }
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    }
  }
}

How to use native plugins in uni-app?

考察点：原生能力集成。

答案：

原生插件为uni-app提供了访问设备原生功能的能力。

使用步骤：

1. 安装插件：

// 从插件市场安装或本地导入
// manifest.json配置
{
  "nativePlugins": {
    "插件名": {
      "version": "版本号",
      "provider": "插件提供商ID"
    }
  }
}

2. 引入使用：

const plugin = uni.requireNativePlugin('插件名')

// 调用插件方法
plugin.methodName({
  param1: 'value1'
}, (result) => {
  console.log('插件返回:', result)
})

常用原生插件示例：

// 蓝牙插件
const bluetooth = uni.requireNativePlugin('bluetooth')
bluetooth.scan({
  timeout: 10000
}, (devices) => {
  console.log('发现设备:', devices)
})

// 相机插件
const camera = uni.requireNativePlugin('camera')
camera.takePhoto({
  quality: 0.8
}, (result) => {
  this.photoPath = result.path
})

What is the packaging and publishing process of uni-app?

考察点：部署流程理解。

答案：

uni-app支持多平台打包发布，每个平台有特定的构建流程。

各平台发布流程：

1. H5发布：

# 构建
npm run build:h5

# 部署到服务器
# dist/build/h5/ 目录上传到web服务器

2. 微信小程序：

# 构建
npm run build:mp-weixin

# 发布步骤：
# 1. 用微信开发者工具打开 dist/build/mp-weixin
# 2. 预览测试
# 3. 上传代码
# 4. 在微信公众平台提交审核

3. App打包：

// 云端打包流程：
// 1. HBuilderX - 发行 - 原生App-云打包
// 2. 配置签名证书
// 3. 选择打包类型（测试/正式）
// 4. 等待云端构建完成

// 离线打包流程：
// 1. 生成本地打包资源
// 2. 集成到原生工程
// 3. 使用Android Studio/Xcode打包

How to perform performance optimization in uni-app?

考察点：性能优化策略。

答案：

uni-app性能优化需要从代码、资源、渲染等多个维度进行。

主要优化策略：

1. 代码优化：

// 使用计算属性缓存
computed: {
  expensiveValue() {
    return this.heavyCalculation()
  }
}

// 事件防抖
methods: {
  search: debounce(function() {
    // 搜索逻辑
  }, 300)
}

// 长列表虚拟滚动
// 使用recycle-list组件

2. 资源优化：

// 图片懒加载
<image lazy-load="true" :src="imgUrl"></image>

// 分包加载配置
// pages.json
{
  "subPackages": [{
    "root": "pages/subpage",
    "pages": [...]
  }]
}

3. 渲染优化：

// 减少setData频率
// 批量更新数据
this.setData({
  'list[0].name': 'new name',
  'list[0].age': 25
})

// 使用key优化列表渲染
<view v-for="item in list" :key="item.id">

4. 网络优化：

// 请求缓存
const cache = new Map()
function request(url) {
  if (cache.has(url)) {
    return Promise.resolve(cache.get(url))
  }
  return uni.request({url}).then(res => {
    cache.set(url, res)
    return res
  })
}

// 预加载关键数据
onLoad() {
  this.preloadData()
}

性能监控：

// 性能监控
const performanceObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance:', entry.name, entry.duration)
  }
})
performanceObserver.observe({entryTypes: ['navigation', 'resource']})

How to design the architecture of a large-scale uni-app project? What factors need to be considered?

考察点：架构设计能力。

答案：

大型uni-app项目需要从技术架构、团队协作、性能优化、可维护性等多个维度进行系统性设计。

整体架构设计：

┌─────────────────────────────────────┐
│              展示层 (View)           │
├─────────────────────────────────────┤
│          业务逻辑层 (Service)         │
├─────────────────────────────────────┤
│          数据访问层 (API/Store)       │
├─────────────────────────────────────┤
│            基础设施层                │
└─────────────────────────────────────┘

目录结构设计：

src/
├── components/           # 公共组件
│   ├── base/            # 基础组件
│   ├── business/        # 业务组件
│   └── layout/          # 布局组件
├── pages/               # 页面
│   ├── home/            # 首页模块
│   ├── user/            # 用户模块
│   └── common/          # 公共页面
├── store/               # 状态管理
│   ├── modules/         # 模块化store
│   └── index.js
├── utils/               # 工具库
│   ├── request.js       # 网络请求
│   ├── storage.js       # 存储管理
│   └── common.js        # 通用工具
├── config/              # 配置文件
│   ├── env.js           # 环境配置
│   └── constants.js     # 常量定义
├── mixins/              # 混入
├── plugins/             # 插件
├── static/              # 静态资源
└── styles/              # 样式文件

核心设计原则：

1. 模块化设计：

// 按功能模块组织代码
// store/modules/user.js
export default {
  namespaced: true,
  state: () => ({
    userInfo: null,
    permissions: []
  }),
  mutations: {
    SET_USER_INFO(state, info) {
      state.userInfo = info
    }
  },
  actions: {
    async login({ commit }, loginData) {
      const res = await userApi.login(loginData)
      commit('SET_USER_INFO', res.userInfo)
      return res
    }
  }
}

2. 服务层封装：

// services/userService.js
class UserService {
  async getUserInfo(userId) {
    return await request.get(`/users/${userId}`)
  }
  
  async updateProfile(data) {
    return await request.put('/users/profile', data)
  }
}

export default new UserService()

3. 配置管理：

// config/env.js
const configs = {
  development: {
    apiBaseUrl: 'http://localhost:3000/api',
    enableDebug: true
  },
  production: {
    apiBaseUrl: 'https://api.prod.com',
    enableDebug: false
  }
}

export default configs[process.env.NODE_ENV]

关键考虑因素：

1. 性能与体验：

   • 分包策略设计
   • 懒加载实现
   • 缓存机制
   • 图片优化

2. 可维护性：

   • 代码规范统一
   • 组件复用设计
   • 文档完善
   • 单元测试覆盖

3. 团队协作：

   • Git工作流规范
   • 代码审查机制
   • 自动化部署
   • 监控告警

4. 平台兼容：

   • 平台差异处理
   • 降级方案设计
   • 兼容性测试

How to implement complex animation effects in uni-app?

考察点：动画实现技巧。

答案：

uni-app 提供多种动画实现方案，可根据复杂度和性能要求选择合适的技术栈。

动画实现方式：

1. CSS动画：

/* 关键帧动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30rpx);
  }
  60% {
    transform: translateY(-15rpx);
  }
}

.bounce-animation {
  animation: bounce 2s infinite;
}

/* 过渡动画 */
.fade-transition {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  transform: translateX(0);
}

.fade-transition.fade-out {
  opacity: 0;
  transform: translateX(100%);
}

2. uni.createAnimation API：

export default {
  data() {
    return {
      animationData: {}
    }
  },
  methods: {
    startComplexAnimation() {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease-in-out'
      })
      
      // 组合动画序列
      animation
        .rotate(180)
        .scale(1.2)
        .translate(100, 50)
        .step()
        .rotate(360)
        .scale(1)
        .translate(0, 0)
        .step()
      
      this.animationData = animation.export()
    }
  }
}

3. Lottie动画集成：

<template>
  <view class="lottie-container">
    <!-- #ifdef H5 -->
    <canvas 
      canvas-id="lottie-canvas" 
      :style="{width: '300px', height: '300px'}">
    </canvas>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <lottie-view 
      :path="animationPath" 
      :autoplay="true" 
      :loop="true">
    </lottie-view>
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef H5
import lottie from 'lottie-web'
// #endif

export default {
  data() {
    return {
      animationPath: '/static/animation.json',
      lottieAnimation: null
    }
  },
  mounted() {
    // #ifdef H5
    this.initLottieH5()
    // #endif
  },
  methods: {
    initLottieH5() {
      this.lottieAnimation = lottie.loadAnimation({
        container: document.getElementById('lottie-canvas'),
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        path: this.animationPath
      })
    }
  }
}
</script>

4. 手势动画：

export default {
  data() {
    return {
      startX: 0,
      currentX: 0,
      translateX: 0
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    
    onTouchMove(e) {
      this.currentX = e.touches[0].clientX
      this.translateX = this.currentX - this.startX
      
      // 实时更新动画
      const animation = uni.createAnimation({
        duration: 0,
        timingFunction: 'linear'
      })
      animation.translateX(this.translateX).step()
      this.animationData = animation.export()
    },
    
    onTouchEnd() {
      // 回弹动画
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      })
      
      if (Math.abs(this.translateX) > 100) {
        // 滑动距离足够，执行动作
        animation.translateX(this.translateX > 0 ? 300 : -300).step()
      } else {
        // 回弹到原位置
        animation.translateX(0).step()
      }
      
      this.animationData = animation.export()
    }
  }
}

How to handle code splitting and lazy loading in uni-app projects?

考察点：代码优化策略。

答案：

uni-app 支持多种代码分割策略来优化应用性能和加载速度。

分包加载配置：

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index"
    }
  ],
  "subPackages": [
    {
      "root": "pages/user",
      "name": "user",
      "pages": [
        {
          "path": "profile/profile"
        },
        {
          "path": "settings/settings"
        }
      ]
    },
    {
      "root": "pages/shop", 
      "name": "shop",
      "pages": [
        {
          "path": "list/list"
        }
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["user"]
    }
  }
}

动态导入组件：

export default {
  components: {
    // 异步组件加载
    AsyncComponent: () => import('@/components/HeavyComponent.vue')
  },
  
  methods: {
    async loadHeavyFeature() {
      // 动态加载功能模块
      const { default: HeavyModule } = await import('@/modules/heavy-feature.js')
      this.heavyModule = new HeavyModule()
    },
    
    async showDialog() {
      // 按需加载对话框组件
      const { default: DialogComponent } = await import('@/components/Dialog.vue')
      
      // 动态创建组件实例
      const dialog = Vue.extend(DialogComponent)
      const instance = new dialog()
      instance.$mount()
      document.body.appendChild(instance.$el)
    }
  }
}

路由级别的懒加载：

// router/index.js (如使用uni-simple-router)
const router = new Router({
  routes: [
    {
      path: '/user/profile',
      component: () => import('@/pages/user/profile/profile.vue')
    },
    {
      path: '/shop/detail',  
      component: () => import('@/pages/shop/detail/detail.vue')
    }
  ]
})

How to implement deep native functionality customization in uni-app?

考察点：原生能力扩展。

答案：

通过原生插件开发和Native.js可以实现深度的原生功能定制。

原生插件开发：

// Android原生插件 (Java)
@UniJSMethod(uiThread = true)
public void customCamera(JSONObject options, UniJSCallback callback) {
    // 自定义相机功能
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    
    // 自定义配置
    intent.putExtra("quality", options.optInt("quality", 80));
    intent.putExtra("maxWidth", options.optInt("maxWidth", 1080));
    
    mUniSDKInstance.getContext().startActivityForResult(intent, REQUEST_CODE);
    this.callback = callback;
}

// 处理返回结果
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == REQUEST_CODE && resultCode == RESULT_OK) {
        // 处理拍照结果
        Bundle extras = data.getExtras();
        Bitmap photo = (Bitmap) extras.get("data");
        
        // 返回给JavaScript
        JSONObject result = new JSONObject();
        result.put("success", true);
        result.put("path", saveBitmapToFile(photo));
        
        callback.invoke(result);
    }
}

// iOS原生插件 (Objective-C)
UNI_EXPORT_METHOD(@selector(customCamera:callback:))
- (void)customCamera:(NSDictionary *)options callback:(UniModuleCallback)callback {
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    picker.delegate = self;
    
    // 自定义配置
    picker.cameraDevice = UIImagePickerControllerCameraDeviceFront;
    picker.allowsEditing = [options[@"allowsEditing"] boolValue];
    
    self.callback = callback;
    
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.weexInstance.viewController presentViewController:picker animated:YES completion:nil];
    });
}

// 委托方法
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info {
    UIImage *image = info[UIImagePickerControllerOriginalImage];
    NSString *path = [self saveImageToTempPath:image];
    
    self.callback(@{@"success": @YES, @"path": path});
    
    [picker dismissViewControllerAnimated:YES completion:nil];
}

Native.js调用：

// #ifdef APP-PLUS
// Android平台调用
const MainActivity = plus.android.runtimeMainActivity()
const Intent = plus.android.importClass('android.content.Intent')
const Settings = plus.android.importClass('android.provider.Settings')

// 打开系统设置
const intent = new Intent(Settings.ACTION_SETTINGS)
MainActivity.startActivity(intent)

// iOS平台调用  
const UIApplication = plus.ios.importClass('UIApplication')
const NSURL = plus.ios.importClass('NSURL')

const app = UIApplication.sharedApplication()
const url = NSURL.URLWithString('app-settings:')
app.openURL(url)
// #endif

How to build CI/CD pipelines for uni-app?

考察点：工程化能力。

答案：

构建完整的CI/CD流水线需要覆盖代码检查、自动构建、测试部署等环节。

GitLab CI配置示例：

# .gitlab-ci.yml
stages:
  - lint
  - build  
  - deploy

variables:
  NODE_VERSION: "16"

# 代码检查阶段
eslint:
  stage: lint
  image: node:${NODE_VERSION}
  script:
    - npm install
    - npm run lint
  only:
    - merge_requests
    - master

# H5构建
build:h5:
  stage: build
  image: node:${NODE_VERSION}
  script:
    - npm install
    - npm run build:h5
  artifacts:
    paths:
      - dist/build/h5/
    expire_in: 1 day
  only:
    - master

# 小程序构建
build:mp:
  stage: build  
  image: node:${NODE_VERSION}
  script:
    - npm install
    - npm run build:mp-weixin
  artifacts:
    paths:
      - dist/build/mp-weixin/
    expire_in: 1 day
  only:
    - master

# H5部署
deploy:h5:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache rsync openssh
  script:
    - rsync -avz --delete dist/build/h5/ user@server:/var/www/html/
  only:
    - master
  when: manual

# 小程序上传（使用miniprogram-ci）
deploy:mp:
  stage: deploy
  image: node:${NODE_VERSION}
  script:
    - npm install miniprogram-ci
    - node scripts/upload-mp.js
  only:
    - master
  when: manual

自动化上传脚本：

// scripts/upload-mp.js
const ci = require('miniprogram-ci')

const project = new ci.Project({
  appid: process.env.MP_APPID,
  type: 'miniProgram',
  projectPath: './dist/build/mp-weixin',
  privateKeyPath: './private.key',
  ignores: ['node_modules/**/*']
})

async function upload() {
  try {
    const uploadResult = await ci.upload({
      project,
      version: process.env.CI_COMMIT_TAG || '1.0.0',
      desc: process.env.CI_COMMIT_MESSAGE || '自动构建',
      setting: {
        es6: true,
        es7: true,
        minify: true
      }
    })
    
    console.log('上传成功:', uploadResult)
  } catch (error) {
    console.error('上传失败:', error)
    process.exit(1)
  }
}

upload()

GitHub Actions配置：

# .github/workflows/deploy.yml
name: Deploy uni-app

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Lint code
      run: npm run lint
    
    - name: Build H5
      run: npm run build:h5
    
    - name: Deploy to server
      if: github.ref == 'refs/heads/main'
      uses: easingthemes/ssh-deploy@main
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        SOURCE: "dist/build/h5/"
        TARGET: "/var/www/html/"

多环境部署配置：

// scripts/deploy.js
const environments = {
  dev: {
    server: 'dev.example.com',
    path: '/var/www/dev/',
    branch: 'develop'
  },
  staging: {
    server: 'staging.example.com', 
    path: '/var/www/staging/',
    branch: 'staging'
  },
  prod: {
    server: 'prod.example.com',
    path: '/var/www/html/',
    branch: 'master'
  }
}

const env = process.argv[2] || 'dev'
const config = environments[env]

console.log(`Deploying to ${env} environment...`)
// 执行部署逻辑

通过完善的CI/CD流水线，可以实现代码提交后的自动化构建、测试和部署，大大提高开发效率和代码质量。

How to perform unit testing and integration testing in uni-app projects?

考察点：测试策略设计。

答案：

uni-app项目可以通过Jest、@vue/test-utils等工具构建完整的测试体系。

测试环境配置：

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js'
  ],
  setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
}

// tests/setup.js  
import { config } from '@vue/test-utils'

// Mock uni-app API
global.uni = {
  showToast: jest.fn(),
  navigateTo: jest.fn(),
  getSystemInfo: jest.fn((options) => {
    options.success({
      platform: 'h5',
      windowWidth: 375
    })
  })
}

// Mock全局组件
config.global.stubs = {
  'uni-icons': true,
  'uni-popup': true
}

单元测试示例：

// tests/unit/components/UserCard.spec.js
import { shallowMount } from '@vue/test-utils'
import UserCard from '@/components/UserCard.vue'

describe('UserCard.vue', () => {
  let wrapper
  
  beforeEach(() => {
    wrapper = shallowMount(UserCard, {
      props: {
        user: {
          id: 1,
          name: 'John Doe',
          avatar: '/static/avatar.png'
        }
      }
    })
  })
  
  afterEach(() => {
    wrapper.unmount()
  })

  it('renders user information correctly', () => {
    expect(wrapper.find('.user-name').text()).toBe('John Doe')
    expect(wrapper.find('.avatar').attributes('src')).toBe('/static/avatar.png')
  })

  it('emits follow event when follow button clicked', async () => {
    const followBtn = wrapper.find('.follow-btn')
    await followBtn.trigger('click')
    
    expect(wrapper.emitted('follow')).toBeTruthy()
    expect(wrapper.emitted('follow')[0]).toEqual([1])
  })

  it('shows loading state during follow action', async () => {
    wrapper.setData({ isFollowing: true })
    await wrapper.vm.$nextTick()
    
    expect(wrapper.find('.follow-btn').classes()).toContain('loading')
  })
})

Vuex测试：

// tests/unit/store/user.spec.js
import { createStore } from 'vuex'
import userModule from '@/store/modules/user'
import * as userApi from '@/api/user'

jest.mock('@/api/user')

describe('User Store', () => {
  let store
  
  beforeEach(() => {
    store = createStore({
      modules: {
        user: userModule
      }
    })
  })

  it('should login successfully', async () => {
    const loginData = { username: 'test', password: '123456' }
    const mockResponse = { token: 'abc123', userInfo: { id: 1, name: 'Test' } }
    
    userApi.login.mockResolvedValue(mockResponse)
    
    await store.dispatch('user/login', loginData)
    
    expect(store.state.user.token).toBe('abc123')
    expect(store.state.user.userInfo.name).toBe('Test')
  })
})

集成测试：

// tests/integration/pages/login.spec.js
import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import Login from '@/pages/user/login/login.vue'

describe('Login Page Integration', () => {
  let wrapper, store
  
  beforeEach(() => {
    store = createStore({
      modules: {
        user: userModule
      }
    })
    
    wrapper = mount(Login, {
      global: {
        plugins: [store]
      }
    })
  })

  it('should complete login flow', async () => {
    // 输入用户名密码
    await wrapper.find('#username').setValue('testuser')
    await wrapper.find('#password').setValue('123456')
    
    // 点击登录按钮
    await wrapper.find('.login-btn').trigger('click')
    
    // 等待异步操作完成
    await wrapper.vm.$nextTick()
    
    // 验证登录状态
    expect(store.state.user.isLoggedIn).toBe(true)
    expect(uni.navigateTo).toHaveBeenCalledWith({
      url: '/pages/index/index'
    })
  })
})

How to solve performance bottlenecks in uni-app for complex business scenarios?

考察点：性能瓶颈分析。

答案：

复杂业务场景下的性能优化需要从渲染、数据、网络等多个层面进行系统性优化。

渲染性能优化：

// 1. 虚拟列表优化长列表
export default {
  data() {
    return {
      list: [], // 完整数据
      visibleList: [], // 可视区域数据
      itemHeight: 100,
      containerHeight: 600,
      scrollTop: 0
    }
  },
  computed: {
    visibleCount() {
      return Math.ceil(this.containerHeight / this.itemHeight) + 2
    },
    startIndex() {
      return Math.floor(this.scrollTop / this.itemHeight)
    },
    endIndex() {
      return Math.min(this.startIndex + this.visibleCount, this.list.length)
    }
  },
  watch: {
    scrollTop() {
      this.updateVisibleList()
    }
  },
  methods: {
    updateVisibleList() {
      this.visibleList = this.list.slice(this.startIndex, this.endIndex)
    },
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop
    }
  }
}

数据处理优化：

// 2. 数据分片处理大量数据
class DataProcessor {
  constructor(chunkSize = 1000) {
    this.chunkSize = chunkSize
  }
  
  async processLargeDataset(data, processor) {
    const results = []
    
    for (let i = 0; i < data.length; i += this.chunkSize) {
      const chunk = data.slice(i, i + this.chunkSize)
      
      // 使用requestIdleCallback优化处理时机
      await this.waitForIdle()
      
      const chunkResult = await processor(chunk)
      results.push(...chunkResult)
      
      // 进度反馈
      this.$emit('progress', {
        processed: i + chunk.length,
        total: data.length
      })
    }
    
    return results
  }
  
  waitForIdle() {
    return new Promise(resolve => {
      if (typeof requestIdleCallback !== 'undefined') {
        requestIdleCallback(resolve)
      } else {
        setTimeout(resolve, 16) // 约60fps
      }
    })
  }
}

内存管理优化：

// 3. 智能缓存管理
class SmartCache {
  constructor(maxSize = 100) {
    this.cache = new Map()
    this.maxSize = maxSize
    this.accessCount = new Map()
  }
  
  set(key, value) {
    // LRU缓存策略
    if (this.cache.size >= this.maxSize) {
      this.evictLRU()
    }
    
    this.cache.set(key, value)
    this.accessCount.set(key, Date.now())
  }
  
  get(key) {
    if (this.cache.has(key)) {
      this.accessCount.set(key, Date.now())
      return this.cache.get(key)
    }
    return null
  }
  
  evictLRU() {
    let oldestKey = null
    let oldestTime = Date.now()
    
    for (const [key, time] of this.accessCount) {
      if (time < oldestTime) {
        oldestTime = time
        oldestKey = key
      }
    }
    
    if (oldestKey) {
      this.cache.delete(oldestKey)
      this.accessCount.delete(oldestKey)
    }
  }
}

网络请求优化：

// 4. 请求合并与缓存
class RequestOptimizer {
  constructor() {
    this.pendingRequests = new Map()
    this.requestQueue = []
    this.isProcessing = false
  }
  
  // 请求去重
  async request(url, options = {}) {
    const key = `${url}${JSON.stringify(options)}`
    
    if (this.pendingRequests.has(key)) {
      return this.pendingRequests.get(key)
    }
    
    const promise = this.executeRequest(url, options)
    this.pendingRequests.set(key, promise)
    
    try {
      const result = await promise
      return result
    } finally {
      this.pendingRequests.delete(key)
    }
  }
  
  // 请求批量处理
  batchRequest(requests) {
    this.requestQueue.push(...requests)
    
    if (!this.isProcessing) {
      this.processBatch()
    }
  }
  
  async processBatch() {
    this.isProcessing = true
    
    while (this.requestQueue.length > 0) {
      const batch = this.requestQueue.splice(0, 5) // 每批5个请求
      
      await Promise.all(
        batch.map(req => this.request(req.url, req.options))
      )
      
      // 避免阻塞主线程
      await new Promise(resolve => setTimeout(resolve, 10))
    }
    
    this.isProcessing = false
  }
}

How to implement micro-frontend architecture in uni-app?

考察点：微前端设计。

答案：

uni-app微前端可通过模块联邦、iframe、或自定义加载器实现应用拆分和独立部署。

基于分包的微前端：

// pages.json - 主应用配置
{
  "pages": [
    {"path": "pages/index/index"}
  ],
  "subPackages": [
    {
      "root": "modules/user",
      "name": "user-module", 
      "pages": [
        {"path": "pages/profile/profile"},
        {"path": "pages/settings/settings"}
      ],
      "independent": true
    },
    {
      "root": "modules/shop",
      "name": "shop-module",
      "pages": [
        {"path": "pages/list/list"},
        {"path": "pages/detail/detail"}
      ],
      "independent": true
    }
  ]
}

微应用通信机制：

// utils/microApp.js
class MicroAppManager {
  constructor() {
    this.apps = new Map()
    this.eventBus = new EventTarget()
    this.sharedState = {}
  }
  
  // 注册微应用
  registerApp(name, config) {
    this.apps.set(name, {
      ...config,
      status: 'registered'
    })
  }
  
  // 加载微应用
  async loadApp(name) {
    const app = this.apps.get(name)
    if (!app) throw new Error(`App ${name} not found`)
    
    if (app.status === 'loaded') return app
    
    // 动态导入微应用
    const module = await import(app.entry)
    app.instance = module.default
    app.status = 'loaded'
    
    // 初始化微应用
    if (app.instance.mount) {
      await app.instance.mount(this.getAppContext(name))
    }
    
    return app
  }
  
  // 获取应用上下文
  getAppContext(appName) {
    return {
      appName,
      sharedState: this.sharedState,
      eventBus: this.eventBus,
      navigate: this.navigate.bind(this),
      emit: this.emit.bind(this),
      on: this.on.bind(this)
    }
  }
  
  // 跨应用导航
  navigate(path, params = {}) {
    const targetApp = this.getAppByRoute(path)
    
    if (targetApp) {
      return uni.navigateTo({
        url: `/${targetApp.root}/${path}${this.buildQuery(params)}`
      })
    }
    
    return uni.navigateTo({ url: path })
  }
  
  // 事件通信
  emit(event, data) {
    this.eventBus.dispatchEvent(new CustomEvent(event, { detail: data }))
  }
  
  on(event, handler) {
    this.eventBus.addEventListener(event, handler)
  }
  
  // 共享状态管理
  setSharedState(key, value) {
    this.sharedState[key] = value
    this.emit('stateChange', { key, value })
  }
  
  getSharedState(key) {
    return this.sharedState[key]
  }
}

export default new MicroAppManager()

微应用定义：

// modules/user/app.js - 用户模块微应用
export default {
  name: 'user-app',
  
  async mount(context) {
    this.context = context
    
    // 监听全局状态变化
    context.on('userLogin', this.handleUserLogin.bind(this))
    
    // 初始化模块状态
    await this.initUserModule()
  },
  
  async unmount() {
    // 清理资源
    this.cleanup()
  },
  
  // 模块间通信接口
  getUserInfo() {
    return this.context.getSharedState('userInfo')
  },
  
  updateUserInfo(info) {
    this.context.setSharedState('userInfo', info)
    this.context.emit('userUpdate', info)
  },
  
  handleUserLogin(event) {
    const userInfo = event.detail
    this.updateUserInfo(userInfo)
  }
}

How to design component libraries and toolchains for uni-app?

考察点：基础设施建设。

答案：

设计组件库需要考虑跨平台兼容性、API设计、构建工具链等多个方面。

组件库架构设计：

my-ui-lib/
├── src/
│   ├── components/        # 组件源码
│   │   ├── button/
│   │   ├── input/
│   │   └── index.js
│   ├── mixins/           # 混入
│   ├── utils/            # 工具函数
│   └── styles/           # 样式文件
├── lib/                  # 编译输出
├── docs/                 # 文档
├── examples/             # 示例
└── build/                # 构建配置

组件设计规范：

<!-- src/components/button/button.vue -->
<template>
  <button 
    :class="buttonClass"
    :style="buttonStyle"
    :disabled="disabled"
    @click="handleClick">
    
    <uni-icons 
      v-if="icon" 
      :type="icon" 
      :size="iconSize">
    </uni-icons>
    
    <text class="button-text">
      <slot></slot>
    </text>
    
    <view 
      v-if="loading" 
      class="loading-indicator">
    </view>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: val => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
    },
    size: {
      type: String, 
      default: 'medium',
      validator: val => ['small', 'medium', 'large'].includes(val)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    icon: String,
    round: Boolean,
    plain: Boolean
  },
  emits: ['click'],
  computed: {
    buttonClass() {
      return [
        'my-button',
        `my-button--${this.type}`,
        `my-button--${this.size}`,
        {
          'my-button--disabled': this.disabled,
          'my-button--loading': this.loading,
          'my-button--round': this.round,
          'my-button--plain': this.plain
        }
      ]
    },
    buttonStyle() {
      // 动态样式计算
      return {}
    },
    iconSize() {
      const sizeMap = {
        small: 14,
        medium: 16, 
        large: 18
      }
      return sizeMap[this.size]
    }
  },
  methods: {
    handleClick(event) {
      if (this.disabled || this.loading) return
      this.$emit('click', event)
    }
  }
}
</script>

构建工具链：

// build/webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '../lib'),
    filename: 'index.js',
    library: 'MyUI',
    libraryTarget: 'umd',
    globalObject: 'typeof self !== "undefined" ? self : this'
  },
  externals: {
    vue: {
      commonjs: 'vue',
      commonjs2: 'vue', 
      amd: 'vue',
      root: 'Vue'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

自动化发布流程：

// scripts/release.js
const inquirer = require('inquirer')
const semver = require('semver')
const { execSync } = require('child_process')

async function release() {
  // 1. 版本选择
  const { version } = await inquirer.prompt([
    {
      type: 'list',
      name: 'version',
      message: 'Select release type:',
      choices: [
        { name: `patch (${semver.inc(currentVersion, 'patch')})`, value: 'patch' },
        { name: `minor (${semver.inc(currentVersion, 'minor')})`, value: 'minor' },
        { name: `major (${semver.inc(currentVersion, 'major')})`, value: 'major' }
      ]
    }
  ])
  
  // 2. 更新版本号
  execSync(`npm version ${version}`, { stdio: 'inherit' })
  
  // 3. 构建组件库
  execSync('npm run build', { stdio: 'inherit' })
  
  // 4. 生成文档
  execSync('npm run docs:build', { stdio: 'inherit' })
  
  // 5. 发布到npm
  execSync('npm publish', { stdio: 'inherit' })
  
  // 6. 推送到git
  execSync('git push origin main --tags', { stdio: 'inherit' })
  
  console.log('✅ Release completed!')
}

release().catch(console.error)

How to implement monitoring and error tracking for uni-app projects?

考察点：监控体系设计。

答案：

完整的监控体系需要覆盖错误收集、性能监控、用户行为分析等多个维度。

错误监控实现：

// utils/errorTracker.js
class ErrorTracker {
  constructor(config = {}) {
    this.config = {
      apiUrl: config.apiUrl || '',
      appKey: config.appKey || '',
      userId: config.userId || '',
      maxErrors: config.maxErrors || 10,
      ...config
    }
    
    this.errorQueue = []
    this.init()
  }
  
  init() {
    // 全局错误捕获
    this.setupGlobalErrorHandler()
    
    // Promise错误捕获
    this.setupPromiseErrorHandler()
    
    // Vue错误捕获
    this.setupVueErrorHandler()
  }
  
  setupGlobalErrorHandler() {
    // #ifdef H5
    window.addEventListener('error', (event) => {
      this.captureError({
        type: 'javascript',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error?.stack
      })
    })
    // #endif
    
    // #ifdef APP-PLUS
    plus.runtime.addEventListener('error', (event) => {
      this.captureError({
        type: 'runtime',
        message: event.message,
        stack: event.stack
      })
    })
    // #endif
  }
  
  setupPromiseErrorHandler() {
    // #ifdef H5
    window.addEventListener('unhandledrejection', (event) => {
      this.captureError({
        type: 'promise',
        message: event.reason?.message || 'Unhandled Promise Rejection',
        stack: event.reason?.stack
      })
    })
    // #endif
  }
  
  setupVueErrorHandler() {
    const originalErrorHandler = Vue.config.errorHandler
    
    Vue.config.errorHandler = (error, vm, info) => {
      this.captureError({
        type: 'vue',
        message: error.message,
        stack: error.stack,
        componentName: vm?.$options?.name,
        propsData: vm?.$options?.propsData,
        info
      })
      
      if (originalErrorHandler) {
        originalErrorHandler(error, vm, info)
      }
    }
  }
  
  captureError(errorInfo) {
    const error = {
      ...errorInfo,
      timestamp: Date.now(),
      url: this.getCurrentPage(),
      userAgent: this.getUserAgent(),
      userId: this.config.userId,
      appVersion: this.getAppVersion(),
      platform: this.getPlatform()
    }
    
    this.errorQueue.push(error)
    
    // 达到批量发送阈值或严重错误立即发送
    if (this.errorQueue.length >= this.config.maxErrors || error.level === 'fatal') {
      this.flushErrors()
    }
  }
  
  async flushErrors() {
    if (this.errorQueue.length === 0) return
    
    const errors = [...this.errorQueue]
    this.errorQueue = []
    
    try {
      await uni.request({
        url: this.config.apiUrl + '/errors',
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'App-Key': this.config.appKey
        },
        data: { errors }
      })
    } catch (e) {
      // 发送失败，重新加入队列
      this.errorQueue.unshift(...errors)
    }
  }
  
  getCurrentPage() {
    const pages = getCurrentPages()
    return pages[pages.length - 1]?.route || ''
  }
  
  getUserAgent() {
    // #ifdef H5
    return navigator.userAgent
    // #endif
    // #ifdef APP-PLUS
    return plus.runtime.version
    // #endif
    return 'unknown'
  }
  
  getPlatform() {
    return uni.getSystemInfoSync().platform
  }
  
  getAppVersion() {
    return getApp().globalData?.version || '1.0.0'
  }
}

性能监控：

// utils/performanceMonitor.js
class PerformanceMonitor {
  constructor() {
    this.metrics = {}
    this.init()
  }
  
  init() {
    // 页面加载性能
    this.monitorPageLoad()
    
    // 网络请求性能
    this.monitorNetworkRequests()
    
    // 内存使用监控
    this.monitorMemoryUsage()
  }
  
  monitorPageLoad() {
    const pages = []
    
    // 重写页面生命周期
    const originalOnLoad = Page.prototype.onLoad
    const originalOnShow = Page.prototype.onShow
    
    Page.prototype.onLoad = function(options) {
      this.loadStartTime = Date.now()
      return originalOnLoad.call(this, options)
    }
    
    Page.prototype.onShow = function() {
      if (this.loadStartTime) {
        const loadTime = Date.now() - this.loadStartTime
        this.reportPageMetrics({
          page: this.route,
          loadTime,
          timestamp: Date.now()
        })
      }
      return originalOnShow.call(this)
    }
    
    Page.prototype.reportPageMetrics = function(metrics) {
      // 上报页面性能数据
      uni.request({
        url: '/api/performance/page',
        method: 'POST',
        data: metrics
      })
    }
  }
  
  monitorNetworkRequests() {
    const originalRequest = uni.request
    
    uni.request = function(options) {
      const startTime = Date.now()
      
      const originalSuccess = options.success
      const originalFail = options.fail
      
      options.success = function(res) {
        const duration = Date.now() - startTime
        
        // 记录成功请求
        PerformanceMonitor.instance.recordRequest({
          url: options.url,
          method: options.method || 'GET',
          duration,
          status: res.statusCode,
          success: true
        })
        
        if (originalSuccess) {
          originalSuccess(res)
        }
      }
      
      options.fail = function(err) {
        const duration = Date.now() - startTime
        
        // 记录失败请求
        PerformanceMonitor.instance.recordRequest({
          url: options.url,
          method: options.method || 'GET', 
          duration,
          success: false,
          error: err.errMsg
        })
        
        if (originalFail) {
          originalFail(err)
        }
      }
      
      return originalRequest(options)
    }
  }
  
  recordRequest(requestInfo) {
    // 批量上报网络请求性能数据
    if (!this.requestMetrics) {
      this.requestMetrics = []
    }
    
    this.requestMetrics.push({
      ...requestInfo,
      timestamp: Date.now()
    })
    
    // 定期上报
    if (this.requestMetrics.length >= 20) {
      this.flushRequestMetrics()
    }
  }
  
  async flushRequestMetrics() {
    if (!this.requestMetrics?.length) return
    
    const metrics = [...this.requestMetrics]
    this.requestMetrics = []
    
    try {
      await uni.request({
        url: '/api/performance/network',
        method: 'POST',
        data: { metrics }
      })
    } catch (e) {
      console.error('Failed to report network metrics:', e)
    }
  }
}

PerformanceMonitor.instance = new PerformanceMonitor()

用户行为分析：

// utils/analytics.js
class Analytics {
  constructor(config) {
    this.config = config
    this.sessionId = this.generateSessionId()
    this.eventQueue = []
  }
  
  // 页面访问追踪
  trackPageView(pageName, params = {}) {
    this.track('page_view', {
      page: pageName,
      ...params
    })
  }
  
  // 事件追踪
  track(eventName, properties = {}) {
    const event = {
      event: eventName,
      properties: {
        ...properties,
        timestamp: Date.now(),
        sessionId: this.sessionId,
        userId: this.getCurrentUserId(),
        platform: uni.getSystemInfoSync().platform
      }
    }
    
    this.eventQueue.push(event)
    
    // 定时批量发送
    if (this.eventQueue.length >= 10) {
      this.flush()
    }
  }
  
  async flush() {
    if (this.eventQueue.length === 0) return
    
    const events = [...this.eventQueue]
    this.eventQueue = []
    
    try {
      await uni.request({
        url: this.config.analyticsUrl,
        method: 'POST',
        data: { events }
      })
    } catch (e) {
      // 发送失败，重新入队
      this.eventQueue.unshift(...events)
    }
  }
}

通过完整的监控体系，可以实时了解应用的运行状况、用户行为和性能表现，为产品优化提供数据支持。