当前位置：首页 > news >正文

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

news 2026/8/14 23:51:46

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 --><viewclass="container"><text>Hello, 小程序!</text><buttonbindtap="handleClick">点击我</button><imagesrc="/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.jsPage({data:{message:'欢迎使用小程序'},handleClick:function(){wx.showToast({title:'按钮被点击了！',icon:'success'})},onLoad:function(){console.log('页面加载完成')}})

5. 小程序生命周期

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

// app.jsApp({// 小程序初始化完成时触发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})// 读取数据constuserInfo=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 --><viewclass="container"><viewclass="header"><text>我的待办事项</text><textclass="count">共{{todos.length}}项</text></view><viewclass="todo-list"><blockwx:for="{{todos}}"wx:key="id"><viewclass="todo-item {{item.completed ? 'completed' : ''}}"><checkboxchecked="{{item.completed}}"bindtap="toggleTodo"data-id="{{item.id}}"></checkbox><textclass="todo-text">{{item.text}}</text><buttonclass="delete-btn"bindtap="deleteTodo"data-id="{{item.id}}">删除</button></view></block></view><viewclass="empty"wx:if="{{todos.length === 0}}"><text>暂无待办事项，点击下方添加</text></view></view>