微信小程序开发教程：从零基础到上线全流程实战指南

前言：为什么零基础也能学会小程序开发？
微信小程序作为微信生态下的轻量级应用，核心优势是“即用即走”，无需下载安装，可直接通过微信扫码、搜索访问，目前已覆盖200多个细分行业，日活突破6亿，市场需求持续旺盛。从技术层面来说，小程序开发门槛远低于传统APP，核心依赖微信官方提供的框架和工具，无需自建服务器（可选云开发），且语法贴近基础前端知识，零基础者只要遵循标准化流程，循序渐进练习，1-2周可掌握基础开发，1个月内可完成简单小程序并上线。

学习提示：本文不追求复杂理论堆砌，所有知识点均配套实战操作，每一步都标注清晰，建议边看教程边动手操作，遇到问题优先查看微信官方文档（最权威），其次对照本文避坑要点排查，高效突破学习难点。

第一阶段：前期准备（1天搞定，奠定基础）

前期准备是小程序开发的前提，核心分为3步：明确开发方向、注册小程序账号、安装开发工具，全程无技术门槛，按步骤操作即可。

1.1 明确开发方向（避免盲目动手）

零基础建议从“简单实用”的小程序入手，优先选择无需复杂后端逻辑的类型，例如：个人笔记、天气查询、简易计算器、商品展示页等，避免一开始挑战电商、社交类复杂小程序（需涉及支付、用户登录等多模块，难度较高）。

本次实战案例：我们将开发一个“简易个人笔记小程序”，实现“新建笔记、查看笔记、删除笔记”3个核心功能，覆盖小程序开发的基础语法、页面跳转、数据存储等核心知识点，学会后可快速迁移到其他简单小程序开发中。

1.2 注册微信小程序账号（获取AppID，关键步骤）

AppID是小程序的“身份证”，用于开发工具调试、小程序上线审核，没有AppID无法完成后续上线操作，注册全程免费（企业/个体工商户认证需300元/年，个人主体无需认证）。

具体操作步骤：

1. 打开微信公众平台官网：https://mp.weixin.qq.com/，点击右上角「立即注册」，选择「小程序」（注意：不要选公众号、视频号等，避免选错）。

2. 填写注册信息：输入邮箱、密码、确认密码，勾选协议后点击「注册」，随后前往邮箱接收验证邮件，点击邮件中的验证链接，完成邮箱验证。

3. 选择主体类型：根据自身情况选择，个人开发者选“个人主体”（仅支持展示类、工具类功能，无法开通微信支付），企业/个体工商户选“企业主体”（可开通支付、认证后有更多权限），填写主体信息（个人主体需输入姓名、身份证号、手机号，完成微信实名认证）。

4. 完善小程序基础信息：填写小程序名称、头像、简介，选择服务类目（个人主体可选择“工具-笔记”“工具-计算器”等，无需特殊资质），点击「完成」，即可完成账号注册。

5. 获取AppID：注册成功后，进入小程序后台（mp.weixin.qq.com），点击左侧菜单栏「开发管理」→「开发设置」，找到「AppID」，点击「复制」，保存到记事本中，后续开发工具配置会用到（注意：不要泄露AppID，避免被他人滥用）。

避坑要点：① 邮箱需未注册过微信公众平台、视频号、企业微信，否则无法注册；② 主体信息填写后不可随意修改，个人主体无法升级为企业主体；③ 若仅用于学习，可暂不完善服务类目，不影响本地调试，但上线前必须补充完整。

1.3 安装微信开发者工具（开发、调试的核心工具）

微信开发者工具是官方提供的免费工具，集成了代码编辑、模拟器、调试器、真机预览等功能，支持Windows、Mac、Linux系统，无需额外安装其他软件，按系统版本下载安装即可。

具体操作步骤：

1. 打开开发者工具下载官网：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，根据自己的电脑系统（Windows/macOS）选择对应版本下载（建议下载稳定版，避免beta版出现兼容性问题）。

2. 安装工具：双击下载的安装包，按照提示下一步操作即可（Windows系统可默认安装路径，Mac系统拖拽到应用程序中），安装完成后启动工具。

3. 登录工具：启动后，使用微信扫码登录（需与注册小程序账号的微信一致），登录后即可进入工具主界面。

工具界面介绍（简单了解，后续实战会详细使用）：登录后，工具顶部为菜单栏（文件、编辑、调试等），左侧为模拟器（预览小程序效果），中间为代码编辑区（编写小程序代码），右下方为调试区（排查代码错误），布局清晰，新手无需刻意记忆，动手操作后可快速熟悉。

