🔄 跨端开发 - MINIPROGRAM

What are WeChat Mini Programs? How do they differ from traditional web applications?

考察点：小程序基本概念。

答案：

微信小程序是一种不需要下载安装即可使用的应用，基于微信平台运行。它介于原生App和Web应用之间，具有接近原生App的用户体验，同时拥有Web应用的便捷性。小程序采用双线程架构，逻辑层使用JavaScript运行，视图层使用WebView渲染。

主要区别：

1. 运行环境：

   • 小程序：运行在微信客户端内，受微信环境限制
   • 传统Web：运行在浏览器中，可跨平台访问

2. 开发语言：

   • 小程序：使用WXML、WXSS、JavaScript专用语法
   • 传统Web：使用HTML、CSS、JavaScript标准语法

3. API能力：

   • 小程序：可调用微信原生API（如支付、分享、定位等）
   • 传统Web：受浏览器安全策略限制，API能力有限

4. 性能表现：

   • 小程序：预加载、离线缓存，启动速度更快
   • 传统Web：依赖网络加载，首次访问较慢

适用场景：

• 轻量级应用和服务
• 需要微信生态集成的业务
• 快速迭代的营销活动
• 线下场景的扫码应用

What is the directory structure of WeChat Mini Programs? What are the roles of each file?

考察点：项目结构理解。

答案：

微信小程序采用标准化的目录结构，主要包含全局配置文件、页面文件和组件文件。典型的小程序项目结构如下：

基础目录结构：

├── app.js          # 小程序逻辑
├── app.json        # 小程序公共配置
├── app.wxss        # 小程序公共样式表
├── pages/          # 页面目录
│   ├── index/
│   │   ├── index.js    # 页面逻辑
│   │   ├── index.json  # 页面配置
│   │   ├── index.wxml  # 页面结构
│   │   └── index.wxss  # 页面样式表
├── utils/          # 工具函数目录
├── components/     # 自定义组件目录
└── static/         # 静态资源目录

核心文件作用：

1. app.js： 小程序入口文件，定义全局App实例，处理生命周期函数
2. app.json： 全局配置文件，配置页面路径、窗口表现、tabBar等
3. app.wxss： 全局样式文件，定义公共样式
4. 页面四件套（以index为例）：
   • index.js： 页面逻辑处理和数据管理
   • index.json： 页面配置，如导航栏标题、下拉刷新等
   • index.wxml： 页面结构，类似HTML但使用小程序语法
   • index.wxss： 页面样式，类似CSS但支持rpx单位

注意事项：

• 页面路径需在app.json中注册
• 首页为pages数组第一个页面
• 文件名必须与目录名保持一致

What are the page lifecycle functions in Mini Programs?

考察点：生命周期理解。

答案：

小程序页面具有完整的生命周期，从页面加载到销毁的各个阶段都有对应的钩子函数。这些生命周期函数帮助开发者在合适的时机处理业务逻辑。

页面生命周期函数：

1. onLoad(options)：

   • 页面加载时触发，只会调用一次
   • 可以获取页面跳转参数options
   • 适合进行页面初始化、获取页面参数等操作

2. onShow()：

   • 页面显示/切入前台时触发
   • 每次页面显示都会调用
   • 适合刷新数据、重置页面状态等操作

3. onReady()：

   • 页面初次渲染完成时触发，只会调用一次
   • 此时页面已经准备就绪，可以和视图层进行交互
   • 适合获取节点信息、设置页面标题等操作

4. onHide()：

   • 页面隐藏/切入后台时触发
   • 适合暂停视频播放、清除定时器等操作

5. onUnload()：

   • 页面卸载时触发
   • 适合清理资源、保存数据等操作

其他生命周期函数：

• onPullDownRefresh()： 用户下拉刷新时触发
• onReachBottom()： 页面上拉触底时触发
• onPageScroll(object)： 页面滚动时触发
• onShareAppMessage(object)： 用户点击右上角分享时触发

执行顺序：
onLoad → onShow → onReady → onHide → onUnload

How to navigate between pages in Mini Programs? What’s the difference between wx.navigateTo and wx.redirectTo?

考察点：页面导航机制。

答案：

小程序提供了多种页面跳转方式，每种方式适用于不同的场景。页面跳转是小程序导航的核心功能，需要根据业务需求选择合适的跳转方法。

页面跳转方法：

1. wx.navigateTo()：

   wx.navigateTo({
     url: '/pages/detail/detail?id=123'
   })
   

   • 保留当前页面，跳转到应用内的某个页面
   • 可以通过wx.navigateBack()返回原页面
   • 页面栈层数限制为10层

2. wx.redirectTo()：

   wx.redirectTo({
     url: '/pages/detail/detail?id=123'
   })
   

   • 关闭当前页面，跳转到应用内的某个页面
   • 无法返回被关闭的页面
   • 不会增加页面栈层数

3. wx.switchTab()：

   wx.switchTab({
     url: '/pages/index/index'
   })
   

   • 跳转到tabBar页面，并关闭其他所有非tabBar页面
   • 不能带参数跳转

4. wx.reLaunch()：

   wx.reLaunch({
     url: '/pages/index/index'
   })
   

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

5. wx.navigateBack()：

   wx.navigateBack({
     delta: 1  // 返回的页面数
   })
   

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

主要区别总结：

• 页面栈影响： navigateTo增加栈层，redirectTo不增加
• 返回能力： navigateTo可返回，redirectTo不可返回
• 性能考虑： redirectTo节省内存，navigateTo保持状态
• 适用场景： navigateTo用于详情页，redirectTo用于流程跳转

How to perform data binding in Mini Programs? What data types are supported?

考察点：数据绑定语法。

答案：

小程序使用WXML语法进行数据绑定，通过双大括号语法将逻辑层的数据绑定到视图层。数据绑定是连接页面逻辑和视图的桥梁，支持多种数据类型和绑定方式。

基本数据绑定语法：

// page.js
Page({
  data: {
    message: 'Hello World',
    userInfo: {
      name: '张三',
      age: 25
    },
    items: ['苹果', '香蕉', '橙子'],
    isVisible: true,
    count: 100
  }
})

<!-- page.wxml -->
<!-- 文本绑定 -->
<text>{{message}}</text>

<!-- 属性绑定 -->
<view id="item-{{count}}">内容</view>

<!-- 对象属性绑定 -->
<text>{{userInfo.name}} - {{userInfo.age}}岁</text>

<!-- 条件绑定 -->
<view wx:if="{{isVisible}}">显示内容</view>

<!-- 列表绑定 -->
<view wx:for="{{items}}" wx:key="index">
  {{index}}: {{item}}
</view>

支持的数据类型：

1. 基础数据类型：

   • String（字符串）： "Hello"
   • Number（数字）： 123, 3.14
   • Boolean（布尔值）： true, false
   • null/undefined： 空值

2. 复合数据类型：

   • Object（对象）： {name: '张三', age: 25}
   • Array（数组）： [1, 2, 3], ['a', 'b', 'c']

3. 特殊绑定：

   • 函数调用： {{item.toFixed(2)}}
   • 运算表达式： {{a + b}}, {{item > 5 ? '大' : '小'}}
   • 逻辑运算： {{a && b}}, {{!isVisible}}

数据更新方法：

// 使用setData更新数据
this.setData({
  message: 'New Message',
  'userInfo.name': '李四',  // 更新对象属性
  'items[0]': '西瓜'       // 更新数组元素
})

注意事项：

• 数据绑定是单向的，从逻辑层到视图层
• 使用setData()方法更新数据并触发视图更新
• 避免直接修改data中的数据，必须通过setData

What is the rpx unit? How to implement responsive design in Mini Programs?

考察点：响应式布局。

答案：

rpx（responsive pixel）是小程序特有的响应式像素单位，用于实现跨设备的自适应布局。rpx可以根据屏幕宽度进行自适应调整，解决了不同尺寸设备的适配问题。

rpx单位原理：

• 小程序规定屏幕宽度为750rpx
• 在不同设备上，1rpx等于屏幕宽度/750px
• 例如：iPhone6屏幕宽度375px，1rpx = 375px / 750 = 0.5px

rpx计算公式：

设备像素比 = 设备实际宽度 / 750rpx
实际像素 = rpx值 * (设备实际宽度 / 750)

响应式设计实现方法：

1. 使用rpx单位：

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

