2025微信小程序开发实战教程（一）

0.前言

微信小程序开发不用我过多介绍了。

在工作面试里，学会小程序开发，能极大提升你的竞争力，帮你轻松拿下 offer。

当然如果你是独立开发者，也可以通过开发小程序进行商业变现。

总之，虽然微信小程序火了很多年，但是现在学依然不晚。

技术只是工具，创新才是未来。在接下来的时间里，我将会手把手非常详细地教会你微信小程序开发。

1.注册微信小程序

css 复制代码

https://mp.weixin.qq.com/

完善基本信息：

最重要的是账号信息里面的 AppID

2.安装微信开发工具

css 复制代码

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

根据电脑系统下载之后进行安装，然后双击运行

然后微信扫码登录

点击+号新建项目

输入项目名，下拉选择小程序的 AppId。后端服务选择不使用云服务，因为云服务需要花钱购买微信官方的云服务。当然如果你是学习使用，可以免费使用一个月云服务。

模板根据自己需要选择，这里我是选择官方提供的 JS 基础模板

3.微信开发工具页面介绍

顶部菜单栏
左边模拟器
中间项目区
右下面调试区

这里强烈建议大家去官网看文档，比我讲的详细：

css 复制代码

https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html

4.小程序项目结构介绍

arduino 复制代码

zhifou_study/
├── app.js        // 小程序入口文件，全局逻辑
├── app.json      // 全局配置文件
├── app.wxss      // 全局样式文件
├── project.config.json  // 项目配置文件
├── sitemap.json  // 小程序搜索配置文件
└── pages/        // 页面文件夹
    ├── index/    // 首页
    │   ├── index.js    // 页面逻辑
    │   ├── index.wxml  // 页面结构
    │   ├── index.wxss  // 页面样式
    │   └── index.json  // 页面配置
    └── logs/     // 日志页面
├── components/   // 自定义组件
├── utils/        // 工具函数
└── images/       // 图片资源

4.1 app.json 全局配置文件

主要用来定义项目全局样式、页面路径配置等

4.2 app.js 小程序入口文件

小程序全局入口文件，可以定义全局变量和函数
监听生命周期函数

4.3 app.wxss

全局样式

4.4 pages

你写的所有页面都存放在这个文件夹下面

每个页面都包含四个文件：

js 文件

主要用来定义变量、方法、生命周期函数等，还可以调用小程序官方提供的 api。如果类比 Vue3 项目，其实就是 script setup 标签里面的内容。只不过单独变成了一个 js 文件。

wxml 文件

小程序的页面模板文件，主要用来绑定数据渲染数据。类似 Vue3 项目的 template 标签里面的内容。

wxss 文件

页面的样式文件，而且只对当前页面有效

json 文件

小程序页面的配置文件，可以覆盖全局配置里面的属性。比如单独设置这个页面的导航栏样式、文字样式、背景颜色等

4.5 其他文件

project.config.json

开发时项目的配置文件，主要包含项目设置、插件配置等。只在开发时有效，不会部署到正式环境。

sitemap.json

主要用来控制小程序的页面是否被微信索引，可以配置哪些页面允许被搜索

utils

存放各种工具函数，比如请求封装、日期处理函数等等

components

存放自定义封装的组件

5. 封装 HTTP 请求

不管是 Vue 、uniapp 项目，还是微信小程序项目，都需要向服务端请求数据。

微信小程序官方提供的请求 api：

css 复制代码

