微信小程序于 2016 年推出，是一种在微信内部运行的应用形式。它的出现为用户提供了更加便捷的应用使用体验，无需下载安装即可使用各种应用服务，极大地节省了手机存储空间，并且能够快速启动应用，真正实现了 “触手可及” 的应用梦想。随着时间的推移，小程序的功能不断完善，生态也日益丰富，成为移动应用开发领域的重要组成部分。

微信小程序开发保姆式教程

一、准备工作

1. 注册微信开发者账号

   • 访问微信公众平台（https://mp.weixin.qq.com/），使用邮箱注册一个微信公众号，选择“小程序”类型。

2. 下载并安装微信开发者工具

   • 访问微信开发者工具官网（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），根据操作系统选择对应的版本进行下载和安装。

二、创建项目

1. 打开微信开发者工具

   • 安装完成后，启动微信开发者工具，使用微信扫码登录。

2. 新建项目

   • 点击“新建项目”，填写AppID（如果没有可先选择测试号）、项目名称、项目目录等信息，然后点击“确定”。

三、理解项目结构

1. 项目文件夹结构

   • app.js：小程序逻辑
   • app.json：小程序公共设置
   • app.wxss：全局样式表

   • pages：页面文件夹，每个页面包含四个文件：

     • .js：页面逻辑
     • .json：页面配置
     • .wxml：页面结构
     • .wxss：页面样式

四、编写代码

（一）页面结构（WXML）

<!-- pages/index/index.wxml -->
<view class="container">
  <text>欢迎来到我的小程序</text>
</view>

（二）页面样式（WXSS）

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

（三）页面逻辑（JS）

// pages/index/index.js
Page({
  data: {},
  onLoad() {
    console.log('页面加载');
  }
});

五、调试与预览

1. 实时预览

   • 在微信开发者工具中，点击左侧的“编译”按钮，即可在右侧的模拟器中实时查看效果。

2. 真机调试

   • 使用手机扫描二维码，在手机上查看和调试小程序。

六、发布上线

1. 提交审核

   • 在微信公众平台，进入“开发”-“开发设置”，将代码上传到线上服务器，并提交审核。

2. 发布

   • 审核通过后，按照提示发布小程序，用户就可以通过搜索或分享链接访问你的小程序了。