小程序快速开发入门指南：你必须掌握的基础知识

SmileNicky

发布于 2026-05-11 07:59:17

190

文章被收录于专栏：Nicky's blogNicky's blog

🚀 小程序快速开发入门指南：你必须掌握的基础知识

本文面向零基础或刚入门的开发者，系统梳理小程序开发的核心知识点，助你快速上手，少走弯路。

一、小程序是什么？

小程序是一种无需下载安装、即用即走的轻量级应用。它运行在微信、支付宝、抖音等超级App内部，兼具原生App的体验和Web网页的便捷性。

二、开发前准备：环境搭建

2.1 注册账号

访问微信公众平台注册小程序账号
获取 AppID（小程序的唯一标识，开发必备）

2.2 下载开发工具

微信官方提供 微信开发者工具（IDE）
支持代码编辑、实时预览、调试、上传发布

2.3 项目结构初识

project/
├── pages/              # 页面目录
│   ├── index/          # 首页
│   │   ├── index.wxml  # 页面结构（类似HTML）
│   │   ├── index.wxss  # 页面样式（类似CSS）
│   │   ├── index.js    # 页面逻辑（JavaScript）
│   │   └── index.json  # 页面配置
├── app.js              # 小程序全局逻辑
├── app.json            # 全局配置（页面路由、窗口样式等）
├── app.wxss            # 全局样式
└── project.config.json # 项目配置文件

三、核心技术栈：三驾马车

小程序开发主要基于微信自研的三套技术，与传统Web开发对应关系如下：

小程序技术	对应Web技术	作用
WXML	HTML	描述页面结构
WXSS	CSS	描述页面样式
JavaScript	JavaScript	处理业务逻辑

3.1 WXML（WeiXin Markup Language）

WXML是小程序的标签语言，语法与HTML高度相似，但增加了一些特性：

<!-- 数据绑定 -->
<view>{{ message }}</view>

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

<!-- 条件渲染 -->
<view wx:if="{{ isLogin }}">欢迎回来</view>
<view wx:else>请先登录</view>

核心概念：

数据绑定：使用 {{ }} 将JS数据渲染到视图
列表渲染：wx:for 循环渲染数组
条件渲染：wx:if / wx:else 控制显示隐藏

3.2 WXSS（WeiXin Style Sheets）

WXSS是小程序的样式语言，基本兼容CSS，并增加了两个重要特性：

/* 1. rpx 自适应单位 */
.container {
  width: 750rpx;  /* 屏幕总宽度，自动适配各种机型 */
  height: 200rpx;
}

/* 2. @import 导入外联样式 */
@import "common.wxss";

/* 3. 样式选择器（与CSS基本一致） */
.title { font-size: 32rpx; }
#header { background: #fff; }

关键知识点：

rpx（responsive pixel）：屏幕宽度固定为750rpx，自动换算，解决适配难题
全局样式 vs 局部样式：app.wxss 全局生效，页面 .wxss 仅对当前页生效

3.3 JavaScript 逻辑层

小程序的JS文件负责数据管理、事件处理、网络请求：

// pages/index/index.js
Page({
  // 1. 页面初始数据
  data: {
    message: 'Hello 小程序',
    count: 0
  },

  // 2. 生命周期函数
  onLoad() {
    console.log('页面加载')
    this.fetchData()
  },

  // 3. 事件处理函数
  handleTap() {
    // 修改数据必须用 this.setData()
    this.setData({
      count: this.data.count + 1
    })
  },

  // 4. 网络请求
  fetchData() {
    wx.request({
      url: 'https://api.example.com/data',
      success: (res) => {
        this.setData({ list: res.data })
      }
    })
  }
})

⚠️ 重要提醒： 修改页面数据必须使用 this.setData()，直接赋值不会更新视图！

四、核心机制：必须理解的原理

4.1 双线程架构

小程序采用**逻辑层（JS）和视图层（WXML/WXSS）**分离的双线程模型：

逻辑层：运行在JSCore中，负责数据处理和业务逻辑
视图层：负责界面渲染
通信：两者通过 Native层 异步通信，通过 setData 传递数据

4.2 生命周期

理解页面从创建到销毁的整个过程：

页面加载流程：
onLoad → onShow → onReady → 用户交互 → onHide/onUnload

常用生命周期：
├── onLoad: 页面创建时触发（只触发一次）
├── onShow: 页面显示时触发（每次进入都触发）
├── onReady: 页面初次渲染完成
├── onHide: 页面隐藏（如跳转到其他页面）
└── onUnload: 页面销毁

4.3 页面路由与导航

// 保留当前页，跳转到新页面
wx.navigateTo({ url: '/pages/detail/detail?id=123' })

// 关闭当前页，跳转到新页面
wx.redirectTo({ url: '/pages/home/home' })

// 跳转到TabBar页面
wx.switchTab({ url: '/pages/index/index' })

// 返回上一页
wx.navigateBack({ delta: 1 })

五、组件与API：官方利器

5.1 基础组件

小程序提供丰富的内置组件，开箱即用：

<!-- 基础内容 -->
<text>文本内容</text>
<image src="/images/logo.png" mode="aspectFit"></image>

<!-- 表单组件 -->
<input placeholder="请输入" bindinput="onInput" />
<button bindtap="submit">提交</button>

<!-- 视图容器 -->
<view class="container">块级容器</view>
<scroll-view scroll-y>可滚动区域</scroll-view>
<swiper autoplay>轮播图</swiper>

5.2 常用API

API类别	代表功能	使用场景
网络	wx.request	发起HTTP请求
存储	wx.setStorageSync	本地数据缓存
媒体	wx.chooseImage	选择图片/拍照
位置	wx.getLocation	获取地理位置
界面	wx.showToast	显示提示弹窗
开放能力	wx.login	微信登录授权