避坑要点：① 安装后若无法启动，检查电脑是否安装了微信（需最新版本），未安装微信会导致无法扫码登录；② Mac系统若提示“无法打开，因为它来自身份不明的开发者”，可在「系统设置」→「隐私与安全性」中，点击“允许打开”。

第二阶段：基础入门（2-3天，掌握核心语法）

这一阶段是核心，我们将从“新建项目”开始，逐步学习小程序的项目结构、基础语法、页面布局，配套实战操作，确保零基础也能看懂、会写，重点掌握“WXML、WXSS、JS”三种核心文件的用法（类比HTML、CSS、JavaScript，语法更简洁）。

2.1 新建小程序项目（首次上手，关键一步）

打开微信开发者工具，登录后点击主界面「+新小程序项目」，填写项目信息，按以下要求配置（重点关注AppID和项目路径）：

1. 项目名称：填写“简易个人笔记”（可自定义，建议简洁明了）；

2. 目录：点击「选择」，新建一个空文件夹（建议放在桌面，方便查找），选中该文件夹作为项目目录（注意：文件夹必须为空，否则无法新建项目）；

3. AppID：粘贴第一阶段获取的个人AppID（若未注册，可选择“测试号”，但测试号无法上线，仅适合临时调试）；

4. 后端服务：选择「不使用云服务」（零基础先掌握本地开发，后续可学习云开发，无需自建服务器）；

5. 模板选择：选择「官方提供的JS基础模板」（默认模板，包含基础项目结构，无需从零编写）；

6. 勾选「不校验合法域名、web-view（业务域名）等」（仅用于本地调试，上线前需取消勾选，否则无法正常访问网络接口）；

7. 点击「创建」，等待1-2秒，即可完成项目创建，进入工具主界面，此时模拟器中会显示默认的“首页”效果（Hello World）。

避坑要点：① 项目目录必须是空文件夹，否则会提示“目录已存在非空文件”；② 不要随意修改默认模板中的核心文件名称（如app.js、app.json），否则会导致项目报错；③ 若粘贴AppID后提示“无效AppID”，检查是否复制错误（区分大小写），或小程序账号未完成实名认证。

2.2 小程序项目结构解析（看懂文件用途，不迷路）

新建项目后，左侧「资源管理器」中会显示小程序的完整项目结构，所有文件按功能分类，核心文件只有5个，其他文件可根据需求新增，零基础只需掌握核心文件的用途即可，具体结构如下（结合实战案例说明）：

jianyi-biji/  // 项目根目录（自定义名称，即我们新建的空文件夹）
├── app.js     // 小程序入口文件，全局逻辑（整个小程序的“大脑”）
├── app.json   // 全局配置文件，控制小程序的窗口样式、页面路径等
├── app.wxss   // 全局样式文件，控制所有页面的公共样式（如字体、颜色）
├── project.config.json // 项目配置文件，仅用于开发时（如开发者工具设置），不上线
├── sitemap.json // 小程序搜索配置文件，控制页面是否被微信索引（上线前配置）
└── pages/     // 页面文件夹，所有页面都存放在这里（核心文件夹）
    ├── index/ // 首页文件夹（默认生成，我们将作为“笔记列表页”）
    │   ├── index.js   // 首页逻辑文件（处理首页的点击、数据展示等）
    │   ├── index.wxml // 首页结构文件（编写首页的页面布局，如文字、按钮）
    │   ├── index.wxss // 首页样式文件（仅控制首页的样式，不影响其他页面）
    │   └── index.json // 首页配置文件（可覆盖全局配置，如单独设置首页标题）
    └── addNote/ // 新增笔记页面（后续新增，用于新建笔记）
        ├── addNote.js
        ├── addNote.wxml
        ├── addNote.wxss
        └── addNote.json
├── utils/     // 工具函数文件夹（后续新增，用于封装公共方法）
└── images/    // 图片资源文件夹（后续新增，用于存放小程序中的图片）

核心文件详解（重点记忆）：

- app.json：最核心的配置文件，必须有，且不能写错（写错会导致整个小程序报错），主要配置“页面路径”“窗口样式”，后续我们会修改该文件，添加“新增笔记页面”的路径。

- WXML文件：后缀为.wxml，用于编写页面结构，类似网页的HTML，比如添加按钮、文字、列表，核心是“数据绑定”和“组件使用”，语法简单，后续实战会详细讲解。

