微信小程序通过PHP连接到navicat数据库

微信实现通过PHP连接到数据库，分为三步：首先在PHPstudy的安装路径下书写index.php的代码，然后在微信小程序的js页面上调用方法连接到数据库（通过url地址的方式），最后在小程序的wxml页面将控制台的数据显示在页面上。

一、实现的界面

数据库中的数据

显示在小程序的页面上

二、实现步骤

首先，在我们本地安装PHPstudy的WWW路径下创建一个文件夹，在这个文件夹里面新建一个index.php文件

在该文件夹里面书写index.php的代码，具体代码如下：（注意这里要修改自己的数据库名字和密码，第一个root为账号，第二个root为密码，test为要连接的数据库，users为要连接的表）

PHP端的代码
<?php
// 连接到MySQL数据库
$conn = new mysqli("localhost", "root", "root", "test");// 查询users表中的所有数据
$result = $conn->query("SELECT * FROM users");// 将查询结果转换为数组
$rows = array();
while ($row = $result->fetch_assoc()) {
  $rows[] = $row;
}// 将数组转换为JSON字符串并输出
echo json_encode($rows);// 关闭数据库连接
$conn->close();
?>

在微信小程序的js页面添加onload:function()相关的代码，代码如下

微信小程序页面里面的js代码
    onLoad: function (options) {
        var that = this;
        wx.request({
            url: "http://localhost/test/index.php",
            success: function (rep){
             console.log(rep);/*将数据在控制台数据查看*/
             that.setData({
                items: rep.data/*将数据暂存到items数组中*/
              });
            }
        })   /*获取项目库的数据*/ 
    },

在页面加载时，自动获取到数据库的数据，并且通过console输出在控制台，可以在控制台看到相关的数据内容，有可能会获取不到数据的内容，这时候在本地设置选择不矫正合法域名即可

要将控制台的数据显示在页面中，可以先将数据暂时存在一个数组当中，然后在页面通过wx:for的方式循环的输出数据库的数据项，wxml的相关代码如下：

微信小程序wxml页面的代码
<view wx:for="{{items}}">
         <view>{{item.name}},{{item.program_type}},{{item.sex}}</view>
</view>

三、总的代码

服务端index.php

服务端index.php
<?php
// 连接到MySQL数据库
$conn = new mysqli("localhost", "root", "root", "test");
                    
// 查询users表中的所有数据
$result = $conn->query("SELECT * FROM users");// 将查询结果转换为数组
$rows = array();
while ($row = $result->fetch_assoc()) {
  $rows[] = $row;
}// 将数组转换为JSON字符串并输出
echo json_encode($rows);// 关闭数据库连接
$conn->close();
?>

微信小程序端

index.wxml
<view wx:for="{{items}}">
         <view>{{item.name}},{{item.program_type}},{{item.sex}}</view>
</view>

index.js
// pages/test1/test1.js
Page({    /**
     * 页面的初始数据
     */
    data: {    },    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        wx.request({
            url: "http://localhost/test/index.php",
            success: function (rep){
             console.log(rep);/*将数据输出在控制台数据查看*/
             that.setData({
                items: rep.data/*将数据暂存到items数组中*/
              });
            }
        })   /*获取项目库的数据*/ 
    }})