系統(tǒng)微信小程序接口，實(shí)際上除了可以應(yīng)用在微信小程序，還能應(yīng)用在vue、ajax等等各種場(chǎng)景。
上個(gè)月就接到這樣跨平臺(tái)調(diào)用節(jié)點(diǎn)數(shù)據(jù)的需求，因?yàn)槎际莿?dòng)易系統(tǒng)，所以我直接就做成標(biāo)簽這樣擴(kuò)展性復(fù)用性好一些，如果是vue或小程序我們可以做成組件的形式
這里我先整理出用ajax調(diào)用方法
以下是模板的調(diào)用方法
<ul id="qyinfo" class="infoList"></ul>
<div class="page"></div>
@Power.Partial("動(dòng)易API信息分頁(yè)列表-圖文式", new { Domain = "要調(diào)用的站點(diǎn)域名", NodeIdentifier = "zyzw", Count = 20, Split = 0, TitleLength = 50, ContentLength = 200, ShowDate = true, DateFormat = "yyyy-MM-dd", HtmlID = "qyinfo", PaginationClass = "page", ShowPageCount = 9, orderBy = "Priority DESC,PublishTime DESC,ContentId DESC" })
@Power.Partial("動(dòng)易API信息分頁(yè)列表", new { Domain = "要調(diào)用的站點(diǎn)域名", NodeIdentifier = "zyzw", Count = 20, Split = 0, TitleLength = 50, ShowDate = true, DateFormat = "yyyy-MM-dd", HtmlID = "qyinfo", PaginationClass = "page", ShowPageCount = 9, orderBy = "Priority DESC,PublishTime DESC,ContentId DESC" })
@Power.Partial("動(dòng)易API信息列表", new { Domain = "要調(diào)用的站點(diǎn)域名", NodeIdentifier = "zyzw", Count = 6, TitleLength = 50, ShowDate = true, DateFormat = "MM-dd", HtmlID = "qyinfo", orderBy = "Priority DESC,PublishTime DESC,ContentId DESC" })這里要注意幾個(gè)問(wèn)題
1、使用這些標(biāo)簽前需要確保AP已開(kāi)啟微信小程序接口
2、確保域名沒(méi)有跨域問(wèn)題
3、這里的DateFormat只提供yyyy-MM-dd、MM-dd兩種格式
動(dòng)易API信息列表.cshtml
@Power.VisualizationPartialView(new
{
Description = "動(dòng)易API信息列表",
Parameters = new
{
HtmlID = new { DisplayName = "目標(biāo)html元素，會(huì)往里面插入信息", Type = "String", DefaultValue = "qyinfo" },
domain = new { DisplayName = "域名", Type = "String", DefaultValue = "www.zgqingyang.gov.cn" },
nodeIdentifier = new { DisplayName = "節(jié)點(diǎn)標(biāo)識(shí)符", Type = "String", DefaultValue = "zyzw" },
Count = new { DisplayName = "輸出信息數(shù)量", Type = "Int32", ControlType = "Integer", DefaultValue = 20 },
TitleLength = new { DisplayName = "標(biāo)題長(zhǎng)度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },
ShowDate = new { DisplayName = "是否顯示發(fā)布時(shí)間", Type = "Boolean", DefaultValue = true, ControlType = "Boolean" },
DateFormat = new { DisplayName = "發(fā)布時(shí)間日期格式", Type = "String", DefaultValue = "yyyy-MM-dd", ControlType = "ComboBox", ListItems = "{'yyyy-MM-dd':'yyyy-MM-dd（年-月-日）','MM-dd':'MM-dd（月-日）'}" },
orderBy = new { DisplayName = "排序條件", Type = "String", DefaultValue = "Priority DESC,PublishTime DESC,ContentId DESC" }
}
})
@{
string HtmlID = Param.HtmlID ?? "qyinfo";
int TitleLength = Param.TitleLength ?? 50;
string domain = Param.Domain ?? "www.gov.cn";
string nodeIdentifier = Param.NodeIdentifier ?? "zyzw";
int Count = Param.Count ?? 7;
bool ShowDate = Param.ShowDate ?? true;
string DateFormat = Param.DateFormat ?? "MM-dd";
string orderBy = Param.orderBy ?? "Priority DESC,PublishTime DESC,ContentId DESC";
}
<script>
var showdate = "@ShowDate".toLowerCase();
$(document).ready(function() {
$.ajax({
url: 'https://@domain/api/ContentManage/Article/GetList',
data: {
identifier: '@nodeIdentifier',
count: @Count,
orderBy: '@orderBy'
},
type: 'GET',
success: function (data) {
var html = "";
$.each(data, function (i, item) {
if (i >= @Count) return false;
var date = item.PublishTime;
if ('@DateFormat' == 'MM-dd') {
date = item.PublishTime.substring(5, 10);
}else if ('@DateFormat' == 'yyyy-MM-dd') {
date = item.PublishTime.substring(0, 10);
}
var title = item.Title;
if (title.length > @TitleLength) {
title = title.substring(0, @TitleLength - 1) + "…";
}
var linkUrl = item.LinkUrl && item.LinkUrl.trim() !== "" ? item.LinkUrl : item.ContentRouteUrl;
// 當(dāng) LinkUrl 不是http或https開(kāi)頭時(shí)，加上域名和路徑
if (!/^https?:\/\//i.test(linkUrl)) {
linkUrl = "https://@domain/" + linkUrl;
}
html += "<li>" +
(showdate ? "<span class='date'>" + date + "</span>" : "") +
"<a href='" + linkUrl + "' title='" + item.Title + "' target='_blank'>" +
title + "</a></li>";
});
$("#" + "@HtmlID").html(html);
},
error: function (xhr, status, error) {
console.error('獲取數(shù)據(jù)失敗:', error);
}
});
});
</script>
動(dòng)易API信息分頁(yè)列表.cshtml
@Power.VisualizationPartialView(new
{
Description = "動(dòng)易API信息分頁(yè)列表",
Parameters = new
{
HtmlID = new { DisplayName = "目標(biāo)html元素，會(huì)往里面插入信息", Type = "String", DefaultValue = "qyinfo" },
domain = new { DisplayName = "域名", Type = "String", DefaultValue = "www.zgqingyang.gov.cn" },
nodeIdentifier = new { DisplayName = "節(jié)點(diǎn)標(biāo)識(shí)符", Type = "String", DefaultValue = "zyzw" },
Count = new { DisplayName = "輸出信息數(shù)量", Type = "Int32", ControlType = "Integer", DefaultValue = 20 },
TitleLength = new { DisplayName = "標(biāo)題長(zhǎng)度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },
ShowDate = new { DisplayName = "是否顯示發(fā)布時(shí)間", Type = "Boolean", DefaultValue = true, ControlType = "Boolean" },
DateFormat = new { DisplayName = "發(fā)布時(shí)間日期格式", Type = "String", DefaultValue = "yyyy-MM-dd", ControlType = "ComboBox", ListItems = "{'yyyy-MM-dd':'yyyy-MM-dd（年-月-日）','MM-dd':'MM-dd（月-日）'}" },
PageId = new { DisplayName = "頁(yè)碼", Type = "Int32", ControlType = "Integer", DefaultValue = 1 },
PaginationClass = new { DisplayName = "分頁(yè)控件Class", Type = "String", DefaultValue = "pagination" },
orderBy = new { DisplayName = "排序條件", Type = "String", DefaultValue = "Priority DESC,PublishTime DESC,ContentId DESC" },
ShowPageCount = new { DisplayName = "顯示的頁(yè)碼數(shù)量", Type = "Int32", ControlType = "Integer", DefaultValue = 9 },
Split = new { DisplayName = "每隔幾條信息添加分隔符", Type = "Int32", ControlType = "Integer", DefaultValue = 0 }
}
})
@{
string HtmlID = Param.HtmlID ?? "qyinfo";
int TitleLength = Param.TitleLength ?? 50;
string domain = Param.Domain ?? "www.zgqingyang.gov.cn";
string nodeIdentifier = Param.NodeIdentifier ?? "zyzw";
int Count = Param.Count ?? 20;
bool ShowDate = Param.ShowDate ?? true;
string DateFormat = Param.DateFormat ?? "MM-dd";
int PageId = Param.PageId ?? 1;
string PaginationClass = Param.PaginationClass ?? "pagination";
string orderBy = Param.orderBy ?? "Priority DESC,PublishTime DESC,ContentId DESC";
int ShowPageCount = Param.ShowPageCount ?? 9;
int Split = Param.Split ?? 0;
}
<script>
var showdate = "@ShowDate".toLowerCase();
var currentPage = @PageId;
var totalPages = 0;
$(document).ready(function() {
loadData(currentPage);
// 綁定分頁(yè)點(diǎn)擊事件委托
$(document).on('click', '.@PaginationClass a:not(.disabled)', function(e) {
e.preventDefault();
var page = $(this).data('page');
if (page) {
currentPage = page;
loadData(currentPage);
};
// 滾動(dòng)到頂部
window.scrollTo(0, 0);
});
});
// 加載數(shù)據(jù)函數(shù)
function loadData(page) {
$.ajax({
url: 'https://@domain/api/ContentManage/Article/GetPageList',
data: {
identifier: '@nodeIdentifier',
pageId: page,
pageSize: @Count,
orderBy: '@orderBy'
},
type: 'GET',
success: function (data) {
// 處理列表數(shù)據(jù)
var html = "";
$.each(data, function (i, item) {
if (i >= @Count) return false;
var date = item.PublishTime;
if ('@DateFormat' == 'MM-dd') {
date = item.PublishTime.substring(5, 10);
}else if ('@DateFormat' == 'yyyy-MM-dd') {
date = item.PublishTime.substring(0, 10);
}
var title = item.Title;
if (title.length > @TitleLength) {
title = title.substring(0, @TitleLength - 1) + "…";
}
var linkUrl = item.LinkUrl && item.LinkUrl.trim() !== "" ? item.LinkUrl : item.ContentRouteUrl;
// 當(dāng) LinkUrl 不是http或https開(kāi)頭時(shí)，加上域名和路徑
if (!/^https?:\/\//i.test(linkUrl)) {
linkUrl = "https://@domain/" + linkUrl;
}
html += "<li>" +
(showdate ? "<span class='date'>" + date + "</span>" : "") +
"<a href='" + linkUrl + "' title='" + item.Title + "' target='_blank'>" +
title + "</a></li>";
// 添加分隔符
if (@Split > 0 && (i + 1) % @Split === 0 && i < data.length - 1) {
html += "<li class=\"split\"></li>";
}
});
$("#" + "@HtmlID").html(html);
// 處理分頁(yè)
if (data.length > 0 && data[0].pageCount > 0) {
totalPages = data[0].pageCount;
var paginationHtml = createPagination(page, totalPages);
$("." + "@PaginationClass").html(paginationHtml);
}
},
error: function (xhr, status, error) {
console.error('獲取數(shù)據(jù)失敗:', error);
}
});
}
// 創(chuàng)建分頁(yè)HTML
$(document).on('click', '.@PaginationClass a:not(.disabled)', function() {
window.scrollTo(0, 0);
});
function createPagination(currentPage, totalPages) {
var html = '';
var halfCount = Math.floor(@ShowPageCount / 2);
var startPage = Math.max(1, currentPage - halfCount);
var endPage = Math.min(totalPages, startPage + @ShowPageCount - 1);
if (endPage - startPage + 1 < @ShowPageCount) {
startPage = Math.max(1, endPage - @ShowPageCount + 1);
}
// 首頁(yè)
if (currentPage == 1) {
html += '<a class="first disabled" href="nojavascript...void(0);">首頁(yè)</a> ';
} else {
html += '<a class="first" href="nojavascript...void(0);" data-page="1">首頁(yè)</a> ';
}
// 上一頁(yè)
if (currentPage == 1) {
html += '<a class="prev disabled" href="nojavascript...void(0);">上一頁(yè)</a> ';
} else {
html += '<a class="prev" href="nojavascript...void(0);" data-page="' + (currentPage - 1) + '">上一頁(yè)</a> ';
}
// 頁(yè)碼
for (var i = startPage; i <= endPage; i++) {
if (i == currentPage) {
html += '<a class="current">' + i + '</a> ';
} else {
html += '<a href="nojavascript...void(0);" data-page="' + i + '">' + i + '</a> ';
}
}
// 下一頁(yè)
if (currentPage == totalPages) {
html += '<a class="next disabled" href="nojavascript...void(0);">下一頁(yè)</a> ';
} else {
html += '<a class="next" href="nojavascript...void(0);" data-page="' + (currentPage + 1) + '">下一頁(yè)</a> ';
}
// 尾頁(yè)
if (currentPage == totalPages) {
html += '<a class="last disabled" href="nojavascript...void(0);">尾頁(yè)</a>';
} else {
html += '<a class="last" href="nojavascript...void(0);" data-page="' + totalPages + '">尾頁(yè)</a>';
}
return html;
}
</script>
動(dòng)易API信息分頁(yè)列表-圖文式.cshtml
@Power.VisualizationPartialView(new
{
Description = "動(dòng)易API信息分頁(yè)列表",
Parameters = new
{
HtmlID = new { DisplayName = "目標(biāo)html元素，會(huì)往里面插入信息", Type = "String", DefaultValue = "qyinfo" },
domain = new { DisplayName = "域名", Type = "String", DefaultValue = "www.zgqingyang.gov.cn" },
nodeIdentifier = new { DisplayName = "節(jié)點(diǎn)標(biāo)識(shí)符", Type = "String", DefaultValue = "zyzw" },
Count = new { DisplayName = "輸出信息數(shù)量", Type = "Int32", ControlType = "Integer", DefaultValue = 20 },
TitleLength = new { DisplayName = "標(biāo)題長(zhǎng)度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },
ContentLength = new { DisplayName = "內(nèi)容長(zhǎng)度", Type = "Int32", ControlType = "Integer", DefaultValue = 200 },
ShowDate = new { DisplayName = "是否顯示發(fā)布時(shí)間", Type = "Boolean", DefaultValue = true, ControlType = "Boolean" },
DateFormat = new { DisplayName = "發(fā)布時(shí)間日期格式", Type = "String", DefaultValue = "yyyy-MM-dd", ControlType = "ComboBox", ListItems = "{'yyyy-MM-dd':'yyyy-MM-dd（年-月-日）','MM-dd':'MM-dd（月-日）'}" },
PageId = new { DisplayName = "頁(yè)碼", Type = "Int32", ControlType = "Integer", DefaultValue = 1 },
PaginationClass = new { DisplayName = "分頁(yè)控件Class", Type = "String", DefaultValue = "pagination" },
orderBy = new { DisplayName = "排序條件", Type = "String", DefaultValue = "Priority DESC,PublishTime DESC,ContentId DESC" },
ShowPageCount = new { DisplayName = "顯示的頁(yè)碼數(shù)量", Type = "Int32", ControlType = "Integer", DefaultValue = 9 },
Split = new { DisplayName = "每隔幾條信息添加分隔符", Type = "Int32", ControlType = "Integer", DefaultValue = 0 }
}
})
@{
string HtmlID = Param.HtmlID ?? "qyinfo";
int TitleLength = Param.TitleLength ?? 50;
int ContentLength = Param.TitleLength ?? 200;
string domain = Param.Domain ?? "www.zgqingyang.gov.cn";
string nodeIdentifier = Param.NodeIdentifier ?? "zyzw";
int Count = Param.Count ?? 20;
bool ShowDate = Param.ShowDate ?? true;
string DateFormat = Param.DateFormat ?? "MM-dd";
int PageId = Param.PageId ?? 1;
string PaginationClass = Param.PaginationClass ?? "pagination";
string orderBy = Param.orderBy ?? "Priority DESC,PublishTime DESC,ContentId DESC";
int ShowPageCount = Param.ShowPageCount ?? 9;
int Split = Param.Split ?? 0;
}
<script>
var showdate = "@ShowDate".toLowerCase();
var currentPage = @PageId;
var totalPages = 0;
$(document).ready(function() {
loadData(currentPage);
// 綁定分頁(yè)點(diǎn)擊事件委托
$(document).on('click', '.@PaginationClass a:not(.disabled)', function(e) {
e.preventDefault();
// 獲取點(diǎn)擊的頁(yè)碼
var page = $(this).data('page');
if (page) {
currentPage = page;
loadData(currentPage);
};
// 滾動(dòng)到頂部
window.scrollTo(0, 0);
});
});
// 加載數(shù)據(jù)函數(shù)
function loadData(page) {
$.ajax({
url: 'https://@domain/api/ContentManage/Article/GetPageList',
data: {
identifier: '@nodeIdentifier',
pageId: page,
pageSize: @Count,
orderBy: '@orderBy'
},
type: 'GET',
success: function (data) {
// 處理列表數(shù)據(jù)
var html = "";
$.each(data, function (i, item) {
if (i >= @Count) return false;
var date = item.PublishTime;
if ('@DateFormat' == 'MM-dd') {
date = item.PublishTime.substring(5, 10);
}else if ('@DateFormat' == 'yyyy-MM-dd') {
date = item.PublishTime.substring(0, 10);
}
var title = item.Title;
if (title.length > @TitleLength) {
title = title.substring(0, @TitleLength - 1) + "…";
}
var intro = item.Intro || '';
if (intro.length > @ContentLength) {
intro = intro.substring(0, @ContentLength - 1) + "…";
}
//增加圖片展示
var feaimage = item.FeaturedImage ? item.FeaturedImage : '';
if (feaimage && feaimage.indexOf("http") !== 0) {
feaimage = "https://@domain/" + feaimage;
}
if (item.FeaturedImage) {
feaimage = "<div class='pic'><img src='" + item.FeaturedImage + "' alt='" + title + "' style='max-width:360px; max-height:240px;' /></div>";
}
var linkUrl = item.LinkUrl && item.LinkUrl.trim() !== "" ? item.LinkUrl : item.ContentRouteUrl;
// 當(dāng) LinkUrl 不是http或https開(kāi)頭時(shí)，加上域名和路徑
if (!/^https?:\/\//i.test(linkUrl)) {
linkUrl = "https://@domain/" + linkUrl;
}
html += "<li><div class='title'><a href='" + linkUrl + "' title='" + item.Title + "' target='_blank'>" +
title + "</a></div>" + feaimage + "<div class='con'><div class='intro'>" +
intro + "</div><div class='others'><span class='date'>" +
(showdate ? "<span class='date'>" + date + "</span>" : "") + "</span></div></li>";
// 添加分隔符
if (@Split > 0 && (i + 1) % @Split === 0 && i < data.length - 1) {
html += "<li class=\"split\"></li>";
}
});
$("#" + "@HtmlID").html(html);
// 處理分頁(yè)
if (data.length > 0 && data[0].pageCount > 0) {
totalPages = data[0].pageCount;
var paginationHtml = createPagination(page, totalPages);
$("." + "@PaginationClass").html(paginationHtml);
}
},
error: function (xhr, status, error) {
console.error('獲取數(shù)據(jù)失敗:', error);
}
});
}
// 創(chuàng)建分頁(yè)HTML
function createPagination(currentPage, totalPages) {
var html = '';
var halfCount = Math.floor(@ShowPageCount / 2);
var startPage = Math.max(1, currentPage - halfCount);
var endPage = Math.min(totalPages, startPage + @ShowPageCount - 1);
if (endPage - startPage + 1 < @ShowPageCount) {
startPage = Math.max(1, endPage - @ShowPageCount + 1);
}
// 首頁(yè)
if (currentPage == 1) {
html += '<a class="first disabled" href="nojavascript...void(0);">首頁(yè)</a> ';
} else {
html += '<a class="first" href="nojavascript...void(0);" data-page="1">首頁(yè)</a> ';
}
// 上一頁(yè)
if (currentPage == 1) {
html += '<a class="prev disabled" href="nojavascript...void(0);">上一頁(yè)</a> ';
} else {
html += '<a class="prev" href="nojavascript...void(0);" data-page="' + (currentPage - 1) + '">上一頁(yè)</a> ';
}
// 頁(yè)碼
for (var i = startPage; i <= endPage; i++) {
if (i == currentPage) {
html += '<a class="current">' + i + '</a> ';
} else {
html += '<a href="nojavascript...void(0);" data-page="' + i + '">' + i + '</a> ';
}
}
// 下一頁(yè)
if (currentPage == totalPages) {
html += '<a class="next disabled" href="nojavascript...void(0);">下一頁(yè)</a> ';
} else {
html += '<a class="next" href="nojavascript...void(0);" data-page="' + (currentPage + 1) + '">下一頁(yè)</a> ';
}
// 尾頁(yè)
if (currentPage == totalPages) {
html += '<a class="last disabled" href="nojavascript...void(0);">尾頁(yè)</a>';
} else {
html += '<a class="last" href="nojavascript...void(0);" data-page="' + totalPages + '">尾頁(yè)</a>';
}
return html;
}
</script>以上是用標(biāo)簽調(diào)用的方法，如非動(dòng)易系統(tǒng)，把 script 中的代碼復(fù)制到頁(yè)面，把@符后面的參數(shù)替換成實(shí)際參數(shù)，即可