2. Flex布局配合rpx：

   .flex-container {
     display: flex;
     justify-content: space-between;
     padding: 0 30rpx;
   }
   
   .flex-item {
     flex: 1;
     margin: 0 10rpx;
     height: 200rpx;
   }
   

3. 媒体查询（高级用法）：

   /* 针对不同屏幕尺寸 */
   @media (max-width: 600px) {
     .container {
       padding: 20rpx;
     }
   }
   

单位选择建议：

• rpx： 用于需要适配的尺寸（宽高、边距、字体等）
• px： 用于固定尺寸（边框粗细、小图标等）
• %： 用于百分比布局
• vw/vh： 用于视窗相对尺寸

最佳实践：

• 设计稿按750px宽度设计，直接将px替换为rpx
• 文字大小建议使用rpx保证不同设备显示一致
• 边框等细节可以使用px保持精确
• 结合Flex布局实现更灵活的响应式效果

How to use conditional rendering and list rendering in Mini Programs?

考察点：模板语法应用。

答案：

小程序提供了wx:if、wx:for等指令来实现条件渲染和列表渲染，这些功能是构建动态页面的核心工具。通过这些指令可以根据数据动态控制页面内容的显示和重复。

条件渲染：

1. wx:if条件判断：

   <!-- 基础条件渲染 -->
   <view wx:if="{{isLogin}}">
     <text>欢迎回来！</text>
   </view>
   
   <!-- 多重条件判断 -->
   <view wx:if="{{userType === 'vip'}}">VIP用户</view>
   <view wx:elif="{{userType === 'normal'}}">普通用户</view>
   <view wx:else>游客</view>
   

2. hidden属性（性能更优）：

   <!-- 使用hidden属性控制显示隐藏 -->
   <view hidden="{{!isVisible}}">
     <text>这是可切换显示的内容</text>
   </view>
   

列表渲染：

1. 基础列表渲染：

   // page.js
   Page({
     data: {
       items: ['苹果', '香蕉', '橙子'],
       userList: [
         {id: 1, name: '张三', age: 25},
         {id: 2, name: '李四', age: 30},
         {id: 3, name: '王五', age: 28}
       ]
     }
   })
   

   <!-- 简单数组渲染 -->
   <view wx:for="{{items}}" wx:key="index">
     {{index}}: {{item}}
   </view>
   
   <!-- 对象数组渲染 -->
   <view wx:for="{{userList}}" wx:key="id">
     <text>{{item.name}} - {{item.age}}岁</text>
   </view>
   

2. 自定义变量名：

   <!-- 使用wx:for-item和wx:for-index自定义变量名 -->
   <view wx:for="{{userList}}" wx:for-item="user" wx:for-index="idx" wx:key="id">
     <text>第{{idx + 1}}位：{{user.name}}</text>
   </view>
   

3. 嵌套循环：

   <!-- 二维数组或嵌套对象的渲染 -->
   <view wx:for="{{groups}}" wx:for-item="group" wx:key="groupId">
     <text class="group-title">{{group.title}}</text>
     <view wx:for="{{group.members}}" wx:for-item="member" wx:key="memberId">
       <text>{{member.name}}</text>
     </view>
   </view>
   

wx:key的重要性：

<!-- 正确使用wx:key提升性能 -->
<view wx:for="{{items}}" wx:key="unique">
  {{item.message}}
</view>

<!-- wx:key可以使用的值 -->
<!-- 1. 字符串：代表item的某个属性，如wx:key="id" -->
<!-- 2. 保留关键字*this：代表item本身，适用于简单数组 -->

条件与列表结合：

<!-- 在列表中使用条件渲染 -->
<view wx:for="{{userList}}" wx:key="id">
  <view wx:if="{{item.status === 'active'}}">
    <text>{{item.name}}（在线）</text>
  </view>
  <view wx:else>
    <text class="offline">{{item.name}}（离线）</text>
  </view>
</view>

性能优化建议：

• 优先使用hidden而非wx:if进行频繁切换
• 合理使用wx:key避免不必要的重渲染
• 避免在wx:for中使用复杂的计算表达式

How to handle events in Mini Programs? What information does the event object contain?

考察点：事件处理机制。

答案：

小程序事件处理采用与Web类似的事件机制，通过在WXML中绑定事件处理函数，在页面逻辑中定义具体的处理逻辑。事件是用户交互和系统响应的核心机制。

事件绑定语法：

<!-- 基础事件绑定 -->
<button bindtap="handleTap">点击按钮</button>
<input bindinput="handleInput" placeholder="请输入内容" />

<!-- 使用catch阻止事件冒泡 -->
<view catchtap="handleViewTap">
  <button bindtap="handleButtonTap">按钮</button>
</view>

<!-- 使用capture捕获事件 -->
<view capture-bind:tap="handleCapture">
  <button bindtap="handleTap">按钮</button>
</view>

// 页面事件处理函数
Page({
  handleTap(event) {
    console.log('按钮被点击', event)
    
    // 获取事件相关信息
    const { target, currentTarget, detail } = event
    
    // 处理业务逻辑
    this.setData({
      message: '按钮被点击了'
    })
  },
  
  handleInput(event) {
    const value = event.detail.value
    this.setData({
      inputValue: value
    })
  }
})

事件对象(event)包含的信息：

1. 基础属性：

   • type： 事件类型，如’tap’、'input’等
   • timeStamp： 事件生成时的时间戳

2. target（触发事件的组件）：

   event.target = {
     id: "myButton",           // 组件id
     dataset: {               // data-*属性集合
       userId: "123",
       type: "primary"
     },
     offsetLeft: 0,           // 相对父元素的左偏移
     offsetTop: 0             // 相对父元素的上偏移
   }
   

3. currentTarget（绑定事件的组件）：

   event.currentTarget = {
     id: "myView",
     dataset: {
       index: "0"
     },
     offsetLeft: 0,
     offsetTop: 0
   }
   

4. detail（额外的信息）：

   • 表单组件： {value: "输入的内容"}
   • 滑动组件： {x: 100, y: 50} 滑动距离
   • 自定义组件： 自定义的事件数据

5. touches（触摸事件专有）：

   event.touches = [{
     identifier: 0,          // 触摸点标识符
     pageX: 100,            // 相对于页面的X坐标
     pageY: 200,            // 相对于页面的Y坐标
     clientX: 100,          // 相对于可视区的X坐标
     clientY: 200           // 相对于可视区的Y坐标
   }]
   

常用事件类型：

• tap： 点击事件
• longpress： 长按事件（350ms）
• touchstart/touchmove/touchend： 触摸事件
• input： 输入事件
• change： 值改变事件
• scroll： 滚动事件

事件传参技巧：

<!-- 使用data-*属性传递参数 -->
<view wx:for="{{items}}" wx:key="id">
  <button bindtap="handleDelete" data-id="{{item.id}}" data-index="{{index}}">
    删除
  </button>
</view>

handleDelete(event) {
  const { id, index } = event.currentTarget.dataset
  console.log('要删除的ID:', id, '索引:', index)
}

How to implement local storage in Mini Programs?

考察点：数据持久化。

答案：

小程序提供了完善的本地存储API，支持数据的持久化保存。本地存储是小程序数据管理的重要组成部分，用于保存用户设置、缓存数据等信息。

同步存储API：

1. wx.setStorageSync()： 同步设置存储

   // 存储字符串
   wx.setStorageSync('username', '张三')
   
   // 存储对象
   wx.setStorageSync('userInfo', {
     id: 123,
     name: '张三',
     age: 25
   })
   
   // 存储数组
   wx.setStorageSync('favoriteList', ['苹果', '香蕉', '橙子'])
   

2. wx.getStorageSync()： 同步获取存储

   // 获取存储的数据
   const username = wx.getStorageSync('username')
   const userInfo = wx.getStorageSync('userInfo')
   
   // 处理不存在的情况
   const theme = wx.getStorageSync('theme') || 'default'
   

3. wx.removeStorageSync()： 同步删除存储

   // 删除指定key的数据
   wx.removeStorageSync('username')
   

4. wx.clearStorageSync()： 同步清空所有存储

   // 清空所有本地存储
   wx.clearStorageSync()
   

异步存储API：

// 异步设置存储
wx.setStorage({
  key: 'userToken',
  data: 'abc123',
  success: () => {
    console.log('存储成功')
  },
  fail: (err) => {
    console.log('存储失败', err)
  }
})

// 异步获取存储
wx.getStorage({
  key: 'userToken',
  success: (res) => {
    console.log('获取到数据：', res.data)
  },
  fail: () => {
    console.log('数据不存在')
  }
})