- WXSS文件：后缀为.wxss，用于编写页面样式，类似网页的CSS，可设置字体大小、颜色、按钮样式，支持rpx响应式单位（1rpx=屏幕宽度/750），自动适配手机、平板等不同设备，无需手动适配。

- JS文件：后缀为.js，用于编写逻辑，比如点击按钮触发“新建笔记”功能、删除笔记、存储数据，是小程序的“交互核心”，零基础只需掌握基础语法（如变量、函数）即可。

2.3 核心基础语法（实战必备，边练边记）

我们结合“简易个人笔记”实战案例，讲解最常用的基础语法，无需掌握所有语法，重点掌握“数据绑定、事件绑定、列表渲染”，这三个语法覆盖80%的简单小程序开发场景。

2.3.1 数据绑定（将数据显示到页面上）

核心作用：将JS文件中的数据，显示到WXML页面中（比如将“笔记标题”“笔记内容”显示在页面上），语法：使用双大括号 {{ 数据名 }} 包裹，简单易记。

实战操作：修改首页（index.wxml、index.js），实现“显示笔记标题”：

1. 打开index.js文件，找到“data”对象（小程序中，所有需要显示到页面的数据，都放在data中），添加一条笔记数据：
        Page({
  data: {
    // 新增笔记数据，title为笔记标题，content为笔记内容
    note: {
      title: "我的第一条笔记",
      content: "今天学习了小程序基础语法，感觉很简单！"
    }
  }
})

2. 打开index.wxml文件，删除默认内容，添加代码，将data中的笔记标题和内容显示出来：
        <!-- 显示笔记标题，使用{{note.title}}绑定数据 -->
<view class="note-title">{{note.title}}</view>
<!-- 显示笔记内容 -->
<view class="note-content">{{note.content}}</view>

3. 查看效果：保存代码后（Ctrl+S / Command+S），左侧模拟器中会显示“我的第一条笔记”和对应的内容，数据绑定成功。

2.3.2 事件绑定（实现页面交互，如点击按钮）

核心作用：给页面中的元素（如按钮）绑定事件，点击按钮后触发对应的逻辑（比如点击“新建笔记”按钮，跳转到新建笔记页面；点击“删除”按钮，删除笔记），最常用的事件是“点击事件（bindtap）”。

实战操作：在首页添加“新建笔记”按钮，绑定点击事件，点击后跳转页面（后续会实现跳转逻辑）：

1. 打开index.wxml文件，在现有代码下方添加按钮，绑定bindtap事件，事件名称自定义（如addNoteTap）：
        <!-- 新建笔记按钮，bindtap绑定点击事件 -->


2. 打开index.js文件，在Page对象中，添加对应的事件函数（函数名称必须与bindtap绑定的名称一致）：
        Page({
  data: {
    note: {
      title: "我的第一条笔记",
      content: "今天学习了小程序基础语法，感觉很简单！"
    }
  },
  // 新建笔记点击事件，点击按钮后执行该函数
  addNoteTap() {
    console.log("点击了新建笔记按钮"); // 调试用，在调试区查看日志
    // 后续会添加“跳转页面”的逻辑
  }
})

3. 查看效果：保存代码后，模拟器中会显示“新建笔记”按钮，点击按钮后，右下方调试区的「Console」面板中，会显示“点击了新建笔记按钮”，说明事件绑定成功。

避坑要点：① 事件名称不能包含特殊字符（如空格、逗号），建议使用小写字母+驼峰命名（如addNoteTap）；② 事件函数必须写在Page对象中，不能写在data里面；③ 点击按钮后无反应，检查事件名称是否一致，或代码是否有语法错误（如括号缺失）。

2.3.3 列表渲染（显示多条数据，如笔记列表）

核心作用：当需要显示多条相同结构的数据时（如多条笔记、多个商品），使用列表渲染可简化代码，无需重复编写相同的布局，核心语法：wx:for（类似循环）。

实战操作：修改首页数据，添加多条笔记，使用wx:for渲染成笔记列表：

1. 打开index.js文件，修改data中的数据，将note改为数组（存放多条笔记）：
        Page({
  data: {
    // 笔记列表，数组中的每一项都是一条笔记
    noteList: [
      {
        id: 1, // 笔记唯一标识，用于后续删除笔记
        title: "我的第一条笔记",
        content: "今天学习了小程序基础语法，感觉很简单！"
      },
      {
        id: 2,
        title: "我的第二条笔记",
        content: "今天掌握了数据绑定和事件绑定，继续加油！"
      },
      {
        id: 3,
        title: "我的第三条笔记",
        content: "明天学习页面跳转和数据存储，争取早日完成小程序！"
      }
    ]
  },
  addNoteTap() {
    console.log("点击了新建笔记按钮");
  }
})

