微信小程序基础开发：从零到一快速上手

system_error_x

墨衍会员 · AI 创作全网分发码龄3年

关注

原创 2026-08-13 10:27:07 521 阅读 AI 写同款· GEO 优化 ›

微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手阅读详情

1. 什么是微信小程序？

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

1.1 小程序的特点

无需安装：不占用手机存储空间
即用即走：使用方便，无需下载
开发门槛低：基于前端技术栈（HTML+CSS+JS）
跨平台：一次开发，多端运行（iOS、Android）
微信生态：天然拥有微信的社交能力和用户基础

2. 开发环境搭建

2.1 准备工作

注册微信小程序账号
- 访问微信公众平台
- 点击“立即注册”，选择“小程序”
- 按照指引完成注册流程
获取AppID
- 登录小程序后台
- 在“开发”->“开发设置”中获取AppID
- AppID是小程序的唯一标识，开发调试需要用到

2.2 安装开发者工具

下载微信开发者工具
根据操作系统选择对应版本（Windows/Mac）
安装并启动开发者工具

2.3 创建第一个小程序项目

打开微信开发者工具
点击“+”新建项目
填写项目信息：
- 项目名称：MyFirstMiniProgram
- 目录：选择本地文件夹
- AppID：填写获取的AppID（或使用测试号）
- 开发模式：小程序
- 后端服务：不使用云服务
点击“新建”完成创建

3. 小程序项目结构

创建成功后，你会看到以下目录结构：

my-first-miniprogram/
├── pages/           # 页面目录
│   ├── index/       # 首页
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.json   # 页面配置
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式
│   └── logs/        # 日志页
├── utils/           # 工具类
├── app.js           # 小程序逻辑
├── app.json         # 小程序公共配置
├── app.wxss         # 小程序公共样式
└── project.config.json  # 项目配置

3.1 核心文件说明

app.js：小程序入口文件，注册小程序生命周期函数
app.json：全局配置文件，设置页面路径、窗口样式等
app.wxss：全局样式文件
pages/：存放所有小程序页面
utils/：工具函数目录

4. 小程序基础语法

4.1 WXML（WeiXin Markup Language）

WXML是小程序的标签语言，类似于HTML：

<!-- pages/index/index.wxml -->
<view class="container">
  <text>Hello, 小程序!</text>
  <button bindtap="handleClick">点击我</button>
  <image src="/images/logo.png" mode="aspectFit"></image>
</view>

4.2 WXSS（WeiXin Style Sheets）

WXSS是小程序的样式语言，基于CSS扩展：

/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

text {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

button {
  background-color: #07c160;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

4.3 JavaScript逻辑层

// pages/index/index.js
Page({
  data: {
    message: '欢迎使用小程序'
  },
  
  handleClick: function() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    })
  },
  
  onLoad: function() {
    console.log('页面加载完成')
  }
})

5. 小程序生命周期

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

// app.js
App({
  // 小程序初始化完成时触发
  onLaunch: function(options) {
    console.log('小程序启动')
  },
  
  // 小程序显示到前台时触发
  onShow: function(options) {
    console.log('小程序显示')
  },
  
  // 小程序隐藏到后台时触发
  onHide: function() {
    console.log('小程序隐藏')
  }
})

5.2 页面生命周期

// 页面.js文件
Page({
  // 页面加载时触发
  onLoad: function(options) {
    console.log('页面加载', options)
  },
  
  // 页面初次渲染完成时触发
  onReady: function() {
    console.log('页面渲染完成')
  },
  
  // 页面显示时触发
  onShow: function() {
    console.log('页面显示')
  },
  
  // 页面隐藏时触发
  onHide: function() {
    console.log('页面隐藏')
  },
  
  // 页面卸载时触发
  onUnload: function() {
    console.log('页面卸载')
  }
})

6. 常用API示例

6.1 网络请求

// 发起GET请求
wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log('请求成功', res.data)
  },
  fail: function(err) {
    console.log('请求失败', err)
  }
})

6.2 本地存储

// 存储数据
wx.setStorageSync('userInfo', {name: '张三', age: 25})

// 读取数据
const userInfo = wx.getStorageSync('userInfo')
console.log(userInfo)

// 异步存储
wx.setStorage({
  key: 'token',
  data: 'abc123',
  success: function() {
    console.log('存储成功')
  }
})

6.3 界面交互

// 显示提示框
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
})

// 显示加载框
wx.showLoading({
  title: '加载中...',
  mask: true
})

// 隐藏加载框
wx.hideLoading()

// 显示模态对话框
wx.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

7. 实战：创建一个待办事项小程序

7.1 项目结构

todo-miniprogram/
├── pages/
│   ├── index/       # 首页
│   └── add/         # 添加页面
├── app.js
├── app.json
└── app.wxss

7.2 app.json配置

{
  "pages": [
    "pages/index/index",
    "pages/add/add"
  ],
  "window": {
    "navigationBarTitleText": "待办事项",
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/add/add",
        "text": "添加",
        "iconPath": "images/add.png",
        "selectedIconPath": "images/add-active.png"
      }
    ]
  }
}

7.3 首页实现

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="header">
    <text>我的待办事项</text>
    <text class="count">共{{todos.length}}项</text>
  </view>
  
  <view class="todo-list">
    <block wx:for="{{todos}}" wx:key="id">
      <view class="todo-item {{item.completed ? 'completed' : ''}}">
        <checkbox checked="{{item.completed}}" bindtap="toggleTodo" data-id="{{item.id}}"></checkbox>
        <text class="todo-text">{{item.text}}</text>
        <button class="delete-btn" bindtap="deleteTodo" data-id="{{item.id}}">删除</button>
      </view>
    </block>
  </view>
  
  <view class="empty" wx:if="{{todos.length === 0}}">
    <text>暂无待办事项，点击下方添加</text>
  </view>
</view>