// 异步删除存储
wx.removeStorage({
  key: 'userToken',
  success: () => {
    console.log('删除成功')
  }
})

获取存储信息：

// 获取存储信息（同步）
const storageInfo = wx.getStorageInfoSync()
console.log('已使用空间：', storageInfo.currentSize)
console.log('总空间：', storageInfo.limitSize)
console.log('所有key：', storageInfo.keys)

// 获取存储信息（异步）
wx.getStorageInfo({
  success: (res) => {
    console.log('存储信息：', res)
  }
})

存储特性和限制：

1. 存储容量： 单个小程序最大10MB存储空间
2. 数据类型： 支持字符串、对象、数组等所有可序列化的数据
3. 持久化： 数据会持久保存，除非用户主动删除小程序
4. 作用域： 每个小程序的存储空间相互独立

最佳实践：

// 封装存储工具类
const Storage = {
  // 设置存储（带异常处理）
  set(key, data) {
    try {
      wx.setStorageSync(key, data)
      return true
    } catch (error) {
      console.error('存储失败：', error)
      return false
    }
  },
  
  // 获取存储（带默认值）
  get(key, defaultValue = null) {
    try {
      const data = wx.getStorageSync(key)
      return data !== '' ? data : defaultValue
    } catch (error) {
      console.error('获取存储失败：', error)
      return defaultValue
    }
  },
  
  // 删除存储
  remove(key) {
    try {
      wx.removeStorageSync(key)
      return true
    } catch (error) {
      console.error('删除存储失败：', error)
      return false
    }
  }
}

// 使用示例
Storage.set('userSettings', { theme: 'dark', language: 'zh' })
const settings = Storage.get('userSettings', { theme: 'light', language: 'zh' })

What is the role of the app.json configuration file? What are the common configuration items?

考察点：全局配置理解。

答案：

app.json是小程序的全局配置文件，用于配置小程序的全局设置，包括页面路径、窗口表现、tabBar、网络超时时间等。它是小程序的核心配置文件，决定了小程序的基本结构和行为。

app.json的主要作用：

1. 定义小程序的页面路径和页面结构
2. 配置小程序的全局样式和窗口表现
3. 设置底部tabBar导航
4. 配置网络请求的超时时间
5. 声明需要用到的权限和功能

完整配置示例：

{
  "pages": [
    "pages/index/index",
    "pages/profile/profile",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f8f8f8",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#007aff",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile-active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

常用配置项详解：

1. pages（必填）： 页面路径列表

   • 数组第一项代表小程序的初始页面（首页）
   • 新增页面需要在此处注册

2. window： 全局默认窗口表现

   • navigationBarTitleText： 导航栏标题文字内容
   • navigationBarBackgroundColor： 导航栏背景颜色（HexColor）
   • navigationBarTextStyle： 导航栏标题颜色（black/white）
   • backgroundColor： 窗口的背景色
   • enablePullDownRefresh： 是否开启当前页面下拉刷新
   • onReachBottomDistance： 页面上拉触底事件触发时距页面底部距离

3. tabBar： 底部tab栏设置

   • list： tab列表，最少2个、最多5个tab
   • color： tab上的文字默认颜色
   • selectedColor： tab上的文字选中时的颜色
   • backgroundColor： tab的背景色

4. networkTimeout： 网络超时时间

   • request： wx.request的超时时间，单位毫秒
   • downloadFile： wx.downloadFile的超时时间

5. permission： 权限描述

   • 用于声明小程序需要使用的权限
   • 当小程序使用敏感权限时向用户展示的说明

页面配置优先级：

• 页面的.json配置会覆盖app.json的window配置
• 页面配置只能设置window相关的配置项

注意事项：

• app.json文件不能添加任何注释
• 配置项值的类型必须严格按照文档要求
• pages数组中路径不需要写文件后缀，框架会自动寻找对应文件

How to get user basic information in Mini Programs? What’s the difference between wx.getUserProfile and wx.getUserInfo?

考察点：用户信息获取机制。

答案：

小程序获取用户信息经历了多次调整，目前推荐使用wx.getUserProfile()方法。用户信息的获取需要用户主动授权，体现了小程序对用户隐私的保护。

当前推荐方法 - wx.getUserProfile()：

// 获取用户信息（需用户点击触发）
getUserInfo() {
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
    success: (res) => {
      console.log('用户信息：', res.userInfo)
      
      const { nickName, avatarUrl, gender, country, province, city } = res.userInfo
      
      // 保存用户信息
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
      
      // 可以将用户信息发送到后台
      this.uploadUserInfo(res.userInfo)
    },
    fail: (err) => {
      console.log('用户拒绝授权', err)
    }
  })
}

用户信息数据结构：

userInfo = {
  nickName: "微信用户",      // 用户昵称
  avatarUrl: "https://...", // 用户头像链接
  gender: 1,               // 性别 0-未知 1-男性 2-女性
  country: "China",        // 国家
  province: "Guangdong",   // 省份
  city: "Guangzhou",       // 城市
  language: "zh_CN"        // 语言
}

wx.getUserProfile() vs wx.getUserInfo() 区别：

完整的用户信息获取流程：

<!-- WXML -->
<button wx:if="{{!hasUserInfo}}" bindtap="getUserInfo" class="get-user-info-btn">
  获取用户信息
</button>

<view wx:else class="user-info">
  <image src="{{userInfo.avatarUrl}}" class="avatar"></image>
  <text class="nickname">{{userInfo.nickName}}</text>
</view>

// JS
Page({
  data: {
    userInfo: null,
    hasUserInfo: false
  },
  
  onLoad() {
    // 检查是否已经有用户信息
    const userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({
        userInfo,
        hasUserInfo: true
      })
    }
  },
  
  getUserInfo() {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        // 保存用户信息到本地
        wx.setStorageSync('userInfo', res.userInfo)
        
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        
        // 上传到服务器
        this.syncUserInfoToServer(res.userInfo)
      },
      fail: () => {
        wx.showToast({
          title: '需要授权才能继续使用',
          icon: 'none'
        })
      }
    })
  },
  
  syncUserInfoToServer(userInfo) {
    wx.request({
      url: 'https://your-api.com/user/update',
      method: 'POST',
      data: { userInfo },
      success: (res) => {
        console.log('用户信息同步成功')
      }
    })
  }
})

注意事项：

• wx.getUserProfile() 必须在用户点击事件中调用
• 每次调用都会弹出授权弹窗，无法像以前一样静默获取
• 需要在desc参数中说明获取用户信息的用途
• 建议将获取到的用户信息缓存到本地，避免重复获取

What is the login process of Mini Programs? What is the role of wx.login?

考察点：登录基础流程。

答案：

小程序登录是获取用户身份标识的过程，通过wx.login()获取临时登录凭证code，再通过开发者服务器换取用户的唯一标识openid和会话密钥session_key。这个流程保证了用户身份的安全性和唯一性。

登录流程图：

小程序端          开发者服务器          微信服务器
    |                  |                  |
1. wx.login()          |                  |
    |----------------->|                  |
2. 获取code            |                  |
    |<-----------------|                  |
3. 发送code到服务器     |                  |
    |----------------->|                  |
4. 用code换取openid    | auth.code2Session |
    |                  |----------------->|
5. 返回openid等        |                  |
    |                  |<-----------------|
6. 返回自定义登录态     |                  |
    |<-----------------|                  |

wx.login()的作用：

1. 获取用户登录态的临时凭证code
2. code有效期5分钟，用于服务器端换取openid
3. 每次调用wx.login()都会刷新code

基础登录实现：

// 小程序端登录
login() {
  wx.login({
    success: (res) => {
      if (res.code) {
        console.log('登录成功，code:', res.code)
        
        // 发送code到开发者服务器
        this.sendCodeToServer(res.code)
      } else {
        console.log('登录失败：', res.errMsg)
      }
    },
    fail: (err) => {
      console.log('wx.login调用失败：', err)
    }
  })
},

// 将code发送到服务器
sendCodeToServer(code) {
  wx.request({
    url: 'https://your-api.com/auth/login',
    method: 'POST',
    data: { code },
    success: (res) => {
      if (res.data.success) {
        // 保存自定义登录态
        wx.setStorageSync('token', res.data.token)
        wx.setStorageSync('openid', res.data.openid)
        
        console.log('登录成功')
        this.onLoginSuccess()
      }
    },
    fail: (err) => {
      console.log('登录请求失败：', err)
    }
  })
}

