微信小程序开发实践

一、基础

整体架构与主要文件

微信小程序采用双线程架构，分为渲染层（WebView 渲染 WXML 和 WXSS）和逻辑层（JavaScriptCore 运行逻辑），两者通过微信提供的机制通信。数据和逻辑在逻辑层，视图在渲染层。

主要文件：

• app.js：小程序的入口文件，定义全局逻辑和 App 实例。
• app.json：全局配置文件，设置页面路径、窗口样式等。
• app.wxss：全局样式表，作用于所有页面。
• page 文件：每个页面包含 index.js（逻辑）、index.wxml（结构）、index.wxss（样式）和 index.json（页面配置）。

这种架构分离了渲染和逻辑，提升了性能，但也限制了直接 DOM 操作。

与 H5 页面的运行机制差异

• 运行环境：H5 运行在浏览器中，使用完整的 DOM 和 JavaScript 引擎；小程序运行在微信自定义环境中，基于 WebView 和 JavaScriptCore，无完整 DOM，使用 WXML/WXSS。
• 数据绑定：H5 需手动操作 DOM 或框架绑定；小程序内置数据绑定，视图与数据自动同步。
• 性能：H5 依赖网络加载，首屏可能较慢；小程序本地渲染，启动速度快，但受限于微信环境。
• API：H5 使用浏览器 API；小程序提供微信专有 API（如 wx.request）。

二、页面与数据管理

setData() 方法的作用与性能问题

setData() 是小程序中更新页面数据的主要方法，作用是将逻辑层的数据变化同步到渲染层。例如：

Page({
  data: { text: '初始值' },
  changeText() {
    this.setData({ text: '新值' });
  }
});

性能问题：

• 每次调用 setData 都会触发渲染层更新，即使数据未变化。
• 大量数据（如列表）更新会导致性能瓶颈，渲染层与逻辑层通信开销大。

优化建议：

• 减少调用频率：合并多次 setData，使用对象合并。

  this.setData({
    'text': '新值',
    'count': 10
  });
  

• 分块更新：对大列表使用分页或虚拟列表。
• 过滤无变化数据：在逻辑层判断数据是否变化后再调用。

data 绑定与 wxml 双向绑定

小程序的 data 是组件或页面的数据源，WXML 通过 Mustache `` 语法绑定：

• 单向绑定：`` 展示数据。
• 双向绑定：结合 bindinput 和 value，常见于表单：

  <input value="" bindinput="onInput" />
  

  Page({
    data: { name: '' },
    onInput(e) {
      this.setData({ name: e.detail.value });
    }
  });
  

• 组件双向绑定：自定义组件可通过 value 和 bindchange 实现。

三、生命周期

App 和 Page 生命周期回调

• App 生命周期：
  • onLaunch：小程序初始化时触发，仅一次。
  • onShow：小程序启动或从后台切回前台。
  • onHide：小程序从前台切到后台。
  • onError：错误监听。
• Page 生命周期：
  • onLoad：页面加载，接收页面参数。
  • onShow：页面显示。
  • onReady：页面首次渲染完成。
  • onHide：页面隐藏。
  • onUnload：页面卸载。

执行顺序：

1. onLaunch → onShow（App 级别）。
2. onLoad → onShow → onReady（Page 级别，首次进入）。
3. onHide/onShow（页面切换）。
4. onUnload（页面关闭）。

onLoad 和 onShow 的区别

• onLoad：页面加载时触发，仅在首次进入时执行，接收 options 参数（如路由参数）。
• onShow：页面显示时触发，每次切回前台或重新显示时调用，无参数。
• 使用场景：onLoad 适合初始化数据，onShow 适合更新 UI（如检查网络状态）。

onUnload 触发条件：

• 页面被 wx.navigateTo 后的 wx.navigateBack 返回。
• 使用 wx.redirectTo 或 wx.reLaunch 跳转。
• 手动调用 wx.navigateBack。

四、组件与自定义组件

创建自定义组件与数据传递

创建步骤：

1. 创建组件目录（如 components/my-component）。
2. 添加 my-component.json、my-component.wxml、my-component.wxss、my-component.js。

   // my-component.json
   {
     "component": true
   }
   

   // my-component.js
   Component({
     properties: { text: String },
     data: { count: 0 },
     methods: {
       increment() { 
        this.setData({ 
          count: this.data.count + 1 
        }); 
      }
     }
   });
   

   // my-component.wxml
   <view> - 9</view>
   <button bindtap="increment">加 1</button>
   

数据传递：

• 父到子：通过 properties 接收，页面使用 <my-component text="Hello" />。
• 子到父：通过事件触发，this.triggerEvent('myevent', data)，页面监听 bind:myevent。

示例：

<!-- index.wxml -->
<my-component text="测试" bind:myevent="onChildEvent" />

// index.js
Page({
  onChildEvent(e) { console.log(e.detail); }
});

五、网络请求与性能优化

微信小程序如何发起网络请求？

使用 wx.request 发起 HTTP 请求：

wx.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success(res) { console.log(res.data); },
  fail(err) { console.error(err); }
});

• 支持 GET/POST 等方法，需配置 request 合法域名。

性能优化技巧

• 减少 setData 次数：合并数据更新，使用 Object.assign 或分批加载。
• 优化首屏加载：
  • 预加载关键资源，减小 app.json 中的 pages 数量。
  • 使用 wx.getSystemInfo 动态适配，减少不必要渲染。
• 缓存数据：利用 wx.setStorage 存储静态数据，减少网络请求。