微信小程序及uniapp跨端开发

微信小程序 + uni-app 跨端开发重点知识体系梳理

微信小程序开发分为原生开发和跨端框架开发（以 uni-app 为代表）。以下从原生核心知识、uni-app 跨端实践两部分进行完整梳理，覆盖架构、语法、工程化、性能优化等核心维度。

项目汇总

code/all/mp-eqiq（微信小程序原生）
code/all/mp-thzmc（微信小程序原生）（已下线）
code/all/mp-yswx（uni-app）(微信小程序、钉钉小程序)

第一部分：微信小程序原生开发重点知识

一、核心架构与基础概念

1. 双线程模型（小程序核心特性）

小程序运行在双线程环境中，逻辑与视图分离：

线程类型 运行环境 核心职责 对应文件
逻辑层 JSCore（iOS）/ V8（Android） 业务逻辑处理、数据计算、API 调用 *.js
视图层 WebView 页面渲染、UI 交互 *.wxml（结构）、*.wxss（样式）

2. 项目核心文件结构

1
2
3
4
5
6
7
8
9
10
11
├── app.js          # 应用入口（逻辑层）
├── app.json        # 应用全局配置
├── app.wxss        # 应用全局样式
├── pages/          # 页面目录
│   └── index/
│       ├── index.js    # 页面逻辑
│       ├── index.json  # 页面配置
│       ├── index.wxml  # 页面结构
│       └── index.wxss  # 页面样式
├── components/     # 自定义组件目录
└── utils/          # 工具函数目录

二、全局与页面配置

1. 全局配置 app.json

控制小程序的页面路由、窗口样式、TabBar、分包等核心配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "pages": [
    "pages/index/index",  // 页面路径（第一个为首页）
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "小程序标题",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f5f5f5",
    "enablePullDownRefresh": true  // 开启下拉刷新
  },
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/home.png", "selectedIconPath": "icons/home-active.png" },
      { "pagePath": "pages/user/user", "text": "我的", "iconPath": "icons/user.png", "selectedIconPath": "icons/user-active.png" }
    ]
  },
  "subpackages": [  // 分包配置（性能优化重点）
    { "root": "packageA", "pages": ["pages/cart/cart"] }
  ],
  "preloadRule": {  // 分包预下载
    "pages/index/index": { "network": "wifi", "packages": ["packageA"] }
  }
}

2. 页面配置 page.json

覆盖全局 window 配置，仅对当前页面生效：

1
2
3
4
5
{
  "navigationBarTitleText": "详情页",
  "enablePullDownRefresh": false,
  "disableScroll": true  // 禁止页面滚动
}

三、生命周期（核心考点）

1. 应用生命周期（app.js）

1
2
3
4
5
6
App({
  onLaunch() { /* 小程序初始化完成时触发（仅一次） */ },
  onShow() { /* 小程序启动或从后台进入前台时触发 */ },
  onHide() { /* 小程序从前台进入后台时触发 */ },
  onError(err) { /* 小程序发生脚本错误或 API 调用失败时触发 */ }
});

2. 页面生命周期（page.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
  data: { /* 页面初始数据 */ },
  
  onLoad(options) { /* 页面加载时触发（可获取路由参数 options） */ },
  onShow() { /* 页面显示时触发 */ },
  onReady() { /* 页面初次渲染完成时触发（可操作 DOM） */ },
  onHide() { /* 页面隐藏时触发（如跳转其他页面） */ },
  onUnload() { /* 页面卸载时触发（如返回上一页） */ },
  
  onPullDownRefresh() { /* 下拉刷新触发（需在配置中开启） */ },
  onReachBottom() { /* 上拉触底触发（用于分页加载） */ },
  onShareAppMessage() { /* 用户点击右上角分享时触发 */ }
});

四、数据绑定与事件处理

1. WXML 数据绑定（类似 Vue，但语法有差异）

1
2
3
4
5
6
7
8
9
10
11
<!-- 文本绑定 -->
<view>{{ message }}</view>

<!-- 列表渲染（wx:for） -->
<view wx:for="{{ list }}" wx:key="id">
  {{ index }}: {{ item.name }}
</view>

<!-- 条件渲染（wx:if vs hidden） -->
<view wx:if="{{ isShow }}">显示内容</view>
<view hidden="{{ !isShow }}">隐藏内容</view>