服务器端处理（Node.js示例）：

// 服务器端接收code并换取openid
app.post('/auth/login', async (req, res) => {
  const { code } = req.body
  
  try {
    // 调用微信接口换取openid
    const response = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
      params: {
        appid: 'your-appid',
        secret: 'your-secret',
        js_code: code,
        grant_type: 'authorization_code'
      }
    })
    
    const { openid, session_key, unionid } = response.data
    
    if (openid) {
      // 生成自定义token
      const token = jwt.sign({ openid }, 'your-secret-key', { expiresIn: '7d' })
      
      // 保存用户信息到数据库
      await saveUserInfo({ openid, session_key, unionid })
      
      res.json({
        success: true,
        token,
        openid
      })
    } else {
      res.json({
        success: false,
        message: '登录失败'
      })
    }
  } catch (error) {
    console.error('登录处理失败：', error)
    res.status(500).json({
      success: false,
      message: '服务器错误'
    })
  }
})

完整登录方案：

// 小程序端完整登录逻辑
const AuthService = {
  // 检查登录状态
  checkLoginStatus() {
    const token = wx.getStorageSync('token')
    if (!token) {
      return false
    }
    
    // 检查token是否过期
    return this.validateToken(token)
  },
  
  // 执行登录
  async doLogin() {
    return new Promise((resolve, reject) => {
      wx.login({
        success: (res) => {
          if (res.code) {
            this.exchangeCodeForToken(res.code)
              .then(resolve)
              .catch(reject)
          } else {
            reject(new Error('获取code失败'))
          }
        },
        fail: reject
      })
    })
  },
  
  // 用code换取token
  async exchangeCodeForToken(code) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://your-api.com/auth/login',
        method: 'POST',
        data: { code },
        success: (res) => {
          if (res.data.success) {
            // 保存登录信息
            wx.setStorageSync('token', res.data.token)
            wx.setStorageSync('openid', res.data.openid)
            resolve(res.data)
          } else {
            reject(new Error(res.data.message))
          }
        },
        fail: reject
      })
    })
  },
  
  // 自动登录
  async autoLogin() {
    if (this.checkLoginStatus()) {
      return true
    }
    
    try {
      await this.doLogin()
      return true
    } catch (error) {
      console.error('自动登录失败：', error)
      return false
    }
  }
}

// 在app.js中使用
App({
  async onLaunch() {
    // 应用启动时自动登录
    const loginSuccess = await AuthService.autoLogin()
    if (loginSuccess) {
      console.log('用户已登录')
    } else {
      console.log('用户未登录，需要引导登录')
    }
  }
})

关键概念说明：

• code： 临时登录凭证，5分钟有效
• openid： 用户在当前小程序下的唯一标识
• session_key： 会话密钥，用于数据解密
• unionid： 用户在开发者账号下的唯一标识（需满足条件）

How to initiate WeChat Pay in Mini Programs? What parameters are required for wx.requestPayment?

考察点：支付基础调用。

答案：

微信支付是小程序重要的商业功能，通过wx.requestPayment()调起微信支付。支付流程涉及小程序端、开发者服务器和微信支付服务器三方交互，需要严格按照流程执行以确保支付安全。

支付流程：

1. 用户下单 → 2. 服务器统一下单 → 3. 返回支付参数 → 4. 调起支付 → 5. 支付结果处理

wx.requestPayment()必需参数：

wx.requestPayment({
  timeStamp: '1414561699',        // 时间戳（秒）
  nonceStr: 'abcd1234',          // 随机字符串，长度32以内
  package: 'prepay_id=wx123456', // 统一下单接口返回的prepay_id
  signType: 'MD5',               // 签名算法，暂支持MD5
  paySign: 'signature',          // 签名，详见签名算法
  success: (res) => {
    console.log('支付成功', res)
  },
  fail: (err) => {
    console.log('支付失败', err)
  }
})

完整支付实现示例：

// 小程序端支付方法
requestPayment(orderInfo) {
  // 1. 调用后端统一下单接口
  wx.request({
    url: 'https://your-api.com/payment/create',
    method: 'POST',
    data: {
      openid: wx.getStorageSync('openid'),
      amount: orderInfo.amount,
      description: orderInfo.description,
      orderId: orderInfo.orderId
    },
    success: (res) => {
      if (res.data.success) {
        // 2. 获取支付参数后调起支付
        this.doPay(res.data.paymentParams)
      } else {
        wx.showToast({
          title: '下单失败',
          icon: 'error'
        })
      }
    },
    fail: () => {
      wx.showToast({
        title: '网络错误',
        icon: 'error'
      })
    }
  })
},

// 调起微信支付
doPay(paymentParams) {
  wx.requestPayment({
    ...paymentParams,
    success: (res) => {
      console.log('支付成功', res)
      
      // 支付成功后的处理
      wx.showToast({
        title: '支付成功',
        icon: 'success'
      })
      
      // 跳转到支付结果页面
      wx.redirectTo({
        url: '/pages/payment-result/payment-result?status=success'
      })
    },
    fail: (err) => {
      console.log('支付失败', err)
      
      if (err.errMsg === 'requestPayment:fail cancel') {
        wx.showToast({
          title: '支付已取消',
          icon: 'none'
        })
      } else {
        wx.showToast({
          title: '支付失败',
          icon: 'error'
        })
      }
    }
  })
}

服务器端统一下单（Node.js示例）：

const crypto = require('crypto')
const axios = require('axios')

// 统一下单接口
app.post('/payment/create', async (req, res) => {
  const { openid, amount, description, orderId } = req.body
  
  try {
    // 1. 构造统一下单参数
    const unifiedOrderParams = {
      appid: 'your-appid',
      mch_id: 'your-mch_id',
      nonce_str: generateNonceStr(),
      body: description,
      out_trade_no: orderId,
      total_fee: amount, // 金额，单位分
      spbill_create_ip: req.ip,
      notify_url: 'https://your-api.com/payment/notify',
      trade_type: 'JSAPI',
      openid: openid
    }
    
    // 2. 生成签名
    unifiedOrderParams.sign = generateSign(unifiedOrderParams, 'your-api-key')
    
    // 3. 调用微信统一下单接口
    const unifiedOrderResult = await callUnifiedOrder(unifiedOrderParams)
    
    if (unifiedOrderResult.return_code === 'SUCCESS' && 
        unifiedOrderResult.result_code === 'SUCCESS') {
      
      // 4. 构造小程序支付参数
      const paymentParams = {
        timeStamp: Math.floor(Date.now() / 1000).toString(),
        nonceStr: generateNonceStr(),
        package: `prepay_id=${unifiedOrderResult.prepay_id}`,
        signType: 'MD5'
      }
      
      // 5. 生成小程序支付签名
      paymentParams.paySign = generatePaySign(paymentParams, 'your-appid', 'your-api-key')
      
      res.json({
        success: true,
        paymentParams
      })
    } else {
      res.json({
        success: false,
        message: '下单失败'
      })
    }
  } catch (error) {
    console.error('统一下单失败：', error)
    res.status(500).json({
      success: false,
      message: '服务器错误'
    })
  }
})

// 生成随机字符串
function generateNonceStr() {
  return Math.random().toString(36).substring(2, 15) + 
         Math.random().toString(36).substring(2, 15)
}

// 生成签名
function generateSign(params, apiKey) {
  const sortedKeys = Object.keys(params).sort()
  const stringA = sortedKeys.map(key => `${key}=${params[key]}`).join('&')
  const stringSignTemp = stringA + '&key=' + apiKey
  
  return crypto.createHash('md5')
    .update(stringSignTemp, 'utf8')
    .digest('hex')
    .toUpperCase()
}

支付结果处理：

1. 支付成功： 跳转到成功页面，更新订单状态
2. 支付失败： 显示错误信息，允许重新支付
3. 支付取消： 返回订单页面，保持订单状态

安全注意事项：

• 所有签名计算必须在服务器端完成
• API密钥不能暴露给客户端
• 必须验证支付回调的签名
• 订单金额等敏感信息需要服务器端校验

常见错误码：

• requestPayment:fail cancel：用户取消支付
• requestPayment:fail system：系统错误
• 签名错误、参数错误等需要检查服务器端实现

What is the operating mechanism of Mini Programs? How does the dual-thread architecture work?

考察点：运行架构理解。

答案：

