0.前言

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

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

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

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

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

1.注册微信小程序

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

完善基本信息：

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

2.安装微信开发工具

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

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

然后微信扫码登录

点击+号新建项目

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

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

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

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

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

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

4.小程序项目结构介绍

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：

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 请求

完整代码：

/**
 * 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对象
    returnnewPromise((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 = {}) {
    returnthis.request('GET', url, data, header);
  }

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

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

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

}

// 导出
export  default new Http();

6. 实现一个登录功能

6.1 新建登录页

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

6.2 修改登录页的配置文件

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

6.3 开发登录页面

微信小程序官方组件库

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

登录页面很简单：login.wxml

<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 工具类，初始化页面数据：

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

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

登录方法：

  // 处理表单提交
  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 跳转到首页

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