2. 打开index.wxml文件，修改代码，使用wx:for渲染笔记列表：
        <!-- 笔记列表容器，wx:for循环渲染noteList数组 -->
<view class="note-list">
  <!-- 循环每一条笔记，wx:for-item="item" 表示当前循环的笔记项 -->
  <view class="note-item" wx:for="{{noteList}}" wx:for-item="item" wx:key="id">
    <!-- 显示当前笔记的标题和内容 -->
    <view class="note-title">{{item.title}}</view>
    <view class="note-content">{{item.content}}</view>
  </view>
</view>
<!-- 新建笔记按钮 -->


3. 查看效果：保存代码后，模拟器中会显示3条笔记，按顺序排列，列表渲染成功。

关键说明：① wx:key="id" 必须添加，id是每条笔记的唯一标识（不能重复），用于小程序渲染优化，避免出现渲染错乱；② wx:for-item="item" 可省略，默认就是item，item代表当前循环的数组项（如第一条笔记、第二条笔记）；③ 若数组中没有唯一标识，可使用wx:key="*this"（仅适用于数组项为字符串、数字的情况）。

第三阶段：功能实战（3-5天，完成核心功能）

掌握基础语法后，我们进入实战环节，完成“简易个人笔记”的3个核心功能：新建笔记、查看笔记、删除笔记，同时学习页面跳转、本地数据存储两个核心知识点，这两个知识点是小程序开发的重中之重，几乎所有小程序都会用到。

3.1 新增页面：新建笔记页面（addNote）

我们需要新增一个“新建笔记”页面，用于输入笔记标题和内容，点击“保存”按钮后，将笔记添加到首页的笔记列表中。新增页面的核心步骤是“创建页面文件夹→配置页面路径”，具体操作如下：

1. 创建页面文件夹：在pages文件夹下，新建一个文件夹，命名为addNote（与页面功能对应，建议小写），然后在addNote文件夹下，新建4个文件，分别命名为：addNote.js、addNote.wxml、addNote.wxss、addNote.json（文件名必须与文件夹名称一致，否则会报错）。

