主要H5文件
<!DOCTYPE html>
<html class="pixel-ratio-1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>精选观点</title>
<meta name="description" content="">
<meta name="author" content="社区">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
</head>
<style>
@charset "utf-8"; /* reset.css */
body {
overflow-y: visible !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: moz-none;
user-select: none;
}
body * {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* Safari */
}
/** html4 reset **/
body, div, ul, ol, li, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
img {
border: 0 none;
}
em {
font-style: normal;
}
ol, ul, li {
list-style-type: none
}
/** html5 reset **/
header, footer, section, article {
margin: 0;
padding: 0;
display: block;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover {
opacity: 1
}
.clear {
clear: both;
font-size: 0;
height: 0;
line-height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
content: "";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix {
zoom:1;}
/** Body, links, basics **/
body,html {
width: 100%;
height: 100%;
font-size: 100px;
overflow-x: hidden;
}
body {
font-size: 0.14rem;
line-height: 1.8;
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-family: arial;
background: #f4f4f4;
}
/* 布局grid */
section.main {
width: 100%;
height: 100%;
position: relative;
z-index: 100;
}
section.main.fixed {
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
section.main.fixed,.ui.layout {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
section.main.fixed > article {
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
}
section.main.fixed > article, .ui.layout > .row-1 {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.ui.layout {
height: inherit!important;
}
@media (max-device-width: 320px ) {
html,body {
font-size:85px;
}
body {
font-size: 0.14rem;
}
}
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {
html {
font-size: 117.1875px;
}
}
/*通用*/
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: rgba(0,0,0,0);
}
/*精选观点*/
.jyg-com-view ul {
background: #ffffff;
}
.jyg-com-view li {
border-bottom: 1px solid #e5e5e5;
padding: 0.16rem 0.15rem 0.21rem;
}
.jyg-com-view li:last-child {
border-bottom: none;
}
.jyg-com-view h4 {
font-size: 0.16rem;
color: #222222;
font-weight: normal;
line-height: 0.24rem;
}
.jyg-com-view h4>em {
display: inline-block;
width: 0.36rem;
height: 0.18rem;
font-size: 0.1rem;
text-align: center;
line-height: 0.18rem;
-webkit-border-radius: 0.02rem;
border-radius: 0.02rem;
vertical-align: top;
margin: 0.03rem 0.1rem 0 0;
}
.jyg-com-view .jyg-privacy {
color: #ff9e37;
border: 1px solid #ff9e37;
}
.jyg-com-view .jyg-free {
color: #0a54b0;
border: 1px solid #0a54b0;
}
.jyg-com-view p {
font-size: 0.14rem;
color: #555555;
line-height: 0.22rem;
padding: 0.05rem 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.jyg-com-view .ui.layout {
height: 0.18rem;
font-size: 0.12rem;
color: #666666;
padding-top: 0.11rem;
}
.jyg-com-view-info i {
float: left;
display: block;
width: 0.17rem;
height: 0.17rem;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.jyg-com-view-info img {
width: 0.17rem;
height: 0.17rem;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.jyg-com-view-info strong {
float: left;
display: block;
font-weight: normal;
padding: 0 0.15rem 0 0.07rem;
}
.jyg-com-view-opera a {
float: left;
display: block;
color: #666666;
padding: 0.01rem 0 0 0.18rem;
}
.jyg-com-view-opera .jyg-comment {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD5SURBVEhL7ZU9CsJAEIVXWxsLsbZRPEAKe7G3tFhIk7/SG+QEoneIpTfwBDZiZ7yItW+GISC4hE1Gi+CDR2Yn2e+FLNk1cRwXcAnfFE28wpBQ3LlQVsWlRC6UVXG7FxBF0SxJkq2vaZ4gWM6ANE2nnwB1pnmCYDkDtPQPqJUzAAsWwIcGDgTBcgZkWTbGw2tf0zxBsJwBWupWwHe3ayzQEYNGBw62hxVDROjR4UX3SuJK2xhr7SAMw6GPsbktALrmed4nBoBL+Ez3iMfgtqI3BtSi7KG+oH77F1oLn2gC6APwDa4naesK8D38RMBcWroCeISAnQx/LWNeCpgj14xREzwAAAAASUVORK5CYII=") no-repeat left center;
background-size: 0.12rem 0.12rem;
margin-right: 0.3rem;
}
.jyg-com-view-opera .jyg-praise {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGxSURBVEhLvZQ/SwNBEMUjKNoI/kFs1EqwtRELEbT0E4iNZ5K73B0xQURBbBK0NEUqwULQVhEU7WwEP4ABEWOQkPhJ/M3eXKJgk9zFB4+dN7Mzb2+zJNEJHMdZgK+wCb9s23a0FA8Y+gYXJU6n02PE76yzphgVnufNZTKZJ5UGGBShqzIaXNddYdilSgO5IjFRGQ1iwBdcqDTAYCtOg02GlVQaoPOY7quMBoY9wDWVBugjaKnsDpxwgCEl1jtkX5ANQP6MfJl1m3WH1edLlyj92vcneH6TNHk0VeFpLpcb1FIL5C1YZN+uGMADeE/uOZvNjptNJA7hC8lKSHRd42N5nmZjB6AvD4MXx7BGMpmcsCxrRMjLWKZ4a4pdgplyrU0jCComUGAwH9VAIAc3QS8MCoVCv1yzEb0woH8VXoeiFwZnPNeNUMRqkEqlhuX+eTBDJhG3Ab3y93GiMl4D+XHprTFjSlPxGtBnc/pzlQHiMpA7p+8TgxlNBYjLgJ49hpdVtkHyQ0ODbgyYsU5P1ff9UU21QfFKTORLhBq3DIhvyDVComus9Z85+MjwaW35TyQS322m+jFP7EpvAAAAAElFTkSuQmCC") no-repeat left center;
background-size: 0.12rem 0.12rem;
}
.jyg-com-view-opera .jyg-praise.active {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFVSURBVEhLYyAFGKfNZHWOXHXfKXLlH+eIlY1QYeoB+/j1AkAL/kPwyn9O0Su1oFLUAc6x64QRFqz67xSxqgkqRR3gEr7aGdkC54hV66FS1AFAQ6cgWwD0wQGoFOXAPnqtDNDF31EtWLkWKk0ZCA1dxQY07DCy4WAcsaoGqoR8ADIcaNAmDMOBqcgtco0GVBl5wD58uQIwnI9jGg7ExEYw0OuBQEMK4DhyVTo4SCJXlgNd+Rmr4UAMlP8J1LsBiLuA6hrQMVC+2j5mpQooZWAaELHSG6s4iRjo2EfYLYha7YNVnAxMWwsiVt6mqQXAIFpAWwuiViXQ1AJQMqedBRErH4DzAVZJKlgADn9aWgDE0TSzAFylAisnmlkAKhzBhoMAVgWU+iBipSvUeOpbAAye7VCjIQAoeAdV0crPjmEr9NFrL4I4YtUvoMs320cuFYEaDQQMDAAywGKgv81ckgAAAABJRU5ErkJggg==") no-repeat left center;
background-size: 0.12rem 0.12rem;
}
</style>
<body>
<div class="page page-current" data-script="" id="" data-pageTitle="" data-refresh="true">
<section class="main fixed" data-page="home" style="position: fixed">
<article class="content">
<!-- 热门观点 -->
<div id="jyg-com-wrap" class="jyg-com-view jyg_view">
<ul id="jyg_view"></ul>
</div>
</article>
</section>
</div>
</body>
<script>
/**
* 加载完成后初始化页面
*/
window.onload = function() {
init();
//初始化页面
//百分点埋点初始化
window["_BFD"] = window["_BFD"] || {};
_BFD.script = document.createElement("script");
_BFD.script.type = "text/javascript";
_BFD.script.async = true;
_BFD.script.charset = "utf-8";
_BFD.script.src = "http://10.84.140.75:8080/jsapi/zsfuzun-h5.js";
//（测试内网）js代码路径，由百分点的部署人员提供
//_BFD.script.src=('https://bic.ebscn.com:9091/jsapi/zsfuzun-h5.js'); //生产外网
// js代码路径，由百分点的部署人员提供
document.getElementsByTagName("head")[0].appendChild(_BFD.script);
//百分点埋点
try {
onEvent('MAction', {
'action_name': 'start',
'type': 'page',
'name': '精选观点'
});
} catch (e) {}
}
var sq_url = "http://10.84.137.42:18002/servlet/json";
var sq_domain = "http://10.84.137.42:18002";
var platfrom = "";
//平台信息，1：安卓，2：ios
var user_id = "";
var platfrom = "";
//平台信息，1：安卓，2：ios
/**
*初始化方法
* */
function init() {
platfrom = platfromCheck();
//获取平台信息
user_id = queryUrlParam("user_id");
viewList();
}
/*
* 页面事件绑定
*/
function bindPageEvent() {
//跳转详情页
var pointView_li = document.getElementsByTagName("li");
for (var i = 0; i < pointView_li.length; i++) {
pointView_li[i].onclick = function() {
var view_id = this.getAttribute("data-viewId");
url = sq_domain + "/m/gdytg/views/point/detail.html?view_id=" + view_id;
if (platfrom == "1") {
selecedexternal.selectedNewsDetail(url);
} else if (platfrom == "2") {
selectedNewsDetail(url);
}
//百分点埋点
try {
onEvent('MEvent', {
'id': 'home_selected_views_click',
'params': {
"iid": view_id,
"name": this.getElementsByTagName("span")[0].innerHTML
}
});
} catch (e) {}
}
}
}
function viewList() {
var viewListCallback = function(data) {
if (data.error_no == "0") {
if (data.results[0].data.length > 0) {
var data = data.results[0].data;
var strHTML = "";
var imgUrl = "";
var recommendShow = "";
for (var i = 0; i < data.length; i++) {
strHTML += "<li data-viewId='" + data[i].view_id + "'>";
if (data[i].is_recommend == 0) {
recommendShow = "最新";
} else {
recommendShow = "推荐";
}
strHTML += "<h4><em class='jyg-free'>" + recommendShow + "</em><span>" + data[i].title + "</span></h4>";
strHTML += "<p>" + formatContent(data[i].content) + "</p>";
strHTML += "<div class='ui layout'>";
strHTML += "<div class='row-1 jyg-com-view-info'>";
if (data[i].face_image_small.indexOf("http") == "0") {
//图片地址以http开头
imgUrl = data[i].face_image_small;
} else {
imgUrl = sq_domain + data[i].face_image_small;
}
strHTML += "<i><img src='" + imgUrl + "' /></i>";
strHTML += "<strong>" + data[i].user_name + "</strong>";
strHTML += "<span>" + data[i].create_time + "</span>";
strHTML += "</div>";
strHTML += "<div class='jyg-com-view-opera'>";
strHTML += "<a href='#' class='jyg-comment'>" + data[i].comment_num + "</a>";
if (data[i].is_zan == "yes") {
strHTML += "<a href='#' class='jyg-praise active'>" + data[i].praise_num + "</a>";
} else {
strHTML += "<a href='#' class='jyg-praise'>" + data[i].praise_num + "</a>";
}
strHTML += "</div>";
strHTML += "</div>";
strHTML += "</li>";
}
document.getElementById("jyg_view").innerHTML = strHTML;
var param = {
"height": document.getElementById("jyg-com-wrap").clientHeight,
"flag": "3"
};
// alert("homeNewsHeight");
if (platfrom == "1") {
//安卓
selecedexternal.homeNewsHeight(JSON.stringify(param));
} else if (platfrom == "2") {
//ios
homeNewsHeight(param);
}
bindPageEvent();
//绑定事件
}
} else {
alert(data.error_info);
}
}
var param = {
"funcNo": 1106403,
"cur_page": 1,
"num_per_page": 2,
//"user_id" : user_id
};
if (platfrom == "2") {
window.setTimeout(function() {
ajaxPost(sq_url, param, viewListCallback)
}, 100);
//延迟执行800毫秒
} else if (platfrom == "1") {
ajaxPost(sq_url, param, viewListCallback);
}
//ajaxPost(sq_url, param, viewListCallback);
}
//创建ajax请求
function ajaxPost(url, param, callback) {
var xmlHttp;
/*
* 创建XMLHttpRequest实例
*/
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
/*
* 2 服务器向浏览器响应请求
*/
xmlHttp.onreadystatechange = function() {
//alert(xmlHttp.readyState);
//alert(xmlHttp.status);
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 304) {
var data = xmlHttp.responseText;
//alert(data);
callback(JSON.parse(data));
}
}
}
/*
* 3 浏览器与服务器建立连接
*/
xmlHttp.open("POST", url, true);
//如果是POST请求方式，设置请求首部信息
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
/*
* 4 浏览器向服务器发送请求
*/
param = (function(value) {
var oStr = "";
for (var key in value) {
oStr += key + "=" + value[key] + "&";
}
;return oStr;
}(param));
xmlHttp.send(param);
//xmlHttp.send(null);
}
/**
* 判断手机平台号
*/
function platfromCheck() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
//android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//ios终端
if (isAndroid) {
return "1";
} else if (isiOS) {
return "2";
}
}
//将<与>转换为括号
function formatContent(content) {
if (content) {
var contentresult = content.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
var dd = contentresult.replace(/<\/?.+?>/g, "");
var dds = dd.replace(/ /g, "");
//dds为得到后的内容
return dds;
// var contentresult = content.replaceAll("&","&").replaceAll("<","<").replaceAll(">",">");
// return contentresult;
} else {
return content;
}
}
String.prototype.replaceAll = function(AFindText, ARepText) {
raRegExp = new RegExp(AFindText,"g");
return this.replace(raRegExp, ARepText);
}
/**
* 获取URL参数
*/
function queryUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
</script>
</html>另外一个js文件，埋点的js处理代码
//新版H5监听
function onEvent(tag, params) {
try {
window.BFDMethod.onBFDEvent(tag, JSON.stringify({
params: params
}));
} catch (e) {
try {
if (IOSBFDEvent && typeof (IOSBFDEvent) == 'function') {
if (tag == "MAction") {
var params = JSON.stringify(params);
} else {
var params = JSON.stringify({
params: params
});
}
IOSBFDEvent(tag, params);
}
} catch (e) {
try {
prompt(tag, JSON.stringify({
params: params
}));
} catch (e) {
}
}
}
}
//百分点H5调用原生推荐js代码
function bfd_recommend(bid, params, callback) {
var rec_params = {};
rec_params.rec_callback = callback;
rec_params.bid = bid;
rec_params.params = params;
try {
window.BFDMethod.onBFDEvent("bfd_rec", JSON.stringify(rec_params));
} catch (e) {
try {
IOSBFDEvent("bfd_rec", JSON.stringify(rec_params));
} catch (e) {
try {
prompt("bfd_rec", JSON.stringify(rec_params));
} catch (e) {
}
}
}
}http://www.savh.cn/thread-306.htm
转载请注明:Savh.Cn 发表
