微信小程序和uni-app面试问题总结

微信小程序和uni-app面试问题总结

微信小程序基础

1. 微信小程序的生命周期有哪些？

答案：
微信小程序的生命周期分为应用生命周期和页面生命周期：

应用生命周期：

• onLaunch：小程序初始化完成时触发，全局只触发一次
• onShow：小程序启动或从后台进入前台显示时触发
• onHide：小程序从前台进入后台时触发
• onError：小程序发生脚本错误或API调用失败时触发

页面生命周期：

• onLoad：页面加载时触发，一个页面只会调用一次
• onShow：页面显示/切入前台时触发
• onReady：页面初次渲染完成时触发，一个页面只会调用一次
• onHide：页面隐藏/切入后台时触发
• onUnload：页面卸载时触发

2. 微信小程序的页面路由有几种方式？有什么区别？

答案：
微信小程序页面路由主要有以下几种方式：

1. wx.navigateTo：

   • 保留当前页面，跳转到应用内的某个页面
   • 使用wx.navigateBack可以返回到原页面
   • 页面栈最多10层

2. wx.redirectTo：

   • 关闭当前页面，跳转到应用内的某个页面
   • 页面栈不会增加

3. wx.reLaunch：

   • 关闭所有页面，打开到应用内的某个页面
   • 清空页面栈

4. wx.switchTab：

   • 跳转到tabBar页面，并关闭其他所有非tabBar页面
   • 页面栈只保留目标页面

5. wx.navigateBack：

   • 关闭当前页面，返回上一页面或多级页面

3. 微信小程序如何实现数据绑定和事件绑定？

答案：

数据绑定：
使用Mustache语法（双大括号）将变量从逻辑层（Page的data）绑定到视图层：

<view>{{message}}</view>

在JS中：

Page({data: {message: 'Hello World!'}
})

事件绑定：
使用bind或catch前缀绑定事件处理函数：

<button bindtap="handleTap">点击我</button>

在JS中：

Page({handleTap: function() {console.log('按钮被点击');}
})

bind和catch的区别：

• bind：事件绑定不会阻止冒泡
• catch：事件绑定会阻止冒泡

uni-app基础

4. uni-app的特点和优势是什么？

答案：
uni-app的主要特点和优势包括：

1. 跨平台：一套代码可编译到iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台
2. 开发效率高：基于Vue.js语法，学习成本低，开发效率高
3. 性能接近原生：通过weex原生渲染引擎，提供接近原生的性能体验
4. 丰富的组件和API：内置大量跨平台组件和API
5. 插件生态：支持丰富的插件市场，可扩展性强
6. 社区支持：活跃的开发者社区和官方支持
7. 与微信小程序兼容：大部分微信小程序的API和组件在uni-app中可以直接使用

5. uni-app的生命周期有哪些？

答案：
uni-app的生命周期分为应用生命周期、页面生命周期和组件生命周期：

应用生命周期（在App.vue中定义）：

• onLaunch：初始化完成时触发
• onShow：启动或从后台进入前台显示
• onHide：从前台进入后台
• onError：报错时触发

页面生命周期：

• onLoad：页面加载
• onShow：页面显示
• onReady：页面初次渲染完成
• onHide：页面隐藏
• onUnload：页面卸载
• onPullDownRefresh：下拉刷新
• onReachBottom：页面上拉触底
• onShareAppMessage：用户点击右上角分享

组件生命周期（与Vue组件生命周期相同）：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

6. uni-app如何实现条件编译？

答案：
uni-app通过特殊的注释语法实现条件编译，以满足不同平台的特殊需求：

1. 文件级条件编译：
   文件命名添加平台后缀，如：

   • index.vue：通用文件
   • index.nvue：仅App端使用
   • index.mp.vue：仅小程序端使用

2. 代码块条件编译：
   使用// #ifdef和// #endif注释：

   // #ifdef H5
   console.log('这段代码只会在H5平台编译');
   // #endif// #ifdef MP-WEIXIN
   console.log('这段代码只会在微信小程序平台编译');
   // #endif
   

3. 样式条件编译：

   /* #ifdef H5 */
   .h5-style {color: red;
   }
   /* #endif */
   

4. 模板条件编译：

   <!-- #ifdef APP-PLUS -->
   <view>这段内容只会在App端显示</view>
   <!-- #endif -->
   

微信小程序进阶

7. 微信小程序如何实现自定义组件？

答案：
微信小程序自定义组件实现步骤：

