寫在前面

1.域名備案

首先，需要有一個域名，且這個域名是已經(jīng)備過案的。（如果小程序不發(fā)布正式版只用于線上測試則不影響）

2.后臺服務器

其次，需要一個服務器，我這里使用的是寶塔面板，對小白很友好，很方便操作。

也可以買個虛擬主機，一個月幾塊錢左右，很適合小白弄著玩。

大概流程為：微信小程序js中使用wx.request，通過后臺PHP文件獲取數(shù)據(jù)庫的信息，并以json格式將數(shù)據(jù)返回給前端小程序，通過wxml顯示在頁面中。

總共分為三個部分，第一：微信小程序端、第二：后臺PHP、第三：mysql數(shù)據(jù)庫。

第一、微信小程序端代碼

js：

// pages/index/index.js
Page({
  data: {
    dataList: [] // 新增一個用于存儲數(shù)據(jù)的數(shù)組
  },
  onLoad: function () {
    var that = this; // 保存頁面上下文
    wx.request({

      // 此處域名更換為你自己的實際域名
      url: 'https://yiming.cn/demo/csdn/api.php',
      method: 'GET',
      success: function (res) {
        console.log(res.data);
        // 將獲取的數(shù)據(jù)存儲到頁面數(shù)據(jù)中
        that.setData({
          dataList: res.data
        });
      },
      fail: function (error) {
        console.error('請求失敗', 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>

其中wxml里的id、title、img可根據(jù)數(shù)據(jù)庫中的數(shù)據(jù)進行更改，如下圖：

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

例如我的數(shù)據(jù)庫中的數(shù)據(jù)就是id、title、img這三個，如下圖：

第二、后臺PHP代碼

需要新建一個api.php文件（也可以自行更改其他名稱，如aaa.php，只要在小程序的js部分正確調(diào)用就可以）

api.php：

<?php
$host = 'localhost';
$username = 'demo';// 這里換成你的數(shù)據(jù)庫用戶名
$password = 'demo';// 這里換成你的數(shù)據(jù)庫密碼
$database = 'demo';// 這里換成你的數(shù)據(jù)庫名

// 創(chuàng)建數(shù)據(jù)庫連接
$conn = new mysqli($host, $username, $password, $database);

// 檢查連接是否成功
if ($conn->connect_error) {
    die("數(shù)據(jù)庫連接失敗: " . $conn->connect_error);
}

// 查詢數(shù)據(jù)庫中的數(shù)據(jù)
// 這里換成你的數(shù)據(jù)庫表的結(jié)構(gòu)，例如我的“id, title, img”
// 這里換成你的數(shù)據(jù)庫表的名稱，例如我的“shujvkubiao”
$sql = "SELECT id, title, img FROM shujvkubiao";
$result = $conn->query($sql);

// 將查詢結(jié)果轉(zhuǎn)為關聯(lián)數(shù)組
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 返回數(shù)據(jù)給前端
header('Content-Type: application/json');
echo json_encode($data);

// 關閉數(shù)據(jù)庫連接
$conn->close();
?>

apip.php中前五行的數(shù)據(jù)庫信息可根據(jù)自己的數(shù)據(jù)庫信息進行更替，如果怕出錯也可以都設置成一樣的哈。

另外此處記得更換成自己的數(shù)據(jù)庫信息，如下圖：

第三、mysql數(shù)據(jù)庫

數(shù)據(jù)庫代碼

以下是我隨便弄的數(shù)據(jù)庫信息，詳細可以自行更改，如下圖：

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, '標題1', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(2, '標題2', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(3, '標題3', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg'),
(4, '標題4', 'https://gd-hbimg.huaban.com/4d6ab5a6c06eda81600aa1b812dc18359585e0a0c3db5-hlY5eg');

將上述內(nèi)容保存為sql格式文件，例如我的：“shujvkubiao.sql”并導入到 數(shù)據(jù)庫中就可以了，如下圖：

?

最后、效果圖

完成以上代碼工作后，在小程序端就可以獲取到數(shù)據(jù)庫信息啦，如下圖：

可以看到獲取到了數(shù)據(jù)庫中的四條數(shù)據(jù)，如下圖：

親測可以正常獲取到數(shù)據(jù)庫的信息。

本人小白，如有錯誤的地方歡迎幫忙指正～文章來源地址http://www.zghlxwxcb.cn/news/detail-850627.html

到了這里，關于微信小程序使用PHP調(diào)用后臺mysql數(shù)據(jù)庫-小白版的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！