小程序采用双线程架构设计，将渲染层和逻辑层分离，通过系统层进行通信。这种架构确保了安全性和性能，同时限制了某些Web能力以提供更稳定的运行环境。

双线程架构组成：

┌─────────────────┐    ┌─────────────────┐
│   渲染层(View)   │    │   逻辑层(App)   │
│   WebView       │    │   JS Core       │
│   WXML/WXSS     │◄──►│   JavaScript    │
└─────────────────┘    └─────────────────┘
         │                       │
         └───────────┬───────────┘
                     │
           ┌─────────▼─────────┐
           │    系统层(Native)   │
           │   微信客户端核心    │
           └───────────────────┘

各层职责详解：

1. 渲染层（View Layer）：

   • 使用WebView进行渲染
   • 负责WXML结构和WXSS样式的解析
   • 处理用户交互事件
   • 每个页面都有独立的WebView实例

   // 渲染层主要处理：
   // - 页面结构渲染
   // - 样式计算和应用  
   // - 用户交互事件捕获
   // - 动画效果处理
   

2. 逻辑层（App Service Layer）：

   • 运行在JSCore中（iOS）或V8引擎中（Android）
   • 执行JS逻辑，处理API调用
   • 管理数据状态和业务逻辑
   • 没有DOM和BOM对象

   // 逻辑层主要处理：
   Page({
     data: { message: 'Hello World' },
     onLoad() {
       // 页面逻辑处理
       this.loadData()
     },
     loadData() {
       // API调用、数据处理等
       wx.request({...})
     }
   })
   

3. 系统层（Native Layer）：

   • 微信客户端原生能力
   • 负责两个线程间的通信
   • 提供丰富的原生API
   • 管理小程序生命周期

通信机制：

// 1. 逻辑层向渲染层发送数据
this.setData({
  message: 'New Message'  // 逻辑层数据
})
// ↓ 通过系统层传递
// 渲染层接收并更新视图

// 2. 渲染层向逻辑层发送事件
// WXML: <button bindtap="handleTap">按钮</button>
// ↓ 用户点击触发事件
// 系统层捕获事件并传递给逻辑层
handleTap(event) {
  // 逻辑层处理事件
  console.log('按钮被点击')
}

运行时序：

1. 小程序启动
   ├── 下载小程序包
   ├── 启动渲染层WebView
   ├── 启动逻辑层JSCore
   └── 注入小程序代码

2. 页面加载
   ├── 逻辑层执行onLoad
   ├── 初始化页面数据
   ├── 发送初始数据到渲染层
   └── 渲染层渲染页面

3. 用户交互
   ├── 渲染层捕获事件
   ├── 系统层传递事件到逻辑层
   ├── 逻辑层处理事件
   ├── 调用setData更新数据
   └── 渲染层重新渲染

架构优势：

1. 安全性： 逻辑层没有直接操作DOM的能力，避免XSS攻击
2. 稳定性： 渲染层和逻辑层分离，一方崩溃不影响另一方
3. 性能： 多WebView架构，页面切换更流畅
4. 管控： 系统层可以对API调用进行权限控制

架构限制：

1. DOM操作： 不能直接操作DOM，只能通过setData
2. 全局变量： 页面间不共享全局变量
3. 文件系统： 无法直接访问本地文件系统
4. 网络请求： 受域名白名单限制

性能优化要点：

• 减少setData的频率和数据量
• 避免频繁的页面通信
• 合理使用组件化减少渲染压力
• 利用分包加载优化启动速度

How to create and use custom components in Mini Programs?

考察点：组件开发能力。

答案：

小程序自定义组件是代码复用和模块化开发的重要工具。组件具有独立的逻辑和样式作用域，支持数据传递、事件通信和插槽等特性，是构建复杂小程序应用的基础。

创建自定义组件：

1. 组件目录结构：

components/
└── my-button/
    ├── my-button.js     # 组件逻辑
    ├── my-button.json   # 组件配置
    ├── my-button.wxml   # 组件结构  
    └── my-button.wxss   # 组件样式

2. 组件配置文件（my-button.json）：

{
  "component": true,
  "usingComponents": {
    "other-component": "../other-component/other-component"
  }
}

3. 组件结构文件（my-button.wxml）：

<view class="my-button {{type}}" bindtap="handleTap">
  <text class="button-text">{{text}}</text>
  <!-- 插槽支持 -->
  <slot name="icon"></slot>
  <slot></slot>
</view>

4. 组件样式文件（my-button.wxss）：

/* 组件样式具有隔离性 */
.my-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.my-button.primary {
  background-color: #007aff;
  color: white;
}

.my-button.secondary {
  background-color: #f8f8f8;
  color: #333;
}

5. 组件逻辑文件（my-button.js）：

Component({
  // 组件属性定义
  properties: {
    text: {
      type: String,
      value: '按钮'
    },
    type: {
      type: String,
      value: 'primary'
    },
    disabled: {
      type: Boolean,
      value: false
    },
    size: {
      type: String,
      value: 'medium'
    }
  },
  
  // 组件内部数据
  data: {
    loading: false
  },
  
  // 组件方法
  methods: {
    handleTap(event) {
      if (this.data.disabled || this.data.loading) {
        return
      }
      
      // 触发自定义事件
      this.triggerEvent('tap', {
        type: this.data.type,
        text: this.data.text
      })
    },
    
    // 暴露给外部的方法
    showLoading() {
      this.setData({
        loading: true
      })
    },
    
    hideLoading() {
      this.setData({
        loading: false
      })
    }
  },
  
  // 生命周期方法
  lifetimes: {
    created() {
      console.log('组件被创建')
    },
    attached() {
      console.log('组件被添加到页面')
    },
    detached() {
      console.log('组件被移除')
    }
  },
  
  // 页面生命周期方法
  pageLifetimes: {
    show() {
      console.log('页面被显示')
    },
    hide() {
      console.log('页面被隐藏')
    }
  },
  
  // 数据监听器
  observers: {
    'type, disabled': function(type, disabled) {
      console.log('type或disabled发生变化', type, disabled)
    }
  }
})

使用自定义组件：

1. 在页面中注册组件（page.json）：

{
  "usingComponents": {
    "my-button": "../../components/my-button/my-button"
  }
}

2. 在页面中使用组件（page.wxml）：

<!-- 基础使用 -->
<my-button text="点击我" type="primary" bind:tap="onButtonTap"></my-button>

<!-- 使用插槽 -->
<my-button text="带图标按钮" bind:tap="onButtonTap">
  <image slot="icon" src="/images/icon.png" class="icon"></image>
</my-button>

<!-- 传递复杂数据 -->
<my-button 
  text="{{buttonText}}" 
  type="{{buttonType}}" 
  disabled="{{isDisabled}}"
  bind:tap="onButtonTap">
</my-button>

3. 在页面中处理组件事件（page.js）：

Page({
  data: {
    buttonText: '提交',
    buttonType: 'primary',
    isDisabled: false
  },
  
  onButtonTap(event) {
    console.log('按钮被点击', event.detail)
    
    // 获取组件实例并调用方法
    const buttonComponent = this.selectComponent('#my-button')
    if (buttonComponent) {
      buttonComponent.showLoading()
      
      // 模拟异步操作
      setTimeout(() => {
        buttonComponent.hide_loading()
      }, 2000)
    }
  }
})

高级特性：

1. 组件间通信：

// 父组件向子组件传递数据
// 通过properties

// 子组件向父组件传递数据
// 通过triggerEvent
this.triggerEvent('custom-event', { data: 'some data' })

// 获取组件实例
const component = this.selectComponent('.my-component')
component.customMethod()

2. 抽象节点：

// 组件配置
{
  "component": true,
  "componentGenerics": {
    "selectable": true
  }
}

<!-- 组件模板 -->
<view>
  <selectable></selectable>
</view>

3. 组件构造器：

// 使用Behavior复用代码
const myBehavior = require('./my-behavior')

Component({
  behaviors: [myBehavior],
  // ...其他配置
})

最佳实践：

• 保持组件功能单一，职责清晰
• 合理设计组件API，提供必要的属性和事件
• 使用插槽提高组件灵活性
• 组件内部状态管理要简洁
• 注意组件样式隔离和全局样式影响
• 适当使用抽象节点和Behavior提高复用性

How to handle network requests in Mini Programs? What are the limitations and considerations?

考察点：网络请求处理。

答案：

