直接在.html文件中请求接口的写法示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>测试</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html {
font-size: calc(100vw / 7.5);
}
@media screen and (min-width: 750px) {
html {
font-size: calc(750px / 7.5);
}
}
body {
font-size: .28rem;
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, sans-serif;
width:7.5rem;
margin:0 auto;
background-color: #F5F5F8;
}
.wrap {
padding:.4rem 0 .8rem;
font-family: PingFang-SC-Medium;
letter-spacing: 0;
color:#333333;
padding: .4rem 0 .8rem;
}
a {
display: flex;
align-items: center;
width: 100%;
text-decoration: none;
font-size: .32rem;
color: #333333;
line-height: .36rem;
background-color: white;
padding: .24rem .3rem;
margin-bottom: .06rem;
box-sizing: border-box;
}
.arrow {
width: .2rem;
height: .2rem;
border-top: 1px solid #A5A5A5;
border-right: 1px solid #A5A5A5;
margin-right: 0;
margin-left: auto;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="wrap">
</div>
<!-- 注意此处所用jq文件路径 -->
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent
if (/vivo x7/i.test(userAgent)) {
var fontSize = 100 / (parseFloat(getComputedStyle(document.documentElement).fontSize) / (Math.min(innerWidth, screen.width) / 7.5))
document.documentElement.style.fontSize = "calc(" + fontSize + "vw / 7.5)"
}
function checkCalcSupport() {
var div = document.createElement("div")
div.style.cssText = "width: calc(100vw / 7.5)"
return div.style.cssText.length
}
function calculateRootFontSize() {
var idealViewportWidth = window.innerWidth
var ua = navigator.userAgent
if (ua.match(/MI 5/) && ua.match(/QQBrowser/) && ! ua.match(/MicroMessenger/)) {
idealViewportWidth = (3 * idealViewportWidth) / 2.6 // 小米虽然 dpr 是3 但表现的依然是 2.6
}
document.documentElement.style.fontSize = idealViewportWidth / 7.5 + "px";
}
if(!checkCalcSupport()) {
calculateRootFontSize()
}
$(function () {
var urlPrefix=""; //接口地址前缀
$.ajax({
type: "POST",
url: `${urlPrefix}/yourInterfacePath`,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
dataType: "json",
success: function(data){
data.serviceInformationWeb.map(function (v,i) {
$(`<a href="service-guide-item.html?id=${v.id}">
<span>${v.guideTitle}</span>
<span class="arrow"></span>
</a>`).appendTo($(".wrap"))
})
}
});
})
</script>
</body>
</html>
由上述页面带参数跳转到别的页面
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>服务指南</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html {
font-size: calc(100vw / 7.5);
}
@media screen and (min-width: 750px) {
html {
font-size: calc(750px / 7.5);
}
}
body {
font-size: .28rem;
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, sans-serif;
width:7.5rem;
margin:0 auto;
background-color: #F5F5F8;
}
.wrap {
padding:.2rem .4rem .8rem;
font-family: PingFang-SC-Medium;
letter-spacing: 0;
/* line-height: .48rem; */
color:#333333;
padding: .6rem .3rem;
}
.title {
font-size: .48rem;
color: #000;
line-height: .66rem;
margin-bottom: .4rem;
}
.item {
padding-bottom: .4rem;
}
h3 {
font-size: .36rem;
line-height: .5rem;
/* margin-bottom: .16rem; */
color: #000;
font-weight: normal;
}
p {
font-size: .30rem;
line-height: .42rem;
color: #333;
margin-top: .16rem;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
line-height: .42rem;
}
.imgBox {
width: 100%;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
</div>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent
if (/vivo x7/i.test(userAgent)) {
var fontSize = 100 / (parseFloat(getComputedStyle(document.documentElement).fontSize) / (Math.min(innerWidth, screen.width) / 7.5))
document.documentElement.style.fontSize = "calc(" + fontSize + "vw / 7.5)"
}
function checkCalcSupport() {
var div = document.createElement("div")
div.style.cssText = "width: calc(100vw / 7.5)"
return div.style.cssText.length
}
function calculateRootFontSize() {
var idealViewportWidth = window.innerWidth
var ua = navigator.userAgent
if (ua.match(/MI 5/) && ua.match(/QQBrowser/) && ! ua.match(/MicroMessenger/)) {
//value = (3 * value) / window.devicePixelRatio
idealViewportWidth = (3 * idealViewportWidth) / 2.6 // 小米虽然 dpr 是3 但表现的依然是 2.6
}
document.documentElement.style.fontSize = idealViewportWidth / 7.5 + "px";
}
if(!checkCalcSupport()) {
calculateRootFontSize()
}
$(function () {
var urlPrefix=""; // 接口地址前缀
var id=window.location.search.split("=")[1];
$.ajax({
type: "POST",
url: `${urlPrefix}/接口地址前缀`,
data:`id=${id}`,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
dataType: "json",
success: function(data){
data.serviceInformationWeb.content=data.serviceInformationWeb.content.replace(/\%26nbsp;/g," ")
$('.item').html(data.serviceInformationWeb.content)
}
});
})
</script>
</html>