2. 配置页面路径：打开app.json文件，找到“pages”数组（pages数组中的顺序，就是小程序页面的默认跳转顺序），将addNote页面的路径添加到数组中（建议添加在index页面后面）：
        {
  "pages": [
    "pages/index/index", // 首页路径
    "pages/addNote/addNote" // 新增笔记页面路径，新增这一行
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "简易个人笔记", // 全局导航栏标题
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

3. 配置新增笔记页面标题：打开addNote.json文件，添加配置，设置该页面的导航栏标题（区别于全局标题）：
        {
  "navigationBarTitleText": "新建笔记" // 该页面导航栏显示“新建笔记”
}

4. 编写新建笔记页面布局：打开addNote.wxml文件，添加输入框（用于输入标题和内容）和保存按钮：
        <!-- 笔记标题输入框 -->
<view class="input-container">
  <input 
    class="input-title" 
    placeholder="请输入笔记标题" 
    bindinput="titleInput" / 绑定输入事件，获取输入的标题
  />
</view>
<!-- 笔记内容输入框（多行输入） -->
<view class="input-container">
  <textarea 
    class="input-content" 
    placeholder="请输入笔记内容" 
    bindinput="contentInput" / // 自动适应高度，根据输入内容换行
  />
</view>
<!-- 保存按钮，绑定点击事件 -->


5. 编写输入事件逻辑：打开addNote.js文件，添加data（存储输入的标题和内容）和输入事件函数，获取用户输入的内容：
        Page({
  data: {
    title: "", // 存储输入的笔记标题
    content: "" // 存储输入的笔记内容
  },
  // 标题输入事件，实时获取输入内容
  titleInput(e) {
    this.setData({
      title: e.detail.value // e.detail.value 就是用户输入的内容
    })
  },
  // 内容输入事件，实时获取输入内容
  contentInput(e) {
    this.setData({
      content: e.detail.value
    })
  },
  // 保存笔记点击事件（后续完善逻辑）
  saveNoteTap() {
    console.log("标题：", this.data.title);
    console.log("内容：", this.data.content);
  }
})

6. 查看效果：保存所有代码后，点击首页的“新建笔记”按钮（目前还不能跳转），我们可以手动切换页面：点击工具顶部「编译」旁边的下拉框，选择“pages/addNote/addNote”，模拟器中会显示新建笔记页面，可输入标题和内容，点击保存按钮，调试区会显示输入的内容，页面编写成功。

避坑要点：① 新增页面的4个文件名称必须与文件夹名称一致，否则会提示“页面未找到”；② app.json中pages数组的路径必须正确（pages/addNote/addNote），少写一个层级都会报错；③ 输入框的bindinput事件，必须通过e.detail.value获取输入内容，不能直接使用this.data.title。

3.2 页面跳转（点击“新建笔记”跳转至新增页面）

小程序的页面跳转的核心是“wx.navigateTo”方法（最常用，跳转后可返回上一页），我们使用该方法，实现“点击首页新建笔记按钮，跳转到addNote页面”，同时后续实现“保存笔记后，跳转回首页”。

实战操作：

1. 完善首页新建笔记按钮的跳转逻辑：打开index.js文件，修改addNoteTap函数：
        addNoteTap() {
  // 使用wx.navigateTo方法跳转页面，url为目标页面路径
  wx.navigateTo({
    url: '/pages/addNote/addNote' // 路径必须以“/”开头，否则跳转失败
  })
}

2. 完善保存笔记后的跳转逻辑：打开addNote.js文件，修改saveNoteTap函数，添加跳转回首页的逻辑（先判断用户是否输入了标题和内容，避免保存空笔记）：
        saveNoteTap() {
  const { title, content } = this.data;
  // 判断标题和内容是否为空
  if (!title.trim() || !content.trim()) {
    // 提示用户输入完整内容，使用wx.showToast方法显示提示
    wx.showToast({
      title: '请输入笔记标题和内容',
      icon: 'none', // 不显示图标，仅显示文字
      duration: 1500 // 提示显示时间，1500毫秒=1.5秒
    });
    return; // 阻止后续逻辑执行
  }
  // 后续添加“保存笔记到本地”的逻辑
  // 保存成功后，跳转回首页
  wx.navigateBack({
    delta: 1 // delta=1 表示返回上一页（即首页）
  });
}

3. 测试跳转：保存代码后，点击首页的“新建笔记”按钮，可成功跳转到新增笔记页面；输入标题和内容后，点击“保存笔记”按钮，可跳转回首页，跳转功能实现成功。

关键说明：① 页面跳转路径必须以“/”开头，否则会跳转失败（如正确路径：/pages/addNote/addNote，错误路径：pages/addNote/addNote）；② wx.navigateTo 跳转的页面，顶部会显示“返回”按钮，可返回上一页；③ wx.navigateBack(delta:1) 表示返回上一页，delta的值表示返回的层级（如delta:2 表示返回上两页）。

3.3 本地数据存储（保存笔记、读取笔记，核心功能）

小程序的本地数据存储，使用微信官方提供的“wx.setStorageSync”（存储数据）和“wx.getStorageSync”（读取数据）方法，数据会存储在用户的手机中（仅当前小程序可读取，不会上传到服务器），适合存储简单数据（如笔记、设置等），零基础无需掌握复杂的后端知识，即可实现数据持久化（关闭小程序后，数据不会丢失）。

实战操作：实现“保存笔记到本地”和“读取本地笔记显示到首页”，分两步完成：

3.3.1 保存笔记到本地（完善saveNoteTap函数）

打开addNote.js文件，修改saveNoteTap函数，添加本地存储逻辑，将新建的笔记添加到本地的笔记列表中：
      saveNoteTap() {
  const { title, content } = this.data;
  // 判断标题和内容是否为空
  if (!title.trim() || !content.trim()) {
    wx.showToast({
      title: '请输入笔记标题和内容',
      icon: 'none',
      duration: 1500
    });
    return;
  }
  // 1. 读取本地已存储的笔记列表（若没有，默认是空数组）
  const noteList = wx.getStorageSync('noteList') || [];
  // 2. 新建一条笔记，添加唯一id（使用时间戳，确保不重复）
  const newNote = {
    id: Date.now(), // 时间戳作为id，唯一不重复
    title: title,
    content: content
  };
  // 3. 将新笔记添加到笔记列表中（添加到数组的开头，显示在首页最上方）
  noteList.unshift(newNote);
  // 4. 将更新后的笔记列表，重新存储到本地
  wx.setStorageSync('noteList', noteList);
  // 5. 显示“保存成功”提示
  wx.showToast({
    title: '保存成功',
    icon: 'success', // 显示成功图标
    duration: 1500
  });
  // 6. 跳转回首页
  wx.navigateBack({
    delta: 1
  });
}

3.3.2 读取本地笔记，显示到首页

打开index.js文件，修改代码，在页面加载时（onLoad生命周期函数，小程序页面加载时自动执行），读取本地存储的笔记列表，显示到首页：Page({
  data: {
    noteList: [] // 初始化为空数组，后续从本地读取数据
  },
  // 页面加载时执行，自动读取本地笔记
  onLoad(options) {
    this.getNoteList(); // 调用自定义函数，读取本地笔记
  },
  // 自定义函数：读取本地笔记列表
  getNoteList() {
    const noteList = wx.getStorageSync('noteList') || [];
    // 将读取到的笔记列表，赋值给data中的noteList，显示到页面上
    this.setData({
      noteList: noteList
    });
  },
  addNoteTap() {
    wx.navigateTo({
      url: '/pages/addNote/addNote'
    });
  },
  // 后续添加“删除笔记”函数
})

3.3.3 测试数据存储功能

1. 点击首页“新建笔记”按钮，跳转到新增页面，输入标题（如“测试笔记”）和内容（如“本地存储测试成功！”），点击“保存笔记”按钮；

2. 跳转回首页后，会看到新增的笔记显示在列表最上方，说明数据存储成功；

3. 关闭微信开发者工具，重新打开项目，首页依然会显示刚才保存的笔记，说明数据持久化成功（关闭小程序后数据不丢失）。

避坑要点：① 读取本地数据时，必须判断“是否有数据”（wx.getStorageSync('noteList') || []），否则没有数据时会报错；② 存储数据时，id必须唯一，这里使用Date.now()（时间戳），简单高效，适合零基础；③ 若数据存储失败，检查代码是否有语法错误，或手机存储空间是否充足（一般不会出现）。

3.4 实现删除笔记功能

删除笔记的核心逻辑：点击笔记项（或删除按钮），获取该笔记的id，从本地存储的笔记列表中，过滤掉该id对应的笔记，重新存储更新后的列表，同时刷新首页显示。

实战操作：

1. 修改首页布局，给每条笔记添加“删除”按钮，绑定点击事件（deleteNoteTap），并传递当前笔记的id：
       <view class="note-list">
  <view class="note-item" wx:for="{{noteList}}" wx:for-item="item" wx:key="id">
    <view class="note-title">{{item.title}}</view>
    <view class="note-content">{{item.content}}</view>
    <!-- 删除按钮，绑定点击事件，传递当前笔记的id -->
    
  </view>
</view>
关键说明：data-id="{{item.id}}" 用于传递当前笔记的id，点击按钮时，可通过e.currentTarget.dataset.id获取该id。

2. 打开index.js文件，添加deleteNoteTap函数，实现删除逻辑：
        // 删除笔记点击事件
deleteNoteTap(e) {
  // 获取传递过来的笔记id
  const noteId = e.currentTarget.dataset.id;
  // 读取本地笔记列表
  let noteList = wx.getStorageSync('noteList') || [];
  // 过滤掉当前id对应的笔记（保留id不等于noteId的笔记）
  noteList = noteList.filter(note => note.id !== noteId);
  // 重新存储更新后的笔记列表
  wx.setStorageSync('noteList', noteList);
  // 显示“删除成功”提示
  wx.showToast({
    title: '删除成功',
    icon: 'success',
    duration: 1500
  });
  // 刷新首页笔记列表
  this.getNoteList();
}

3. 测试删除功能：保存代码后，点击首页任意一条笔记的“删除”按钮，会弹出“删除成功”提示，该笔记会从列表中消失，关闭工具重新打开，笔记依然被删除，功能实现成功。

避坑要点：① 传递id时，必须使用data-id（data-前缀不能少），否则无法获取id；② 过滤笔记列表时，使用filter方法，注意箭头函数的语法（note => note.id !== noteId）；③ 删除后必须调用this.getNoteList()，刷新页面显示，否则页面不会更新。

3.5 优化页面样式（提升美观度，可选但推荐）

目前我们的小程序功能已经完整，但样式比较简陋，我们可以简单优化样式，让页面更美观，主要修改WXSS文件（不影响功能，零基础可直接复制代码，后续再慢慢学习样式编写）。

1. 优化全局样式：打开app.wxss文件，添加代码：
        /* 全局样式，所有页面都可使用 */
page {
  background-color: #f5f5f5; /* 页面背景色，浅灰色，避免白色过于刺眼 */
  padding: 15rpx; /* 页面内边距，避免内容贴边 */
}
button {
  background-color: #07c160; /* 按钮颜色，微信绿 */
  color: white; /* 按钮文字颜色 */
  border-radius: 30rpx; /* 按钮圆角，更美观 */
  margin-top: 20rpx; /* 按钮上间距 */
}
button::after {
  border: none; /* 去除按钮默认边框 */
}

2. 优化首页样式：打开index.wxss文件，添加代码：
        /* 笔记列表容器 */
.note-list {
  margin-bottom: 20rpx;
}
/* 单条笔记样式 */
.note-item {
  background-color: white; /* 笔记背景色，白色 */
  padding: 20rpx;
  border-radius: 15rpx; /* 圆角 */
  margin-bottom: 15rpx; /* 笔记之间的间距 */
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); /* 轻微阴影，提升层次感 */
}
/* 笔记标题样式 */
.note-title {
  font-size: 32rpx; /* 字体大小，rpx响应式 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色，深灰色 */
  margin-bottom: 10rpx;
}
/* 笔记内容样式 */
.note-content {
  font-size: 28rpx;
  color: #666; /* 字体颜色，中灰色 */
  line-height: 40rpx; /* 行高，提升可读性 */
  margin-bottom: 15rpx;
}

3. 优化新增笔记页面样式：打开addNote.wxss文件，添加代码：
/* 输入框容器 */
.input-container {
  background-color: white;
  padding: 20rpx;
  border-radius: 15rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
/* 标题输入框样式 */
.input-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5; /* 底部边框，区分标题和内容 */
  padding-bottom: 15rpx;
  margin-bottom: 15rpx;
}
/* 内容输入框样式 */
.input-content {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
  min-height: 200rpx; /* 最小高度，避免输入框过短 */
}

优化后效果：保存代码后，模拟器中的页面会变得更美观，按钮、笔记项都有圆角和阴影，输入框布局更清晰，提升用户体验。

第四阶段：上线前准备（1天，排查问题，确保顺利上线）

功能开发完成后，不能直接上线，需要进行上线前的准备工作，核心分为3步：功能测试、完善配置、备案（若有需要），避免因配置错误或功能漏洞导致审核失败。

4.1 全面功能测试（重点，避免审核失败）

测试的核心是“模拟用户使用场景”，排查所有功能是否正常，重点测试以下内容，确保无漏洞：

- 功能测试：① 点击“新建笔记”按钮，能否正常跳转；② 输入标题和内容，能否正常保存；③ 点击“删除”按钮，能否正常删除笔记；④ 关闭工具重新打开，笔记是否正常显示（数据持久化）；⑤ 输入空标题/空内容，能否正常提示（避免保存空笔记）。

- 兼容性测试：点击工具顶部「模拟器」旁边的下拉框，选择不同的手机型号（如iPhone 14、华为Mate 60），查看页面是否正常显示，有无布局错乱、按钮无法点击的情况。

- 调试排查：打开右下方调试区，查看「Console」面板，是否有红色错误提示（若有错误，根据提示修改代码）；查看「Network」面板，是否有异常请求（本文无网络请求，可忽略）。

- 真机测试（推荐）：点击工具顶部「预览」按钮，使用微信扫码，在自己的手机上测试所有功能，确保手机端显示和操作正常（模拟器和真机可能存在轻微差异，真机测试更准确）。

避坑要点：① 真机测试时，需确保手机微信是最新版本，否则可能出现兼容性问题；② 若真机无法预览，检查开发者工具是否登录，或小程序账号是否完成实名认证。

4.2 完善小程序配置（必做）

主要完善app.json、sitemap.json两个文件的配置，同时补充小程序的基础信息，确保符合微信小程序的上线规范：

1. 完善app.json配置：打开app.json文件，取消“不校验合法域名”的勾选（开发时勾选用于调试，上线前必须取消，否则无法正常访问网络接口，本文无网络接口，取消后不影响）；确保pages数组中的页面路径正确，无多余/错误路径。

2. 完善sitemap.json配置：打开sitemap.json文件，修改配置，允许小程序页面被微信索引（方便用户搜索到你的小程序），默认配置即可，无需修改：
       {
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
    "action": "allow",
    "page": "*" // 允许所有页面被微信索引
  }]
}

