← 返回首页

第1章: 微信小程序入门

开启微信小程序开发之旅

什么是微信小程序？

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。

小程序的特点

无需安装：用完即走，不占用手机空间
体验流畅：接近原生APP的体验
开发成本低：一次开发，多端运行
获客成本低：依托微信10亿+用户
功能丰富：支持支付、定位、扫码等
易于传播：可分享到聊天和朋友圈

💡 提示： 小程序的代码包大小限制为2MB（主包）+ 20MB（分包）。

小程序 vs 公众号 vs APP

对比项	小程序	公众号	原生APP
安装	无需安装	无需安装	需要下载安装
体验	接近原生	网页体验	最佳
开发成本	低	最低	高
功能	丰富	有限	最丰富
推广	易传播	易传播	难推广
适用场景	高频低频都可	内容传播	高频刚需

注册小程序账号

注册步骤

访问微信公众平台：https://mp.weixin.qq.com
点击"立即注册" → 选择"小程序"
填写账号信息（邮箱、密码）
邮箱激活
选择主体类型：
   - 个人：适合学习和个人项目
   - 企业：需要营业执照，功能更全
   - 政府/媒体/其他组织
填写主体信息
完成注册

⚠️ 注意： 个人主体的小程序不支持微信支付功能！

获取开发者凭证

AppID 和 AppSecret

登录小程序后台 → 开发 → 开发管理 → 开发设置

AppID (小程序ID): wxd1234567890abcde
AppSecret (小程序密钥): 点击"生成"按钮获取

⚠️ AppSecret 非常重要，请妥善保管！

服务器域名配置

小程序只能访问配置过的合法域名。

开发 → 开发管理 → 开发设置 → 服务器域名

需要配置：
- request合法域名（网络请求）
- socket合法域名（WebSocket）
- uploadFile合法域名（上传文件）
- downloadFile合法域名（下载文件）

要求：
✓ 必须是 HTTPS
✓ 必须备案
✓ 不能是IP地址
✓ 不能带端口号

安装开发工具

微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

支持的平台

Windows 64位
macOS
Linux

主要功能

代码编辑：支持语法高亮、代码补全
模拟器：模拟小程序在手机上的表现
调试器：类似Chrome DevTools
编译预览：实时预览代码效果
真机调试：在真实手机上调试
性能分析：分析小程序性能

创建第一个小程序

步骤

1. 打开微信开发者工具
2. 点击"+"创建项目
3. 填写项目信息：
   - 项目名称：HelloWorld
   - 目录：选择空文件夹
   - AppID：填写你的AppID（或选择测试号）
   - 开发模式：小程序
   - 后端服务：不使用云服务
   - 模板：不使用模板
4. 点击"新建"

小程序项目结构

miniprogram/
├── pages/              # 页面文件夹
│   ├── index/          # 首页
│   │   ├── index.js    # 页面逻辑
│   │   ├── index.json  # 页面配置
│   │   ├── index.wxml  # 页面结构
│   │   └── index.wxss  # 页面样式
│   └── logs/           # 日志页
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── utils/              # 工具函数
│   └── util.js
├── app.js              # 小程序逻辑
├── app.json            # 小程序配置
├── app.wxss            # 小程序样式
└── project.config.json # 项目配置

核心文件说明

文件	作用	必需
app.js	小程序逻辑（生命周期、全局数据）	✓
app.json	小程序配置（页面路径、窗口样式）	✓
app.wxss	小程序全局样式	✗
.wxml	页面结构（类似HTML）	✓
.wxss	页面样式（类似CSS）	✗
.js	页面逻辑（JavaScript）	✓
.json	页面配置	✗

Hello World 示例

1. app.json（全局配置）

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#f8f8f8"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2. pages/index/index.wxml（页面结构）

<view class="container">
  <text class="title">Hello World!</text>
  <text class="desc">欢迎来到微信小程序</text>
  <button type="primary" bindtap="onTap">点击我</button>
  <text class="result">{{message}}</text>
</view>

3. pages/index/index.wxss（页面样式）

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 60rpx;
}

button {
  width: 400rpx;
  margin-bottom: 40rpx;
}

.result {
  font-size: 32rpx;
  color: #ffd700;
  font-weight: bold;
}

4. pages/index/index.js（页面逻辑）

Page({
  // 页面数据
  data: {
    message: ''
  },

  // 生命周期：页面加载
  onLoad(options) {
    console.log('页面加载', options)
  },

  // 生命周期：页面显示
  onShow() {
    console.log('页面显示')
  },

  // 事件处理：按钮点击
  onTap() {
    this.setData({
      message: '你好，微信小程序！'
    })
    
    wx.showToast({
      title: '点击成功',
      icon: 'success'
    })
  }
})

小程序开发语言

WXML（WeiXin Markup Language）

类似HTML，用于描述页面结构。

<!-- HTML -->
<div class="box">
  <span>文本</span>
</div>

<!-- WXML -->
<view class="box">
  <text>文本</text>
</view>

WXSS（WeiXin Style Sheets）

类似CSS，用于描述页面样式。

/* 新增尺寸单位 rpx */
.box {
  width: 750rpx;  /* 750rpx = 屏幕宽度 */
  height: 200rpx;
}

/* 支持大部分CSS选择器 */
.container {
  display: flex;
  background-color: #fff;
}

JavaScript

小程序的脚本语言，但运行环境不是浏览器。

// 不支持 DOM 操作
// document.getElementById() ✗

// 使用小程序 API
wx.request()      // 网络请求
wx.showToast()    // 提示框
wx.navigateTo()   // 页面跳转

🎯 互动演示：rpx 单位转换

rpx（responsive pixel）是小程序的响应式尺寸单位。

规定：屏幕宽度 = 750rpx

屏幕宽度（px）：

rpx 值：

点击按钮查看结果

📝 章节练习

练习 1：小程序特点

小程序的主要优势是什么？

A. 功能比APP强大
B. 无需安装，用完即走
C. 可以完全替代APP

练习 2：文件类型

小程序页面结构文件的扩展名是？

A. .html
B. .wxml
C. .xml

练习 3：rpx 单位

在屏幕宽度为375px的设备上，100rpx等于多少px？

本章小结

小程序是无需安装的轻量级应用
注册小程序账号并获取AppID
安装微信开发者工具
了解小程序项目结构：app.js、app.json、pages
掌握WXML、WXSS、JavaScript三种开发语言
rpx是小程序的响应式尺寸单位（750rpx = 屏幕宽度）
创建第一个Hello World小程序