layui学习记录（五）：和微信小程序的云数据库交互
前端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>
<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的数据表格。