3. 完善小程序后台基础信息：登录小程序后台（mp.weixin.qq.com），点击左侧菜单栏「设置」→「基本设置」，补充小程序的头像、简介、服务类目（必须与小程序功能一致，本文选择“工具-笔记”），确保信息完整，无违规内容（如简介中不包含敏感词、广告）。

4.3 小程序备案（根据主体类型判断，必做）

根据工信部要求，所有小程序上线前必须完成备案，未备案的小程序无法提交审核或上线，备案材料和周期根据主体类型不同有所差异：

- 个人主体：需提供个人身份证，审核周期3-7个工作日，无需缴纳费用，备案流程在小程序后台完成（「设置」→「备案管理」，按提示操作即可）。

- 企业/个体工商户主体：需提供营业执照、法人身份证、管理员信息，审核周期3-7个工作日，认证需缴纳300元/年（备案免费，认证是可选但推荐，认证后有更多权限）。

避坑要点：① 备案信息必须真实有效，营业执照、身份证等材料与实际一致，否则备案会失败；② 建议在开发后期同步推进备案，避免影响上线进度；③ 备案完成后，无需额外配置，可直接提交审核。

4.4 排查违规内容（重点，避免审核失败）

微信小程序审核严格，违规内容会直接导致审核失败，零基础需重点排查以下几点：