性能提示：wx:if 是“条件渲染”（不满足条件时不渲染节点），hidden 是“样式隐藏”（始终渲染节点）。频繁切换用 hidden，条件稳定用 wx:if。

2. 事件处理

1
2
<!-- 绑定事件（bindtap：冒泡；catchtap：阻止冒泡） -->
<button bindtap="handleTap" data-id="{{ item.id }}">点击</button>
1
2
3
4
5
6
Page({
  handleTap(e) {
    const id = e.currentTarget.dataset.id; // 获取 data-* 传参
    this.setData({ message: '更新数据' }); // 核心：更新视图层数据
  }
});

3. setData 性能红线

  • 避免频繁调用：批量更新数据，减少 setData 次数。
  • 控制数据量：单次 setData 数据不超过 1MB，否则会影响渲染性能。
  • 只更新必要数据：通过 key 精准更新列表项，避免全量重绘。

五、组件系统

1. 基础组件（高频使用）

组件名 核心用途 注意事项
view 视图容器（类似 div） 块级元素
text 文本容器 唯一支持长按选中文本的组件
image 图片 必须设置 mode（如 aspectFill），支持懒加载 lazy-load
scroll-view 滚动容器 必须设置固定高度，开启 scroll-y 纵向滚动
swiper 轮播图 配合 swiper-item 使用，设置 indicator-dots 显示指示点

2. 自定义组件（复用逻辑的核心）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// components/my-component.js
Component({
  properties: { // 父组件传入的属性
    title: { type: String, value: '默认标题' }
  },
  data: { // 组件内部数据
    count: 0
  },
  methods: { // 组件方法
    handleClick() {
      this.triggerEvent('myevent', { count: this.data.count }); // 向父组件发送事件
    }
  }
});
1
2
<!-- 父组件使用 -->
<my-component title="自定义标题" bind:myevent="onMyEvent"></my-component>

六、核心 API 与能力

1. 网络请求

1
2
3
4
5
6
7
wx.request({
  url: 'https://api.example.com/data', // 必须是 HTTPS，且在后台配置域名白名单
  method: 'GET',
  data: { id: 1 },
  success(res) { console.log(res.data); },
  fail(err) { console.error(err); }
});

2. 数据存储

1
2
3
4
5
6
// 同步存储（简单场景）
wx.setStorageSync('userInfo', { name: '张三' });
const userInfo = wx.getStorageSync('userInfo');

// 异步存储（大数据场景）
wx.setStorage({ key: 'userInfo', data: { name: '张三' } });

3. 其他高频 API

  • 媒体：wx.chooseImage（选择图片）、wx.chooseVideo（选择视频）。
  • 位置：wx.getLocation（获取位置）、wx.openLocation（打开地图）。
  • 支付：wx.requestPayment（微信支付，需商户号配置）。

七、性能优化与安全

1. 性能优化核心手段

  • 分包加载：将非首屏页面放入分包，减少主包体积（主包≤2MB，单分包≤2MB，总代码≤20MB）。
  • 图片优化：使用 WebP 格式，开启懒加载，避免大图片直接渲染。
  • 虚拟列表：长列表使用 recycle-view 或第三方虚拟列表组件，减少 DOM 节点数。
  • **避免频繁 setData**：如上文所述，批量更新、精准更新。

2. 安全合规

  • 域名白名单：所有网络请求必须在小程序后台配置 HTTPS 域名。
  • 用户信息：使用 wx.getUserProfile 获取用户信息（替代旧接口 getUserInfo）。
  • 内容安全：涉及文本、图片内容，需调用 wx.cloud.callFunction 通过云函数进行内容安全检测。

第二部分：uni-app 跨端开发重点知识

uni-app 是基于 Vue.js 的跨端框架，一套代码可发布到微信小程序、H5、App、支付宝小程序等多个平台。

一、核心定位与原理

  • 核心优势：复用 Vue 语法，代码复用率高（80%+），生态丰富（插件市场、uni-ui 组件库）。
  • 实现原理：
    • 编译期：将 Vue 代码编译为各平台对应代码（如小程序的 WXML/WXSS、H5 的 HTML/CSS）。
    • 运行期：通过适配层抹平各平台 API 差异，提供统一的 uni.xxx API。