小程序网络请求通过wx.request()等API实现，具有严格的安全限制和配置要求。合理的网络请求处理是小程序与后端服务交互的关键，需要考虑安全性、性能和用户体验多个方面。

基础网络请求：

// 基本的GET请求
wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    id: 123,
    type: 'user'
  },
  header: {
    'content-type': 'application/json'
  },
  success: (res) => {
    console.log('请求成功', res.data)
  },
  fail: (err) => {
    console.error('请求失败', err)
  },
  complete: () => {
    console.log('请求完成')
  }
})

// POST请求示例
wx.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: {
    name: '张三',
    age: 25
  },
  header: {
    'content-type': 'application/json',
    'Authorization': 'Bearer ' + wx.getStorageSync('token')
  },
  success: (res) => {
    if (res.statusCode === 200) {
      wx.showToast({
        title: '提交成功',
        icon: 'success'
      })
    }
  }
})

网络请求限制和要求：

1. 域名限制：

• 只能请求配置在开发者后台的合法域名
• 支持HTTPS和WSS协议，不支持HTTP
• 每个接口最多配置20个域名
• 小程序必须使用HTTPS/WSS进行网络通信

2. 并发限制：

// 同时最多发起10个请求
// 超过限制的请求会被延迟
const requests = []
for (let i = 0; i < 15; i++) {
  requests.push(
    wx.request({
      url: `https://api.example.com/data/${i}`,
      success: (res) => console.log(`请求${i}完成`)
    })
  )
}
// 前10个立即发送，后5个会排队等待

3. 超时设置：

// 在app.json中配置全局超时
{
  "networkTimeout": {
    "request": 10000,        // 请求超时时间
    "downloadFile": 10000    // 下载超时时间
  }
}

封装网络请求工具：

// utils/request.js - 网络请求封装
class RequestManager {
  constructor() {
    this.baseURL = 'https://api.example.com'
    this.timeout = 10000
    this.interceptors = {
      request: [],
      response: []
    }
  }
  
  // 请求拦截器
  use(type, interceptor) {
    this.interceptors[type].push(interceptor)
  }
  
  // 核心请求方法
  async request(options = {}) {
    // 合并默认配置
    const config = {
      url: this.baseURL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'content-type': 'application/json',
        'Authorization': 'Bearer ' + wx.getStorageSync('token'),
        ...options.header
      },
      timeout: this.timeout,
      ...options
    }
    
    // 执行请求拦截器
    for (const interceptor of this.interceptors.request) {
      config = interceptor(config) || config
    }
    
    return new Promise((resolve, reject) => {
      wx.request({
        ...config,
        success: (res) => {
          // 执行响应拦截器
          for (const interceptor of this.interceptors.response) {
            res = interceptor(res) || res
          }
          
          // 统一错误处理
          if (res.statusCode >= 200 && res.statusCode < 300) {
            resolve(res.data)
          } else {
            this.handleError(res)
            reject(res)
          }
        },
        fail: (err) => {
          this.handleError(err)
          reject(err)
        }
      })
    })
  }
  
  // 错误处理
  handleError(error) {
    const errorMap = {
      400: '请求参数错误',
      401: '未授权，请重新登录',
      403: '拒绝访问',
      404: '请求地址不存在',
      500: '服务器内部错误',
      502: '网关错误',
      503: '服务不可用',
      504: '网关超时'
    }
    
    const message = errorMap[error.statusCode] || '网络请求失败'
    
    wx.showToast({
      title: message,
      icon: 'none',
      duration: 2000
    })
  }
  
  // 便捷方法
  get(url, data, options = {}) {
    return this.request({
      url,
      method: 'GET',
      data,
      ...options
    })
  }
  
  post(url, data, options = {}) {
    return this.request({
      url,
      method: 'POST',
      data,
      ...options
    })
  }
  
  put(url, data, options = {}) {
    return this.request({
      url,
      method: 'PUT',
      data,
      ...options
    })
  }
  
  delete(url, data, options = {}) {
    return this.request({
      url,
      method: 'DELETE',
      data,
      ...options
    })
  }
}

// 创建实例
const request = new RequestManager()

// 配置拦截器
request.use('request', (config) => {
  // 显示加载中
  wx.showLoading({
    title: '加载中...',
    mask: true
  })
  return config
})

request.use('response', (response) => {
  // 隐藏加载中
  wx.hideLoading()
  return response
})

module.exports = request

使用封装的请求工具：

// pages/index/index.js
const request = require('../../utils/request')

Page({
  async loadUserData() {
    try {
      const userData = await request.get('/user/profile', { id: 123 })
      this.setData({ userData })
    } catch (error) {
      console.error('获取用户数据失败', error)
    }
  },
  
  async submitForm() {
    try {
      const result = await request.post('/user/update', {
        name: '张三',
        email: '[email protected]'
      })
      
      wx.showToast({
        title: '保存成功',
        icon: 'success'
      })
    } catch (error) {
      console.error('提交失败', error)
    }
  }
})

文件上传处理：

// 上传文件
uploadFile(filePath) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: 'https://api.example.com/upload',
      filePath: filePath,
      name: 'file',
      formData: {
        'type': 'image'
      },
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token')
      },
      success: (res) => {
        const data = JSON.parse(res.data)
        resolve(data)
      },
      fail: reject
    })
  })
}

// 下载文件
downloadFile(url) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: url,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.tempFilePath)
        } else {
          reject(res)
        }
      },
      fail: reject
    })
  })
}

注意事项和最佳实践：

1. 安全性：

   • 所有接口域名必须在小程序后台配置
   • 敏感信息使用HTTPS传输
   • 合理使用token进行身份验证

2. 性能优化：

   • 控制并发请求数量
   • 实现请求缓存机制
   • 合理设置超时时间

3. 错误处理：

   • 统一的错误处理机制
   • 网络异常的用户提示
   • 请求重试策略

4. 用户体验：

   • 显示加载状态
   • 合理的错误提示
   • 离线状态处理

How to implement subpackage loading in Mini Programs? What are the advantages of subpackages?

考察点：分包机制理解。

答案：

小程序分包加载是一种代码组织和性能优化技术，将小程序按功能模块拆分为多个包，实现按需加载。分包机制可以有效减少主包大小，提升启动速度，优化用户体验。

分包配置实现：

1. app.json配置：

{
  "pages": [
    "pages/index/index",
    "pages/profile/profile"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "name": "pack1",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "packageB", 
      "name": "pack2",
      "pages": [
        "pages/settings/settings",
        "pages/about/about"
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["pack1"]
    },
    "packageA/pages/list/list": {
      "packages": ["pack2"]
    }
  }
}

2. 项目目录结构：

├── app.js
├── app.json
├── app.wxss
├── pages/                    # 主包页面
│   ├── index/
│   └── profile/
├── packageA/                 # 分包A
│   ├── pages/
│   │   ├── list/
│   │   └── detail/
│   └── utils/
│       └── helper.js
├── packageB/                 # 分包B
│   ├── pages/
│   │   ├── settings/
│   │   └── about/
│   └── components/
│       └── custom-component/
└── utils/                    # 主包工具
    └── common.js

分包页面跳转：

// 跳转到分包页面
wx.navigateTo({
  url: '/packageA/pages/list/list?type=all'
})

// 从分包跳转到主包
wx.navigateTo({
  url: '/pages/profile/profile'
})

// 分包间跳转
wx.navigateTo({
  url: '/packageB/pages/settings/settings'
})

预下载配置详解：

{
  "preloadRule": {
    // 在首页时预下载分包A
    "pages/index/index": {
      "network": "all",        // all-所有网络 wifi-仅wifi
      "packages": ["pack1"]    // 预下载的分包名称
    },
    
    // 进入分包A的列表页时预下载分包B  
    "packageA/pages/list/list": {
      "network": "wifi",
      "packages": ["pack2"]
    }
  }
}

分包大小限制：

• 主包：不超过2MB
• 单个分包：不超过2MB
• 整个小程序：不超过20MB（普通小程序）/ 不超过4MB（游戏类目）

独立分包实现：

{
  "pages": ["pages/index/index"],
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/list/list"]
    }
  ],
  "independentSubpackages": [
    {
      "root": "independent",
      "name": "independent-pack",
      "pages": ["pages/login/login", "pages/register/register"]
    }
  ]
}

独立分包特点：

• 可以独立于主包运行
• 不能依赖主包和其他分包的内容
• 适用于临时性功能（如登录页、广告页）
• 可以减少启动时的代码包下载