- 内容违规：小程序名称、简介、页面中，不包含“最”“第一”“顶级”等极限词，不包含医疗、新闻、金融等需特殊资质的内容（本文是笔记工具，无违规风险）。

- 类目不符：服务类目必须与小程序功能一致，如本文选择“工具-笔记”，不能选择“电商”“社交”等类目（类目不符会直接审核失败）。

- 页面缺陷：无空白页面、无无法点击的按钮、无加载失败的内容（如笔记列表为空时，可添加“暂无笔记，点击新建”的提示，提升用户体验）。

- 数据合规：不收集用户敏感信息（如手机号、身份证号），本文仅存储用户输入的笔记，无敏感信息，符合合规要求。

第五阶段：提交审核与正式上线（1-7天，等待审核，完成上线）

上线前准备工作完成后，即可提交小程序审核，审核通过后，用户可通过微信扫码、搜索访问你的小程序，全程在微信开发者工具和小程序后台操作，步骤清晰。

5.1 提交审核（核心步骤）

1. 上传代码：打开微信开发者工具，确保项目无错误（调试区无红色错误提示），点击顶部菜单栏「上传」按钮，填写版本号和更新说明：
        

  - 版本号：零基础可按“1.0.0”填写（首次上线，主版本号为1，后续更新可改为1.0.1、1.1.0等）；

  - 更新说明：填写小程序的核心功能（如“简易个人笔记小程序，支持新建、查看、删除笔记，本地数据存储，无需注册登录，即用即走”），简洁明了即可，供审核人员参考。