wx.request({
  url: 'http://127.0.0.1:8081/zhifou_study', 
  data: {
    name: '',
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
});

官方提供的不是特别好用，所以需要我们自己封装一下。开干！

在 util 文件夹下面新建一个 http.js 文件，这个 http 请求工具类主要包含 3 部分：

1.基础 url、超时时间

2.封装官方的 request 请求接口

3.封装GET、POST、PUT、DELETE 请求

完整代码：

js 复制代码

/**
 * HTTP请求工具类
 */
class Http {
  // 构造方法
  constructor() {
    // 基础URL
    this.baseUrl = 'http://127.0.0.1:8081/zhifou-study';
    // 超时时间(毫秒)
    this.timeout = 15000;
  }
    /**
   * 设置基础URL
   * @param {string} baseUrl 基础URL
   */
  setBaseUrl(baseUrl) {
    this.baseUrl = baseUrl;
  }
  /**
   * 设置超时时间
   * @param {number} timeout 超时时间(毫秒)
   */
  setTimeout(timeout) {
    this.timeout = timeout;
  }
    /**
   * 发送请求
   * @param {string} method 请求方法
   * @param {string} url 请求URL
   * @param {object} data 请求参数
   * @param {object} header 请求头
   */
  request(method, url, data, header) {
    // 合并默认请求头
    const defaultHeader = {
      'content-type': 'application/json'
    };
    const finalHeader = { ...defaultHeader, ...header };
    // 构建完整URL
    const fullUrl = this.baseUrl + url;

    // 返回Promise对象
    return new Promise((resolve, reject) => {
      wx.request({
        url: fullUrl,
        method: method,
        data: data,
        header: finalHeader,
        timeout: this.timeout,
        success: (res) => {
          // 请求成功
          if (res.data.code ==200) {
            resolve(res.data);
          } else {
            // 请求失败
            reject({
              statusCode: res.data.code,
              data: res.data,
              message: `请求失败，状态码：${res.data.code}`
            });
          }
        },
        fail: (err) => {
          // 请求失败
          reject({
            message: '网络请求失败',
            error: err
          });
        }
      });
    });
  }

  /**
   * 发送GET请求
   * @param {string} url 请求URL
   * @param {object} data 请求参数
   * @param {object} header 请求头
   */
  get(url, data = {}, header = {}) {
    return this.request('GET', url, data, header);
  }

  /**
   * 发送POST请求
   * @param {string} url 请求URL
   * @param {object} data 请求参数
   * @param {object} header 请求头
   */
  post(url, data = {}, header = {}) {
    return this.request('POST', url, data, header);
  }

  /**
   * 发送PUT请求
   * @param {string} url 请求URL
   * @param {object} data 请求参数
   * @param {object} header 请求头
   */
  put(url, data = {}, header = {}) {
    return this.request('PUT', url, data, header);
  }

  /**
   * 发送DELETE请求
   * @param {string} url 请求URL
   * @param {object} data 请求参数
   * @param {object} header 请求头
   */
  delete(url, data = {}, header = {}) {
    return this.request('DELETE', url, data, header);
  }

}

// 导出单例
export default new Http();

6. 实现一个登录功能

6.1 新建登录页

在 pages/login 文件夹下新建 login 的 page，然后在 app.json 里面把登录的路径往前移，这样小程序编译之后首先加载登录的页面：

6.2 修改登录页的配置文件

css 复制代码

{
  // 导航栏标题
  "navigationBarTitleText": "登录页面",
  // 导航栏标题文字颜色：只有 black 和 white
   "navigationBarTextStyle":"white",
   // 导航栏背景色： 不支持英文单词，只支持 16进制颜色
  "navigationBarBackgroundColor": "#4e6ef2"
}

6.3 开发登录页面

微信小程序官方组件库

ruby 复制代码

https://developers.weixin.qq.com/miniprogram/dev/component/form.html

登录页面很简单：login.wxml

xml 复制代码

<view class="container">
  <!-- 标题区域 -->
  <view class="header">
    <text class="title">知否技术</text>
  </view>
  <!-- 表单区域 -->
    <!-- 用户名输入框 -->
    <view class="form-item">
      <input 
        type="text" 
        placeholder="请输入账号" 
        name="username" 
        bindinput="onUsernameInput"
        value="{{username}}"
      />
    </view>
    <!-- 密码输入框 -->
    <view class="form-item">
      <input 
      password 
        placeholder="请输入密码" 
        placeholder-class="placeholder"
        bindinput="onPasswordInput"
        name="password" 
        value="{{password}}"
      />
    </view>
    
    <!-- 登录按钮 -->
    <button 
      bind:tap="handleSubmit"
      class="login-button"
    >
      登录
    </button>

</view>

讲解：

value 绑定 js 文件里面的数据
bindinput 方法用来绑定设置数据方法
bind:tap="handleSubmit" 绑定登录方法

微信小程序是单向数据流，所以当输入账号和密码时需要手动更新 js 中 dada 里面的数据。

6.4 登录页 js 逻辑

首先导入 http 工具类，初始化页面数据：

css 复制代码

import http from "../../utils/http"

绑定更新数据方法：通过 this.setData 方法更新 data 里面的数据

登录方法：

kotlin 复制代码

  // 处理表单提交
  async handleSubmit(e) {
    const { username, password } = this.data;
    console.log("data", this.data);
    // 账号验证
    if (!username) {
      wx.showToast({
        title: "用户名不能为空！",
        icon: 'none'
      });
      return;
    }
    // 密码验证
    if (!password) {
      wx.showToast({
        title: "密码不能为空！",
        icon: 'none'
      });
      return;
    }

    try {
      // 发送登录请求
      const res = await http.post('/user/login', {
        username,
        password
      });

      if (res.code == 200) {
        // 跳转到首页
        wx.reLaunch({
          url: '/pages/index/index'
        });
      }

    } catch (error) {
      // 登录失败
      wx.showToast({
        title: '登录失败',
        icon: 'none'
      });
    } finally {
    }
  },

当账号密码校验成功，就调用微信官方的接口 wx.reLaunch 跳转到首页

注：本地调试需要勾选不校验合法域名