欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  wx.request微信小程序与PHP后台通信示例

小程序应用 网络 1085 0评论

最新在学习微信小程序,通过官方文档教程学习对小程序前端算是有了基本了解,并可以简单的写一个前端。但是前端写好了,如何连接后台服务器和数据库实现数据交互呢?下面将通过简单的实例来给大家演示一下,希望刚开始学习小程序的有所帮助


一、PHP后端代码


最开始是要能连接到服务器上 MySQL 数据库:(php文件要放在指定目录下,服务器布置测试的时候你应该知道在哪里,这里就不说了)


test.php文件

<?php
    //$name=$_GET["name"];//接收参数
    $hostname_conn = "localhost";
    $database_conn = "xdq";//数据库名
    $username_conn = "root";//用户名
    $password_conn = "xxxxxx";//自己数据库的密码
    //连接MYSQL数据库
    $conn = mysqli_connect($hostname_conn, $username_conn, $password_conn,$database_conn)or trigger_error(mysqli_error(),E_USER_ERROR);
?>


连接上后对数据的操作(先把数据库上的一个表 article 输出来看一下是否成功)

$sql = "SELECT *FROM article";
     mysqli_query($conn, "set names 'utf8'");//不写这句有可能乱码
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
            echo json_encode($row,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
            //将请求结果转换为json格式,微信只能对json格式的数据进行操作
        }
}


二、微信小程序前端


使用 wx.request 方法对自己的服务器发起网络连接请求,此方法写在 onLoad:function() 里面,当小程序启动时自动请求连接


index.js文件

  onLoad: function (e) {
    var that = this;
    wx.request({
      url: 'https://www.xxxx.top/test.php',//此处填写你后台请求地址
      method: 'GET',
      header: {'Content-Type': 'application/json' },
      data: {},
      success: function (res) {
        // success
        console.log(res.data);//打印请求返回的结果
        that.setData({ item_list: res.data})
 
      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete
      }
    })
  }

看一下结果已经出来了:

20180505174552507.png


但是,同时报错了,这就是坑之所在啊


报错的地方在哪里呢?


在这里!!!

that.setData({ item_list: res.data})

item_list 是我在 data 里面定义的一个数组,格式是这样的

item_list: [
      { 
        article_title:"这里是标题,唉,好长啊啊啊", 
        article_content: "这里是内容这里是内容这里是内容这里是内容这里是内容",
        author:"匿名哈哈哈哈",
        article_time: "2018/4/12 14:25:43",
        like_num:999,
        favor_img: "../../image/favor.png",
        show: false
      },
      {
        article_title: "这里是标题2",
        article_content: "这里是内容这里是内容这里是内里",
        author: "匿名",
        article_time: "2018-4-12 14:25:43",
        like_num: 0,
        favor_img: "../../image/favor.png",
        show: false
      },
]

 

原来是因为从服务器返回结果还不是微信能读取json样式,必须要处理一下才能 setData (这可是我查了好多资料才知道的,尴尬!!)


那就在php后端修改为能微信能读取的数组,完整代码如下(背景深色为修改部分):


test.php

<?php

    //$name=$_GET["name"];//接收参数

    $hostname_conn = "localhost";

    $database_conn = "xdq";//自己建数据库名

    $username_conn = "root";

    $password_conn = "xxxxxx";

    //连接MYSQL数据库

    $conn = mysqli_connect($hostname_conn, $username_conn, $password_conn,$database_conn)or trigger_error(mysqli_error(),E_USER_ERROR);

    if(!$conn){

        echo "连接不成功!";    

    }

    $sql = "SELECT *FROM article";

     mysqli_query($conn, "set names 'utf8'");

    $result = mysqli_query($conn, $sql);

    class Article{

        public $article_title;

        public $article_content;

        public $article_time;

        public $author;

        public $like_num;

        public $anouymous;

        public $article_label;

    }

    $data = array();

    if (mysqli_num_rows($result) > 0) {

        while($row = mysqli_fetch_assoc($result)) {

            $article=new Article();

            $article->article_title=$row["article_title"];

            $article->article_content=$row["article_content"];

            $article->article_time=$row["article_time"];

            $article->author=$row["author"];

            $article->like_num=$row["like_num"];

            $article->anouymous=$row["anouymous"];

            $article->article_label=$row["article_label"];

            $data[] = $article;

            }

            echo json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//将请求结果转换为json格式

   }

?>


最后重启小程序,打印结果如下:

20180505181411512.png

这才是微信能读取的数据!这时再去 setData 就可成功了。


整体来看,其实也不难,但是对一个小白来说无从下手,并且到处去查阅资料还找不到就是真的很烦了。


原文地址:https://blog.csdn.net/LiXiuu/article/details/80207414

转载请注明: ITTXX.CN--分享互联网 » wx.request微信小程序与PHP后台通信示例

最后更新:2019-01-10 13:17:35

赞 (3) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