2. 确认上传：填写完成后，点击「上传」，等待1-2分钟，上传成功后，工具会提示“上传成功”，此时代码已上传到小程序后台。

3. 提交审核：登录小程序后台（mp.weixin.qq.com），点击左侧菜单栏「开发管理」→「版本管理」，找到“开发版本”（刚才上传的代码），点击「提交审核」，按提示完成以下操作：
        

  - 填写审核信息：选择小程序的服务类目（与之前完善的一致，如“工具-笔记”），填写小程序的功能介绍（与上传代码时的更新说明一致即可）；

  - 上传测试账号（可选）：本文无需登录，可跳过；若小程序需要登录，需提供测试账号和密码，方便审核人员测试；

  - 确认提交：勾选“我已阅读并同意《微信小程序审核规范》”，点击「提交审核」，即可完成提交，进入审核队列。

避坑要点：① 上传代码前，必须确保项目无错误，否则无法上传；② 审核信息必须与小程序功能一致，服务类目不能选错；③ 若小程序有网络请求，需提前将域名备案，并添加到小程序后台的“合法域名”中（本文无网络请求，可忽略）。

5.2 审核进度查询与审核失败处理

1. 查询审核进度：登录小程序后台，点击「开发管理」→「版本管理」，可查看审核进度（审核中、审核通过、审核失败），审核周期一般1-7个工作日（简单小程序审核较快，1-2天即可完成）。

2. 审核失败处理：若审核失败，小程序后台会提示“审核未通过”，并给出具体的失败原因（如类目不符、页面有空白），根据提示修改代码或配置，修改完成后，重新上传代码、提交审核，直到审核通过。

常见审核失败原因及解决方法：

- 类目不符：修改小程序后台的服务类目，确保与小程序功能一致；

- 页面有空白/按钮无法点击：检查代码，修复功能漏洞，确保所有页面都有内容、按钮可正常操作；

- 包含违规内容：删除小程序名称、简介、页面中的违规词，重新提交审核。