分包异步化：

// 异步引入分包模块
const loadSubpackage = () => {
  return new Promise((resolve) => {
    // 确保分包已加载
    const subpackage = require('../../packageA/utils/helper.js')
    resolve(subpackage)
  })
}

// 使用
Page({
  async onLoad() {
    try {
      const helper = await loadSubpackage()
      helper.init()
    } catch (error) {
      console.error('分包加载失败', error)
    }
  }
})

分包加载状态监听：

// 监听分包加载进度
wx.onSubpackageLoad && wx.onSubpackageLoad(function(res) {
  console.log('分包加载进度', res)
  // res.packageName - 分包名称
  // res.progress - 加载进度 0-100
})

分包优势：

1. 性能优势：

• 启动速度提升： 主包更小，启动更快
• 按需加载： 只加载用户访问的功能模块
• 内存优化： 未使用的分包不占用内存

2. 开发优势：

• 模块化管理： 功能模块独立开发和维护
• 团队协作： 不同团队负责不同分包
• 版本控制： 分包可独立更新

3. 用户体验：

• 快速首屏： 核心功能优先加载
• 流量节省： 按需下载减少不必要的流量消耗
• 渐进加载： 用户可以先使用核心功能

最佳实践：

1. 分包策略：

// 主包：核心页面和公共资源
main: ['index', 'profile', 'common-utils']

// 分包A：业务模块A
packageA: ['product-list', 'product-detail', 'shopping-cart']  

// 分包B：业务模块B
packageB: ['user-center', 'settings', 'help']

// 独立分包：独立功能
independent: ['login', 'register', 'splash']

2. 资源优化：

• 公共组件和工具放在主包
• 分包内资源尽量自包含
• 图片等静态资源考虑CDN加载
• 合理配置预下载策略

3. 代码组织：

• 避免分包间的强依赖关系
• 公共逻辑提取到主包
• 分包内保持功能内聚
• 注意分包的加载时机

How to use cloud development in Mini Programs? What capabilities does it include?

考察点：云开发能力。

答案：

小程序云开发提供了完整的后端即服务（BaaS）能力，开发者无需搭建服务器即可实现后端功能。云开发集成了数据库、存储、云函数等核心能力，大大降低了小程序的开发和运维成本。

云开发核心能力：

1. 云数据库： NoSQL文档型数据库，支持实时数据同步
2. 云存储： 文件存储服务，支持图片、视频等多媒体文件
3. 云函数： 服务器端逻辑处理，支持Node.js运行环境
4. 云调用： 直接调用微信开放接口的能力

初始化云开发：

// app.js
App({
  onLaunch() {
    // 初始化云开发
    wx.cloud.init({
      env: 'your-env-id', // 云环境ID
      traceUser: true     // 用户访问记录
    })
  }
})

云数据库使用：

// 获取数据库引用
const db = wx.cloud.database()
const collection = db.collection('users')

// 添加数据
async addUser() {
  try {
    const result = await collection.add({
      data: {
        name: '张三',
        age: 25,
        createTime: new Date()
      }
    })
    console.log('添加成功', result._id)
  } catch (error) {
    console.error('添加失败', error)
  }
}

// 查询数据
async getUsers() {
  try {
    const result = await collection.where({
      age: db.command.gt(20) // 年龄大于20
    }).get()
    
    this.setData({
      userList: result.data
    })
  } catch (error) {
    console.error('查询失败', error)
  }
}

// 更新数据
async updateUser(id) {
  try {
    await collection.doc(id).update({
      data: {
        age: 26
      }
    })
  } catch (error) {
    console.error('更新失败', error)
  }
}

云存储使用：

// 上传文件
async uploadFile() {
  try {
    const result = await wx.cloud.uploadFile({
      cloudPath: 'images/' + Date.now() + '.jpg',
      filePath: this.data.tempFilePath
    })
    console.log('上传成功', result.fileID)
    return result.fileID
  } catch (error) {
    console.error('上传失败', error)
  }
}

// 下载文件
async downloadFile(fileID) {
  try {
    const result = await wx.cloud.downloadFile({
      fileID: fileID
    })
    return result.tempFilePath
  } catch (error) {
    console.error('下载失败', error)
  }
}

// 删除文件
async deleteFile(fileID) {
  try {
    await wx.cloud.deleteFile({
      fileList: [fileID]
    })
  } catch (error) {
    console.error('删除失败', error)
  }
}

云函数使用：

// 调用云函数
async callCloudFunction() {
  try {
    const result = await wx.cloud.callFunction({
      name: 'getUserInfo',
      data: {
        userId: 'user123'
      }
    })
    console.log('云函数返回', result.result)
  } catch (error) {
    console.error('调用失败', error)
  }
}

适用场景：

• 快速原型开发和MVP验证
• 中小型小程序的完整后端解决方案
• 需要实时数据同步的应用
• 个人开发者或小团队项目

How to optimize the startup speed and runtime performance of Mini Programs?

考察点：性能优化策略。

答案：

小程序性能优化涉及启动速度、运行流畅度和资源使用等多个方面。通过合理的代码组织、资源管理和渲染优化，可以显著提升用户体验。

启动速度优化：

1. 代码分包： 使用分包加载减少主包大小
2. 按需加载： 延迟加载非核心功能模块
3. 预加载： 合理配置分包预下载规则
4. 资源压缩： 压缩图片、代码等静态资源

运行性能优化：

1. setData优化： 减少调用频次，控制数据量
2. 长列表优化： 使用虚拟滚动，分页加载
3. 图片优化： 懒加载、合适尺寸、WebP格式
4. 内存管理： 及时清理定时器和事件监听

网络性能优化：

• 接口合并减少请求次数
• 使用缓存策略
• 请求并发控制
• CDN加速静态资源

How to implement communication between components in Mini Programs?

考察点：组件通信方式。

答案：

小程序组件通信支持多种方式，包括属性传递、事件触发、方法调用等。合理选择通信方式可以实现组件间的松耦合协作。

主要通信方式：

1. 父子组件通信：

   // 父传子：通过properties
   // 子传父：通过triggerEvent
   this.triggerEvent('custom-event', { data: 'value' })
   

2. 兄弟组件通信：

   // 通过共同的父组件中转
   // 或使用全局状态管理
   

3. 跨层级通信：

   // 使用全局事件总线
   // 或状态管理工具
   

适用场景：

• 父子组件数据传递
• 组件事件回调
• 复杂应用的状态同步

How to use third-party npm packages in Mini Programs?

考察点：依赖管理。

答案：

小程序支持使用npm包来引入第三方模块，通过构建npm功能将node_modules中的包打包到小程序中。这极大丰富了小程序的开发生态。

使用步骤：

1. 初始化npm： npm init -y
2. 安装包： npm install lodash
3. 构建npm： 开发者工具 → 工具 → 构建npm
4. 使用： const _ = require('lodash')

注意事项： 包体积限制、兼容性检查、功能限制

What is the authorization mechanism of Mini Programs? How to handle user authorization?

考察点：授权流程理解。

答案：

小程序采用用户主动授权机制，保护用户隐私。授权分为不同级别，需要合理引导用户完成授权流程。

授权类型：

• 用户信息授权： wx.getUserProfile()
• 位置授权： wx.getLocation()
• 摄像头授权： wx.chooseImage()
• 麦克风授权： wx.startRecord()

处理流程： 检查授权状态 → 引导授权 → 处理结果 → 重试机制

How to implement version management and release process for Mini Programs?

考察点：版本发布流程。

答案：

小程序版本管理包括开发、测试、发布等环节，需要建立规范的流程确保质量和效率。

版本管理流程：

1. 开发版本： 开发者工具编译上传
2. 体验版本： 内部测试和体验
3. 审核版本： 提交微信审核
4. 正式版本： 审核通过后发布

最佳实践： 版本号规范、灰度发布、回滚机制、自动化CI/CD

How to implement a complete WeChat authorization login process? Including silent login and authorization login?

考察点：完整登录流程设计。

答案：

完整的微信登录流程包括静默登录获取openid和授权登录获取用户信息两个阶段，需要合理设计用户体验和安全机制。

登录流程设计：

1. 静默登录： wx.login() → 获取code → 换取openid
2. 授权登录： wx.getUserProfile() → 获取用户信息
3. 登录态维护： token管理 → 自动刷新 → 状态同步

安全考虑： session管理、token加密、时效控制

How to handle login state maintenance and refresh in Mini Programs?