1. 创建组件：
   在项目目录中创建components文件夹，然后创建组件目录（如my-component），其中包含：

   • my-component.json：声明这是一个组件

   {"component": true
   }
   

   • my-component.wxml：组件模板
   • my-component.wxss：组件样式（可选）
   • my-component.js：组件逻辑

2. 使用组件：
   在页面的json文件中注册组件：

   {"usingComponents": {"my-component": "/components/my-component/my-component"}
   }
   

   然后在wxml中使用：

   <my-component></my-component>
   

3. 组件通信：

   • 父传子：通过properties
   • 子传父：通过triggerEvent触发自定义事件
   • 获取组件实例：通过this.selectComponent获取子组件实例

8. 微信小程序如何实现数据缓存？

答案：
微信小程序提供了两种数据缓存方式：

1. 同步缓存：

   try {wx.setStorageSync('key', 'value') // 同步存储const value = wx.getStorageSync('key') // 同步获取wx.removeStorageSync('key') // 同步移除wx.clearStorageSync() // 同步清空
   } catch (e) {console.error(e)
   }
   

2. 异步缓存：

   wx.setStorage({key: 'key',data: 'value',success: function() {console.log('存储成功')}
   })wx.getStorage({key: 'key',success: function(res) {console.log(res.data)}
   })wx.removeStorage({key: 'key',success: function() {console.log('删除成功')}
   })wx.clearStorage() // 清空所有缓存
   

缓存限制：

• 单个key最大1MB
• 所有数据存储上限为10MB
• 用户主动删除或长时间未使用可能被系统清理

uni-app进阶

9. uni-app如何实现跨平台适配？

答案：
uni-app实现跨平台适配的主要方式：

1. 条件编译：根据不同平台编写不同的代码（如前所述）
2. Flex布局：使用Flex布局适配不同屏幕尺寸
3. rpx单位：使用响应式像素单位，1rpx=屏幕宽度/750
4. uni-ui组件库：官方提供的跨平台UI组件库
5. API兼容处理：

   // 判断平台
   #ifdef H5// H5平台代码
   #endif#ifdef APP-PLUS// App平台代码
   #endif
   

6. manifest.json配置：针对不同平台进行配置
7. 页面样式适配：使用媒体查询或动态class适配不同平台

10. uni-app如何调用原生功能？

答案：
uni-app调用原生功能的方式：

1. 使用uni API：
   uni-app提供了大量跨平台API，如：

   // 调用相机
   uni.chooseImage({success: (res) => {console.log(res.tempFilePaths)}
   })// 获取地理位置
   uni.getLocation({type: 'wgs84',success: (res) => {console.log(res.latitude, res.longitude)}
   })
   

2. Native.js（仅App端）：
   直接调用原生API：

   // 获取Android设备信息
   const device = plus.android.importClass('android.os.Build')
   console.log(device.MODEL)
   

3. 原生插件开发：

   • 对于复杂原生功能，可以开发原生插件
   • 使用Android Studio或Xcode开发原生模块
   • 通过uni-app的插件机制集成

4. 使用5+ API（plus对象）：

   // 获取当前应用信息
   const app = plus.runtime.getProperty('appid')
   

性能优化

11. 微信小程序性能优化有哪些方法？

答案：
微信小程序性能优化方法：

1. 减少setData调用：

   • 避免频繁调用setData
   • 合并多次setData调用
   • 仅setData变化的数据

2. 控制WXML节点数量：

   • 单个页面节点数建议少于1000个
   • 复杂列表使用wx:for的wx:key提高复用性
   • 长列表使用recycle-view组件

3. 图片优化：

   • 使用合适的图片格式（推荐WebP）
   • 按需加载图片
   • 使用CDN和图片压缩

4. 合理使用自定义组件：

   • 将复杂页面拆分为组件
   • 使用纯数据字段优化组件性能

5. 预加载数据：

   • 在onLoad中预加载下一页数据
   • 使用wx.preloadPage预加载页面

6. 分包加载：

   • 将不常用的功能放到分包中
   • 主包大小控制在2MB以内

7. 使用Worker处理复杂计算：

   • 将耗时操作放到Worker线程

12. uni-app性能优化有哪些方法？

答案：
uni-app性能优化方法：

1. 通用优化：

   • 减少不必要的数据响应（Object.freeze冻结不需要响应式的数据）
   • 合理使用v-if和v-show
   • 列表渲染使用:key

2. App平台优化：

   • 使用nvue代替vue（对性能要求高的页面）
   • 使用weex原生渲染
   • 使用subNVue原生子窗体

3. 小程序平台优化：

   • 使用小程序的分包加载
   • 优化setData调用

