Preparation

1. Domain Registration

A domain name is required, and it must be registered.

2. Server Setup

A server is needed, and I use the BaoTa panel for ease of use.

Alternatively, a virtual host can be used, which is cost-effective for beginners.

The overall process involves using wx.request in the WeChat Mini Program JavaScript to fetch data from a PHP backend, which retrieves information from the MySQL database and returns it in JSON format for display in the WXML file.

The process includes three parts: first, the WeChat Mini Program Frontend, second, the PHP Backend, and third, the MySQL Database.

First, WeChat Mini Program Frontend Code

js:

// pages/index/index.js
Page({
  data: {
    dataList: [] // Array to store data
  },
  onLoad: function () {
    var that = this; // Save page context
    wx.request({
      // Replace with your actual domain
      url: 'https://yiming.cn/demo/csdn/api.php',
      method: 'GET',
      success: function (res) {
        console.log(res.data);
        // Store the retrieved data in the page data
        that.setData({
          dataList: res.data
        });
      },
      fail: function (error) {
        console.error('Request failed', error);
      }
    });
  }
});

wxml:

<!-- pages/index/index.wxml -->
<view>
  <block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="index">
    <view>
      <view>{{item.id}}</view>
      <view>{{item.title}}</view>
      <image src="{{item.img}}" mode="aspectFit"></image>
    </view>
  </block>
</view>

In the wxml file, id, title, and img can be adjusted based on the database content, as shown below:

<view>{{item.id}}</view>
<view>{{item.title}}</view>
<image src="{{item.img}}" mode="aspectFit"></image>

For example, the database contains id, title, and img, as shown below:

Second, PHP Backend Code

Create an api.php file (or any other name, as long as it matches the call in the JS file).

api.php:

<?php
$host = 'localhost';
$username = 'demo';// Replace with your database username
$password = 'demo';// Replace with your database password
$database = 'demo';// Replace with your database name

// Create database connection
$conn = new mysqli($host, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
    die("Database connection failed: " . $conn->connect_error);
}

// Query the database
// Replace with your table structure, e.g., id, title, img
// Replace with your table name, e.g., shujvkubiao
$sql = "SELECT id, title, img FROM shujvkubiao";
$result = $conn->query($sql);

// Convert query result to associative array
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// Return data to frontend
header('Content-Type: application/json');
echo json_encode($data);

// Close database connection
$conn->close();
?>

The first five lines of api.php should be replaced with your own database details.

Third, MySQL Database

Database Code

Below is some sample database information, which can be modified as needed:

CREATE TABLE `shujvkubiao` (
  `id` int(11) NOT NULL,
  `title` varchar(255) DEFAULT NULL,
  `img` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `shujvkubiao` (`id`, `title`, `img`) VALUES
(1, 'Title1', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(2, 'Title2', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(3, 'Title3', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(4, 'Title4', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg');

Save this as an SQL file, such as 'shujvkubiao.sql', and import it into the database.

Final, Preview

After completing the code, the mini program can retrieve the database information, as shown below:

You can see four entries retrieved from the database, as shown below.