前端HTML代码

这部分代码之前已经记录了很多次了，就是一个table标签再用layui进行方法渲染。

<div class="demoTable">
    <button id="add_news" class="layui-btn" type="button" onclick="addNews()">添加</button>
</div>
<table class="layui-hide" id="index_news" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--封面显示-->
<script type="text/html" id="coverimg">
    <div onclick="show()" id="cover">
        <img width="100px" height="50px" layer-src="{{d.coverimg}}" src="{{d.coverimg}}"/>
    </div>
</script>

<!--ID自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

其中比较值得一提的是数据表格中显示封面图片还有数据表格ID进行自增，都需要在渲染的时候用templet进行绑定，这里我绑定的是一个img标签，src属性是动态的（因为要显示不同的图片），所以用到了layui的模板语法。其余的都是layui示例代码，可直接拿来用。

  cols: [[
      {type:'checkbox',fixed:'left'}
      ,{title:'ID', templet: '#xuhao',fixed: 'left', width: 120,unresize: true, sort: true}
      ,{field:'title', title:'资讯标题'}
      ,{field:'coverimg', title:'封面',templet:'#coverimg'}
      ,{field:'activityDate', title:'活动时间'}
      ,{field:'createTime', title:'创建时间'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
  ]]

• 效果
  

后端

 /** 表格展示 **/
 public function NewsTable(){
     $page=$_GET['page'];
     $pagesize=$_GET['limit'];
     $skip = ($page - 1) * $pagesize;
     $util=new Util();
     $access_token=$util->getAccessToken();
     $env=$util->env;
     //查询数据库
     $url="https://api.weixin.qq.com/tcb/databasequery?access_token=$access_token";
     $data=array(
         "env"=>$env,
         "query"=>"db.collection(\"news\").limit($pagesize).skip($skip).get()"
     );
     $data=json_encode($data);
     $result=$util->http_post_json($url,$data);
     $util->returnQueryResult($result);
 }

这里的代码涉及到和微信云数据库进行交互的问题，参考微信云开发手册HTTP API部分。最关键的就是要获得$access_token和$env去请求数据库（对微信云数据库进行查改增删都要用到这两个参数）。

access_token是小程序全局唯一后台接口调用凭据，调用绝大多数后台接口时都需使用。开发者可以通过 getAccessToken 接口获取并进行妥善保存。为了 access_token 的安全性，后端 API 不能直接在小程序内通过 wx.request 调用，即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token，并调用相关 API；

env是云环境ID，开发者应该可以从微信小程序后台查到。

因此，我的代码里写了一个getAccessToken（）用于获取接口调用凭据，返回值就是查询数据库需要的access_token。其中，vget（）是用cURL去向微信服务器发起请求（cURL用法），返回值是一个包含access_token的JSON对象。

//获取接口调用凭证
public function getAccessToken(){
  $appID='你的appID';
  $appSecret='你的app密钥';
  $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appID&secret=$appSecret";
  $result=$this->vget($url);
  $result=json_decode($result,true);
  $access_token=$result['access_token'];
  return $access_token;
}

//向微信服务器发起请求
 public function vget($url){
     $info=curl_init();
     curl_setopt($info,CURLOPT_RETURNTRANSFER,true);
     curl_setopt($info, CURLOPT_BINARYTRANSFER, true) ; // 在启用 CURLOPT_RETURNTRANSFER 时候将获取数据返回
     curl_setopt($info,CURLOPT_URL,$url);
     $output= curl_exec($info);
     curl_close($info);
     return $output;
    }

代码参考微信小程序手册，这里我列出了URL的请求属性，方便查看。

言归正传，获取到access_token后直接按照开发手册里的url去请求，把参数填好，按照请求参数示例的格式去数据库查询就可以了。
我是把请求参数用json_encode成字符串，再用http_post_json（）去请求，其中$response就是我们需要的返回数据。（后面有空了，我会写一下cURL这部分的学习笔记）$response是一个字符串，需要用JSON_decode（）解码成JSON对象，就能拿到我们需要的数据了。

  function http_post_json($url, $jsonStr)
  {
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
      curl_setopt($ch, CURLOPT_POST, 1);
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonStr);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($ch, CURLOPT_HTTPHEADER, array(
              'Content-Type: application/json; charset=utf-8',
              'Content-Length: ' . strlen($jsonStr)
          )
      );
      $response = curl_exec($ch);
      $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
      curl_close($ch);
      return array($httpCode, $response);
  }

总结

这部分由于需要请求的参数比较多，容易混乱，我大概梳理一下和微信小程序云数据库的交互过程就是：
1、用cURL的方法向微信服务器发起请求，拿到access_token（接口调用凭证）。
2、利用access_token再向微信小程序云数据库发起查询（增删改查 过程类似）请求获取我们需要的数据。
3、按照layui的数据格式，最终显示到layui的数据表格。