4. H5平台优化：

   • 使用路由懒加载
   • 使用CDN加速静态资源
   • 开启gzip压缩

5. 图片优化：

   • 使用合适的图片格式
   • 实现懒加载
   • 使用雪碧图减少请求

6. 代码优化：

   • 合理使用条件编译减少冗余代码
   • 按需引入组件和API
   • 使用tree-shaking删除无用代码

实战问题

13. 如何实现微信小程序的登录授权流程？

答案：
微信小程序登录授权标准流程：

1. 前端检查登录状态：

   wx.checkSession({success: function() {// session_key未过期，直接使用本地存储的用户信息},fail: function() {// session_key已过期，需要重新登录doLogin();}
   })
   

2. 调用wx.login获取code：

   function doLogin() {wx.login({success: res => {if (res.code) {// 发送code到后端换取openid和session_keywx.request({url: 'https://your.server.com/login',data: { code: res.code },success: (res) => {// 存储返回的token或session信息wx.setStorageSync('token', res.data.token)}})}}})
   }
   

3. 获取用户信息（需要用户授权）：

   wx.getUserProfile({desc: '用于完善会员资料',success: (res) => {const userInfo = res.userInfo// 将userInfo发送到后端保存}
   })
   

4. 后端处理：

   • 使用code调用微信接口jscode2session获取openid和session_key
   • 创建自定义登录态（token）返回给前端
   • 存储用户信息

5. 后续请求：

   • 前端在header中携带token
   • 后端验证token有效性

14. uni-app如何实现多端差异化发布？

答案：
uni-app实现多端差异化发布的方案：

1. 条件编译：
   如前所述，使用条件编译为不同平台编写不同代码

2. 多入口配置：
   在pages.json中配置不同平台的入口：

   {"condition": {"current": 0,"list": [{"name": "h5","path": "pages/h5/index","query": "from=h5"},{"name": "mp-weixin","path": "pages/wechat/index","query": "from=wechat"}]}
   }
   

3. 动态配置：
   使用process.env.UNI_PLATFORM判断当前平台：

   const platform = process.env.UNI_PLATFORM
   if (platform === 'h5') {// H5特有逻辑
   } else if (platform === 'mp-weixin') {// 微信小程序特有逻辑
   }
   

4. 差异化构建：
   在package.json中配置不同平台的构建命令：

   {"scripts": {"build:h5": "uni-build --platform h5","build:mp-weixin": "uni-build --platform mp-weixin"}
   }
   

5. manifest.json配置：
   为不同平台配置不同的manifest设置

6. 自定义环境变量：
   在.env文件中定义不同平台的变量：

   # .env.h5
   VUE_APP_PLATFORM=h5
   VUE_APP_API_BASE=https://h5.api.com# .env.mp-weixin
   VUE_APP_PLATFORM=mp-weixin
   VUE_APP_API_BASE=https://wechat.api.com
   

15. 如何解决uni-app或微信小程序中的常见兼容性问题？

答案：
常见兼容性问题及解决方案：

微信小程序兼容性问题：

1. API兼容性：

   • 使用wx.canIUse检查API是否可用
   • 提供降级方案

2. 基础库版本差异：

   • 在app.json中配置最低基础库版本

   {"settings": {"miniprogram": {"libVersion": "2.10.0"}}
   }
   

3. 样式兼容：

   • 避免使用部分CSS3新特性
   • 使用官方推荐的样式写法

uni-app兼容性问题：

1. 平台差异：

   • 使用条件编译处理平台差异
   • 封装平台兼容的公共方法

2. 组件表现不一致：

   • 使用uni-ui等跨平台组件库
   • 针对不同平台使用不同组件

3. API差异：

   • 优先使用uni API而非平台原生API
   • 封装兼容层处理API差异

4. 样式适配：

   • 使用flex布局
   • 使用rpx单位
   • 避免使用部分平台不支持的选择器

通用解决方案：

1. 特性检测：

   function isFeatureSupported() {try {// 测试特性是否可用return true} catch (e) {return false}
   }
   

2. 渐进增强：

   • 先保证基本功能在所有平台可用
   • 再为高级平台添加增强功能

3. 优雅降级：

   • 先实现完整功能
   • 再为低版本或低性能平台提供简化方案

4. 统一封装：

   // 封装兼容的存储API
   const storage = {set(key, value) {#ifdef MP-WEIXINwx.setStorageSync(key, value)#endif#ifdef H5localStorage.setItem(key, JSON.stringify(value))#endif},get(key) {// 类似实现...}
   }