考察点：登录态管理。

答案：

登录态维护是保证用户体验的关键，需要实现自动刷新、状态检查和异常处理机制。

维护策略：

• token存储： 安全存储在本地
• 自动刷新： 临期前主动刷新
• 状态检查： API调用前验证
• 异常处理： 登录失效时重新登录

What is the payment process of Mini Programs? What security issues need attention?

考察点：支付流程和安全。

答案：

小程序支付是完整的商业闭环，涉及前端调起、后端处理和微信服务器交互。安全性是支付系统的核心要求。

支付流程：

1. 用户下单： 前端收集订单信息
2. 后端统一下单： 调用微信支付API
3. 返回支付参数： 包含签名等安全信息
4. 调起支付： wx.requestPayment()
5. 处理结果： 成功/失败处理和回调

安全注意事项：

• 签名验证： 所有参数签名校验
• HTTPS传输： 全程加密传输
• 服务器校验： 关键逻辑服务器处理
• 防重放攻击： 时间戳和随机数验证
• 金额校验： 双重金额验证机制

风险防控： 异常订单监控、支付限额、实名验证

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

考察点：架构设计能力。

答案：

大型小程序架构设计需要考虑可扩展性、可维护性、性能和团队协作等多个维度。合理的架构设计是项目成功的基础。

架构设计要素：

1. 分层架构： 表现层、业务层、数据层、基础设施层
2. 模块化设计： 按业务功能拆分模块
3. 分包策略： 主包 + 业务分包 + 独立分包
4. 状态管理： 全局状态 + 局部状态管理
5. 组件体系： 基础组件 + 业务组件 + 页面组件

技术选型考虑：

• 开发框架选择（原生/Taro/uni-app）
• 状态管理方案（Mobx/Redux）
• UI组件库选择
• 构建和打包工具
• 代码规范和质量保证

How to implement complex state management in Mini Programs?

考察点：状态管理设计。

答案：

复杂小程序需要统一的状态管理来处理跨页面、跨组件的数据共享和状态同步。

状态管理方案：

1. 原生globalData： 简单全局状态存储
2. Mobx集成： 响应式状态管理
3. Redux模式： 可预测的状态容器
4. 自定义Store： 轻量级状态管理

实现要点：

• 状态结构设计
• 数据持久化策略
• 状态同步机制
• 性能优化考虑

How to implement micro-frontend architecture in Mini Programs?

考察点：微前端设计。

答案：

小程序微前端通过分包、独立分包和组件化实现应用拆分，支持独立开发、部署和维护。

实现策略：

1. 分包微前端： 业务模块独立分包
2. 组件微前端： 共享组件库
3. 路由管理： 统一路由分发
4. 状态隔离： 模块间状态独立

技术方案： 动态加载、模块联邦、基座应用模式

What are the security mechanisms of Mini Programs? How to prevent common security risks?

考察点：安全防护能力。

答案：

小程序具备多层安全机制，开发者需要在此基础上增强应用级安全防护。

平台安全机制：

• 双线程隔离架构
• 域名白名单限制
• API权限控制
• 代码包加密

常见风险防护：

1. 数据安全： 敏感信息加密存储
2. 接口安全： 签名验证、防重放攻击
3. 用户隐私： 最小化权限原则
4. 代码安全： 混淆加固、防逆向

How to build CI/CD pipelines for Mini Programs?

考察点：工程化能力。

答案：

小程序CI/CD流水线实现代码自动化构建、测试、部署，提升开发效率和代码质量。

流水线设计：

1. 代码提交： Git Hook触发
2. 代码检查： ESLint、单元测试
3. 构建打包： 编译、压缩、优化
4. 自动上传： 开发版、体验版
5. 自动部署： 审核通过后发布

工具选择： Jenkins、GitHub Actions、小程序CI插件

How to implement complex animations and interactive effects in Mini Programs?

考察点：动画实现技巧。

答案：

小程序动画通过CSS动画、wx.createAnimation、Canvas和第三方库实现复杂交互效果。

动画实现方案：

1. CSS动画： transition、animation属性
2. JS动画： wx.createAnimation API
3. Canvas动画： 自绘制复杂动画
4. Lottie动画： 设计师制作的矢量动画

性能优化： 使用transform、避免重排重绘、合理使用GPU加速

How to solve compatibility issues of Mini Programs across different devices and system versions?

考察点：兼容性处理。

答案：

小程序兼容性需要考虑基础库版本、设备性能、屏幕适配等多个方面。

兼容性策略：

1. 版本检测： wx.getSystemInfo获取版本信息
2. API兼容： 使用wx.canIUse检测API支持
3. 降级方案： 为低版本提供备选实现
4. 屏幕适配： 使用rpx和媒体查询

最佳实践： 设置最低基础库版本、渐进增强设计

How to implement performance monitoring and error tracking for Mini Programs?

考察点：监控体系设计。

答案：

小程序监控体系包括性能监控、错误追踪、用户行为分析等多个维度。

监控指标：

1. 性能指标： 启动时间、页面加载时间、setData耗时
2. 错误监控： JS错误、接口错误、资源加载错误
3. 用户行为： 页面访问、操作路径、停留时间

实现方案： 自建监控系统、第三方APM工具（如腾讯移动分析）

How to design component libraries and development toolchains for Mini Programs?

考察点：基础设施建设。

答案：

组件库和工具链是提升团队开发效率的基础设施，需要考虑复用性、可维护性和易用性。

组件库设计：

1. 基础组件： Button、Input、Modal等通用组件
2. 业务组件： 结合业务场景的复合组件
3. 文档系统： 组件使用文档和示例
4. 版本管理： 组件版本控制和升级策略

工具链建设： 脚手架工具、构建工具、代码生成器、调试工具

What is the integrated development strategy for Mini Programs with native apps and H5?

考察点：技术栈整合。

答案：

多端融合开发需要统一技术栈、共享代码和数据，实现一套代码多端运行。

融合策略：

1. 跨端框架： Taro、uni-app等一码多端框架
2. 组件复用： 共享UI组件库
3. 逻辑复用： 业务逻辑抽象和复用
4. 数据同步： 统一的状态管理和数据层

技术方案： 微服务架构、BFF层、统一设计系统

How to design a secure and reliable Mini Program login authorization system? What security factors need to be considered?

考察点：安全架构设计。

答案：

安全登录系统需要多层防护，从身份认证到会话管理都要考虑安全因素。

安全架构设计：

1. 身份认证： 微信授权 + 自定义认证
2. 令牌管理： JWT + 刷新令牌机制
3. 会话安全： HTTPS传输 + 令牌加密
4. 权限控制： RBAC权限模型

安全因素考虑：

• 防止令牌泄露和重放攻击
• 会话超时和自动刷新
• 多设备登录管理
• 异常登录检测和通知

How to design the backend architecture of Mini Program payment system? How to handle payment callbacks and order status synchronization?

考察点：支付系统架构。

答案：

支付系统架构需要保证高可用、强一致性和安全性，合理处理支付流程和状态管理。

架构设计：

1. 支付网关： 统一支付入口和路由
2. 订单系统： 订单生命周期管理
3. 账户系统： 资金和账户管理
4. 风控系统： 风险识别和拦截

回调处理： 异步回调 + 主动查询 + 状态机管理 + 幂等性保证

How to implement multi-platform login state synchronization and single sign-on for Mini Programs?

考察点：多端登录管理。

答案：

多端登录需要统一的身份认证中心和状态同步机制，实现无缝的用户体验。

实现方案：

1. 统一认证中心： 集中式身份管理
2. 令牌共享： 跨端令牌传递和验证
3. 状态同步： 实时状态推送
4. 冲突处理： 多端登录冲突策略

技术实现： SSO协议 + WebSocket推送 + 分布式Session

How to prevent common payment security risks in Mini Programs? Including replay attacks, parameter tampering, etc.?

考察点：支付安全防护。

答案：

支付安全是金融级要求，需要从多个维度建立完整的安全防护体系。

安全防护措施：

1. 签名验证： 所有请求参数数字签名
2. 防重放攻击： 时间戳 + 随机数 + 序列号
3. 防参数篡改： 关键参数服务器校验
4. 传输安全： HTTPS + 证书绑定

风险控制：

• 异常交易监控和拦截
• 支付限额和频次控制
• 设备指纹和行为分析
• 实时风险评估和决策

监控告警： 实时监控支付异常，及时发现和处理安全事件