ESAP达摩院 思想有多远,我们就能走多远

ESAP4系列教程|APP自定义列表页面


上一章讲了详情页面的自定义,这一章继续讲列表页面,更简单哦

先看疗效

将原生的列表改成直接显示商品图片的列表,改改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


近似文章