上一章讲了详情页面的自定义，这一章继续讲列表页面，更简单哦
先看疗效
将原生的列表改成直接显示商品图片的列表，改改css，还可以做淘宝的卡片列表哦。
实现步骤
第一步，制作h5模板
在NX安装目录/web/esap/下建立一个html文件，例如goods.html，作为商品表的列表页面。
goods.html文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>商品查询</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<a v-for="item,key in data1" :href="'http://外部IP或域名/#!/myReport/1/133/' + item.RecordID + '/0/null'" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" :src="'http://esap:9090/p/' + item.图片" alt="图片" />
</div>
<div class="weui-media-box__bd">
<p>{{ item.品名 }}</p>
<p>{{ item.规格 }}</p>
</div>
</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">增加</a>
<a href="javascript:history.go(-1);" class="weui-btn weui-btn_mini weui-btn_primary">返回</a>
</div>
<script>
let getUrlKey = function(name){
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
};
var app = new Vue({
el: '#app',
data: {
data1: {}
},
created: function() {
axios.get('http://esap:9090/api2/goods?id='+getUrlKey('id')) // 需要预先在esap/sql/api2下定义goods模板
.then(r => {
this.data1=r.data.data[0]
})
.catch(e => { console.log(e) })
}
})
</script>
</body>
</html>
说明：
-
'http://外部IP或域名/#!/myReport/1/133/' + item.RecordID + '/0/null'是拼接详情页面的url，可以从原生详情页面的url修改，133是模板号 -
'http://esap:9090/p/' + item.图片是拼接商品图片URL，属于esap-api
第二步，定义数据查询api
本案使用esap的数据api，当然，你也可以使用NX自带的api。
在上一篇的esap/sql/api2/xs.get文件追加定义goods模板如下：
{{define "goods"}}
select * from 商品表
{{end}}
第三步，设置发布APP
在设计器中设置商品表模板属性-外部界面-【列表页面】，URL设为：esap/xsdd.html?id={RecordID}
完成
通过上述3步，就实现了列表页面自定义，报表详情页面仍然使用原生页面。
回顾一下上一篇的详情页面自定义变化：
再看看列表页面自定义后的变化：
小结
-
使用vue + axios + weui编写h5页面。
-
使用esap-api获取数据，其中图片api为：
http://esap服务器:9090/p/picId -
设置外部界面中的自定义URL。
PS: 慧表NX外部界面需正式版特殊授权，试用版无此选项，特此提醒。
2019-08-02