微信创建小程序
-
2026-10-18
昆明
- 返回列表
在移动互联网时代，微信小程序以其“无需下载、即用即走”的特性，成为连接用户与服务的重要桥梁。无论是个人开启者展示作品，还是中小企业拓展线上业务，创建一个属于自己的小程序都已成为一项基础且实用的技能。本文将以蕞清晰的教程风格，为你拆解从注册到上线的全流程，即使你是零基础的初学者，也能跟着步骤一步步完成。我们将避开复杂的理论，专注于可操作的实践，让你快速拥有自己的第一个小程序。
第一步：前期准备与账号注册
核心要点： 完成开启者身份认证与信息准备。
1. 访问注册平台
打开浏览器，访问微信公众平台官网。在页面右上角点击“迅速注册”按钮。
2. 选择账号类型
在注册类型选择页面，找到并点击“小程序”选项。请注意，小程序账号与公众号账号是独立的，需单独注册。
3. 填写基本信息
邮箱： 使用一个未被微信公众平台注册、未被个人微信号绑定的邮箱地址。
密码： 设置你的账号密码。
确认密码： 再次输入密码。
填写完毕后，勾选同意协议，点击“注册”按钮。系统会向你的邮箱发送一封激活邮件。
4. 激活邮箱与信息登记
登录邮箱查收激活邮件，点击邮件内的链接完成激活。随后进入“信息登记”环节，这是蕞关键的一步。
主体类型选择： 根据你的情况选择。个人开启者请选择“个人”，并按要求填写身份证、手机号等信息进行实名认证。企业或组织请选择对应的主体类型（如企业、、媒体等），并准备好营业执照、对公账户等信息进行认证。
管理员信息绑定： 登记使用你个人微信扫码，成为该小程序的管理员。此微信将用于日常登录、版本发布等操作。
5. 设置小程序基础信息
完成主体信息登记后，进入小程序后台。你需要设置：
小程序名称： 起一个简单好记、与内容相关的名字。名称审核通过后，一年内可修改2次。
头像： 上传一张清晰、有辨识度的图片作为Logo。
小程序介绍： 用一两句话简要说明小程序的功能或服务。
填写完成后提交，等待审核（通常很快）。
第二步：安装开发工具与创建项目
核心要点： 搭建本地开发环境。
1. 下载开启者工具
回到微信公众平台，在顶部菜单“开发”->“开发工具”中，找到“微信开启者工具”的下载链接。根据你的电脑操作系统（Windows或Mac）下载对应的安装包。
2. 安装与登录
运行安装包，按照提示完成安装。初次打开开启者工具，需要使用小程序管理员微信扫码登录。
3. 创建新项目
点击工具界面上的“+”号或“新建项目”按钮，进入创建页面。
项目目录： 在你的电脑上选择一个空文件夹，用于存放项目代码。
AppID： 在微信公众平台的小程序后台“开发”->“开发管理”->“开发设置”中，可以找到你的小程序仅此标识（AppID）。复制并粘贴到此栏。（若仅学习预览，可选择“测试号”）
项目名称： 给你的本地项目起个名字。
模板选择： 初学者建议直接选择“小程序（JS）基础模板”。
点击“新建”，一个包含基础代码结构的小程序项目就创建成功了。
第三步：认识项目结构与核心文件
核心要点： 了解每个文件的作用，才能有效修改。
打开项目后，左侧是文件目录树，主要包含以下核心文件：
`app.js`：小程序逻辑文件。处理小程序的生命周期（启动、显示、隐藏等）和全局数据。
`app.json`：小程序全局配置文件。在这里设置小程序的所有页面路径、窗口样式（导航栏颜色、标题等）、底部Tab栏等。
`app.wxss`：小程序全局样式文件。定义整个小程序公用的CSS样式。
`project.config.json`：项目配置文件。保存你在开启者工具中的个性化设置（如界面颜色、编译设置等），通常无需手动修改。
`pages` 文件夹：页面文件夹。小程序每个页面都由一个文件夹构成，里面通常包含四个同名文件：
`.js` 文件：页面逻辑文件，处理页面数据与交互。
`.wxml` 文件：页面结构文件，类似HTML，用于搭建页面骨架。
`.wxss` 文件：页面样式文件，类似CSS，用于美化当前页面。
`.json` 文件：页面配置文件，用于配置当前页面的窗口表现。
第四步：动手开发第一个页面
核心要点： 通过修改代码实现页面变化。
1. 修改页面内容（.wxml文件）
在 `pages/index` 目录下，打开 `index.wxml` 文件。你会看到模板自带的代码。将其内容替换为更简单的结构，例如：
```html
```
这里，`
2. 添加交互逻辑（.js文件）
打开同目录下的 `index.js` 文件。在 `Page({ })` 函数内部，添加一个事件处理函数：
```javascript
Page({
// 页面初始数据
},
onTapButton: function {
wx.showToast({
title: '按钮被点击了！',
icon: 'success'
})
})
```
这段代码为按钮点击定义了一个动作：显示一个提示框。
3. 美化页面样式（.wxss文件）
打开 `index.wxss` 文件，添加一些样式：
```css
container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 40rpx;
text {
font-size: 40rpx;
color: 07c160;
margin-bottom: 40rpx;
button {
width: 80%;
```
`rpx` 是微信小程序自适应的尺寸单位。
4. 实时预览
保存所有文件后，开启者工具左侧的模拟器会自动刷新，你就能迅速看到修改后的页面效果。点击按钮，会弹出成功提示。
第五步：真机预览与上传代码
核心要点： 在手机上测试并提交审核。
1. 真机预览
在开启者工具顶部菜单栏点击“预览”按钮，会生成一个二维码。使用管理员微信扫描此二维码，即可在真实手机上运行和测试你的小程序，检查实际体验。
2. 上传代码
测试无误后，点击开启者工具顶部的“上传”按钮。填写本次上传的版本号和项目备注（用于自己区分每次修改的内容）。点击“上传”，代码将被压缩打包提交到微信后台的“开发版本”列表中。
3. 提交审核与发布
登录微信公众平台小程序后台，进入“管理”->“版本管理”。
在“开发版本”中，找到你刚上传的版本，点击“提交审核”。
根据提示填写审核信息，包括功能描述、测试账号等（如果小程序需要登录）。
提交后，等待微信官方审核（通常需要1-7个工作日）。
审核通过后，你会在后台收到通知。在“审核版本”中点击“发布”，你的小程序就将正式上线，对所有微信用户可见。
通过以上五个步骤——注册账号、安装工具、认识结构、开发页面、预览发布——你已经完成了一个微信小程序从零到上线的完整闭环。这个过程的核心在于动手实践：不要被代码吓倒，从修改模板开始，每一次保存和预览都能给你即时的反馈。记住，复杂的应用也是由一个个简单的页面和功能组合而成。接下来，你可以继续深入学习WXML语法、WXSS布局、JS API调用（如获取用户信息、发起网络请求等）以及小程序云开发能力，逐步打造出功能更丰富的小程序。现在，你已经拿到了入门钥匙，剩下的就是发挥你的创意，开始构建属于自己的数字世界了。