二、开发环境与项目结构

1. 开发工具

  • 推荐：HBuilderX（官方 IDE，内置 uni-app 模板、编译器、调试器）。
  • 替代：VS Code + uni-app 插件（适合习惯 VS Code 的开发者）。

2. 项目核心结构

1
2
3
4
5
6
7
8
├── pages.json        # 全局页面配置（替代小程序的 app.json）
├── manifest.json     # 应用配置（各平台专属配置：AppID、图标等）
├── App.vue           # 应用根组件（替代小程序的 app.js/app.wxss）
├── main.js           # 入口文件
├── pages/            # 页面目录
├── components/       # 组件目录
├── static/           # 静态资源
└── uni_modules/      # 插件市场安装的插件

三、核心开发语法（Vue 优先，平台兼容）

1. 页面与组件写法（完全 Vue 语法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">点击</button>
    <view v-for="item in list" :key="item.id">{{ item.name }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app',
      list: []
    };
  },
  onLoad(options) { /* uni-app 生命周期：兼容小程序 + Vue */ },
  methods: {
    handleClick() {
      uni.showToast({ title: '点击成功' }); // 统一 API：替代 wx.showToast
    }
  }
};
</script>

<style scoped>
.container { padding: 20px; }
</style>

2. 统一 API（uni.xxx）

uni-app 抹平了各平台 API 差异，统一使用 uni.xxx 调用：

原生小程序 API uni-app 统一 API 支持平台
wx.request uni.request 全平台
wx.setStorageSync uni.setStorageSync 全平台
wx.showToast uni.showToast 全平台

四、跨端核心：条件编译

处理平台差异的核心手段，通过注释语法在编译期只保留目标平台代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// #ifdef MP-WEIXIN
console.log('仅微信小程序执行');
uni.showModal({ title: '微信专属提示' });
// #endif

// #ifdef H5
console.log('仅 H5 执行');
document.title = 'H5 页面标题';
// #endif

// #ifdef APP-PLUS
console.log('仅 App 执行');
plus.device.getInfo(); // 调用 App 原生 API
// #endif

常用平台标识：MP-WEIXIN（微信小程序）、MP-ALIPAY（支付宝小程序）、H5、APP-PLUS（App）。

五、工程化：打包与发布

1. 各平台打包流程

目标平台 打包步骤
微信小程序 1. HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具；
2. 在微信开发者工具中上传代码，提交审核。
H5 1. HBuilderX → 发行 → 网站-H5手机版；
2. 生成 unpackage/dist/build/h5 目录，部署到服务器。
App 1. HBuilderX → 发行 → 原生App-云打包；
2. 配置证书、图标，生成 apk（Android）或 ipa（iOS）。

2. 性能优化（uni-app 特有）

  • 分包加载：在 pages.json 中配置 subPackages，与小程序一致。
  • 组件按需引入：使用 uni-ui 时，通过 easycom 自动按需引入（无需手动 import）。
  • 图片优化：静态图片放入 static 目录，大图片使用 CDN，开启 lazy-load。

六、uni-app 生态与最佳实践

  • 组件库：uni-ui（官方组件库，全端兼容）、uView UI（社区热门组件库）。
  • 状态管理：支持 Vuex、Pinia，与 Vue 项目完全一致。
  • 插件市场：DCloud 插件市场，提供丰富的跨端插件（如支付、地图、分享）。

第三部分：原生小程序 vs uni-app 选型建议

维度 微信小程序原生开发 uni-app 跨端开发
适用场景 仅需开发微信小程序，追求极致性能 需同时发布多平台（小程序+H5+App），追求开发效率
学习成本 需学习小程序专属语法 有 Vue 基础即可快速上手
性能 最优（无框架适配层） 略低于原生（但 95% 场景无感知）
生态 微信官方生态完善 跨端生态丰富，插件市场强大

以上是微信小程序与 uni-app 开发的完整知识体系，重点掌握原生双线程模型、生命周期、setData 优化以及 uni-app 条件编译、统一 API、跨端打包，结合项目实践即可快速落地。

#小程序 #uniapp
微信小程序及uniapp跨端开发
https://cszy.top/20260215-微信小程序及uniapp跨端开发/
作者
csorz
发布于
2026年2月15日
许可协议