【前端修炼手册】从 0 到 1 搞个微信小程序？看这篇就够了

LotteChar

于 2025-07-07 09:22:51 发布

阅读量1.3k

点赞数 43

CC 4.0 BY-SA版权

文章标签：微信小程序

本文链接：https://blog.csdn.net/zj0411zdh/article/details/149165580

一、开工前准备：先把 "装备" 搞齐全

1. 注册小程序账号：像填相亲表格一样认真

首先打开微信公众平台（微信公众平台），点击 "立即注册"。

划重点：

选 "小程序" 类型，别手滑点成公众号（毕竟咱要的是能蹦跶的小程序，不是发文章的公众号）

邮箱记得用常用的，不然回头忘记密码找回来比找对象还难

个人 / 企业账号按需选择，个人账号不能搞支付功能，企业账号记得准备营业执照（给小程序上 "户口"）

注册成功后，你会得到一个神秘代码 ——AppID，这玩意儿相当于小程序的 "身份证号"，先记小本本上，后面要用到！

2. 下载开发者工具：迎娶你的 "开发白富美"

微信官方贴心准备了开发者工具，根据你的电脑系统（Windows/Mac）选对应的版本，下载速度取决于你的网速（建议避开晚上高峰，不然下载进度条比蜗牛爬还慢）。

安装完成打开界面长这样：

二、创建项目：从 "毛坯房" 到 "精装房"

1. 新建项目：给小程序搭个 "窝"

打开开发者工具，点击 "新建项目"：

项目名称随便起（别叫 "微信爸爸" 就行，怕他不认）

目录选个干净的文件夹，别和乱七八糟的文件挤在一起

输入之前拿到的 AppID（没有的话先用 "测试号"，但正式上线必须换真・AppID）

点击 "新建"，恭喜！你的第一个小程序 "毛坯房" 诞生了！此时项目结构长这样：

my-cool-miniprogram/

├── app.js # 全局大脑，管着整个小程序的逻辑

├── app.json # 全局户口本，记录页面路径、窗口样式等

├── app.wxss # 全局梳妆台，设置整个小程序的颜值

├── pages/ # 页面文件夹，每个页面都是一个小房间

│ ├── index/ # 首页，相当于客厅

│ └── logs/ # 日志页，相当于日记本

└── utils/ # 工具人文件夹，放常用的小工具函数

2. 删掉没用的 "垃圾"：轻装上阵

默认生成的logs页面咱们用不到，直接右键删掉！然后修改app.json里的pages数组，只保留index页面：

{

"pages": ["pages/index/index"], // 只留首页，清爽！

"window": {

"navigationBarTitleText": "我的第一个小程序", // 顶部标题别太土气

"navigationBarBackgroundColor": "#409EFF" // 换个好看的蓝色，比默认灰好看100倍

}

}

三、实战开发：搞个能 "打勾" 的 TODO 列表（附魔性代码）

1. 页面结构（.wxml）：先把架子搭起来

打开pages/index/index.wxml，写下你的第一个小程序标签：

<!-- 输入框：让用户告诉小程序要做什么 -->
<view class="input-box">
  <input 
    placeholder="比如：今晚搞定小程序作业" 
    bindinput="handleInput"  // 绑定输入事件，小程序实时接收用户输入
    value="{{inputValue}}"  // 双向绑定，让输入框记住用户写的内容
  />
  <button type="primary" bindtap="addTodo">添加任务</button>  // 按钮，点击时添加任务
</view>

<!-- 任务列表：展示用户添加的任务 -->
<view class="todo-list">
  <view 
    class="todo-item {{todo.done ? 'done' : ''}}"  // 给完成的任务加个划掉效果
    bindtap="toggleTodo"  // 点击任务切换完成状态
    data-index="{{index}}"  // 传下标，告诉小程序点的是哪个任务
    wx:for="{{todos}}"  // 循环渲染任务列表，有多少条任务就生成多少个item
    wx:key="id"  // 必须加key，不然小程序会生气（报错）
  >
    {{todo.text}}  // 显示任务内容
    <button 
      type="warn" 
      size="mini" 
      bindtap="deleteTodo" 
      data-index="{{index}}"  // 传下标，告诉小程序删哪个任务
    >删除</button>
  </view>
</view>

2. 页面逻辑（.js）：让小程序 "动" 起来

打开pages/index/index.js，在Page里写下逻辑代码：

Page({
  data: {
    inputValue: '',  // 输入框里的内容，初始为空
    todos: []  // 任务列表，初始是空数组
  },

  // 输入框内容变化时触发，实时更新inputValue
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value  // 把用户输入的内容赋值给inputValue
    });
  },

  // 点击添加任务按钮时触发
  addTodo() {
    if (!this.data.inputValue.trim()) {  // 如果输入框是空的，提醒用户
      wx.showToast({ title: '任务内容不能为空！', icon: 'none' });
      return;
    }
    this.setData({
      todos: [...this.data.todos, {  // 往todos数组里加一个新任务
        id: Date.now(),  // 用当前时间戳作为任务id，保证唯一
        text: this.data.inputValue,  // 任务内容
        done: false  // 初始状态是未完成
      }],
      inputValue: ''  // 清空输入框，准备写下一个任务
    });
  },

  // 点击任务切换完成状态
  toggleTodo(e) {
    const index = e.currentTarget.dataset.index;  // 获取点击的任务下标
    const todos = this.data.todos;
    todos[index].done = !todos[index].done;  // 取反，完成变未完成，反之亦然
    this.setData({ todos });  // 更新数据，页面会自动刷新
  },

  // 删除任务
  deleteTodo(e) {
    const index = e.currentTarget.dataset.index;  // 获取要删除的任务下标
    const todos = this.data.todos;
    todos.splice(index, 1);  // 从数组里删掉该任务
    this.setData({ todos });  // 更新数据
  }
});

3. 页面样式（.wxss）：让界面变漂亮

打开pages/index/index.wxss，给页面加点 "化妆品"：

.input-box {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input {
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 40rpx;
  padding: 0 40rpx;
}

.todo-list {
  padding: 20rpx;
}

.todo-item {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.done {
  text-decoration: line-through;  // 给完成的任务加划掉效果
  color: #999;  // 颜色变灰，假装任务"过气"了
}

button {
  margin-left: 20rpx;
  padding: 0 40rpx;
}