嵌入app的h5与普通的h5有何不同？
- WBOY원래의
- 2016-06-06 20:08:272016검색
那里有不同？区别大不大？
我要做一个H5页面嵌入到app里，但我不会写于是我就用抓包工具抓取了一个类似的页面，我想把我的程序加入进去但不知道如何去改动，好多js代码看不懂，希望有大神帮忙看下代码
是做一个签到页面
<code>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>签到</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/collect.js"></script>
<div class="header">
<span class="sign"><img class="sign_img" src="img/sign_img.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" ><b class="sign_in">签到</b></span>
<span class="header_middle">
<p class="header_wen1"></p>
<p class="header_wen2">连续签到有更多惊喜哦</p>
</span>
<div class="calendar_out">
<img class="line" src="img/line.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
<dl data-index="0">
<dt class="circle circle_gray">
<b class="point"></b><img class="yes yes_gray" src="img/gray_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="1">
<dt class="circle current circle_now">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days current">...</dd>
</dl>
<dl data-index="2">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="3">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="4">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="5">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="6">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
</div>
</div>
<div class="content">
<span class="prize_list">昨日获奖名单></span>
<div class="content_down">
<div class="box_out">
<span class="sign_box">
<img class="sign_qb" src="img/sign_qb.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</span>
<img class="sign_img2" src="img/sign.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</div>
<span class="integral_out"><b class="integral sign_total">...</b>积分</span>
</div>
<span class="integral_pool">积分奖池<b class="men_num sign_users">...</b>人贡献<i class="point_num sign_total">...</i>分</span>
</div>
<div class="rule">
<p>签到规则</p>
<span class="line2"></span>
<ul>
<li>1.<b class="tb">签到和签到分享</b>可以获得积分;</li>
<li>2.坚持每日签到和签到分享可以获得更更丰厚的奖励;</li>
<li>3.漏签会使签到进度重置，坚持签到奖励更丰富！</li>
<li>4.签到人数每增加1人，积分奖池就增加1积分;</li>
<li>5.次日0:00从当日签到的所有用户中<b class="tb">随机抽取1000名</b>中奖用户，平分积分奖池的奖励。</li>
<li>6.活动最终解释权归人人夺宝团队所有。
</li>
<li>7.温馨提示：叫上小伙伴一起签到，有更多奖励哦！</li>
</ul>
</div>
<div class="popup_out">
<div class="popup_in">
<div class="popup">
<p class="popup_w">签到分享可以获得<br>签到积分<b class="pop_tb">+<i class="pop_tb_in">5</i></b>的机会</p>
<div class="pop_btn">
<span class="pop_sign_btn">我要签到</span>
<span class="share">签到分享</span>
</div>
<img class="close" src="img/close.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</div>
</div>
</div>
<script type="text/javascript">
var pop_sign = $('.pop_sign_btn')
var btn_sign = $('.sign');
var total_point = 0;
var total_user = 0;
var times = 0;
var sign_list = [];
$('.close').click(function(){
$(this).parent().parent().parent().hide();
})
$(function() {
trackEvent('签到', '首页');
collectDisplay('bd35');
nativeHttpRequest('GET', getHostApi('/sign/info'), {}, '', 'loadSignInfo');
$('.prize_list').click(function() {
openPage('签到', 'GET', getHostPage('/activity/sign/list.html'), {});
});
});
pop_sign.click(signClick);
$('.share').click(share)
function popup(){
$('.popup_out').show();
}
function loadSignInfo(s, res) {
//alert(res)
res = JSON.parse(res);
if (res.code == 0) {
data = res.data;
times = data.times;
sign_list = data.sign_list;
if (data.signed) {
btn_sign.addClass('current').html('已签到' + data.times + '天');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.header_wen1').html('明日签到可领<b class="get_num">' + data.sign_list[2] + '积分');
$('.share').addClass('current');
} else {
btn_sign.click(popup)
$('.header_wen1').html('今日签到可领<b class="get_num">' + data.sign_list[1] + '积分');
}
btn_sign.show();
// fill total info
total_point = parseInt(data.sign_total);
total_user = parseInt(data.sign_user);
update_info();
var today = new Date(data.today.replace(/-/g, '/'));
$.each(data.sign_list, function(index, point) {
var yesterday_signed = 0;
if (index == 0 && data.yesterday) {
yesterday_signed = 1;
}
var tmp_obj = $('.calendar_out dl[data-index=' + index + ']');
tmp_obj.find('.point').text('+' + point);
if (!yesterday_signed) {
tmp_obj.find('.circle img').removeClass('yes_gray').addClass('yes_hide');
}
// fill date
if (index == 1) {
tmp_obj.find('.days').text('今日');
} else if (index == 2) {
tmp_obj.find('.days').text('明日');
} else {
tmp_obj.find('.days').text(get_day(today, index - 1));
}
});
}
}
function share() {
//$('.share').unbind();
$('.popup_out').hide();
trackEvent('签到', '分享点击');
setTimeout(function() {
var title = '你的好友送你一份免费大礼，最高价值888！';
var body = title;
var url = 'http://dl.zhuquzhou.com/v20I/index.html?channel_id=gr2w&s=' + Math.random();
var img_url = 'http://7xja1h.com2.z0.glb.qiniucdn.com/1460969656';
var callback_url = 'activity/systime';
var callback_func = 'share_callback';
var platform = getPlatform();
if (platform == 'android') {
window.android_js.share_sdk(title, body, url, img_url, getHostApi('/' + callback_url), callback_func, 'wechat_moments', 'wechat_moments');//安卓的分享路径
} else if (platform == 'ios') {//苹果分享路径
window.location.href = ("ios://"+encodeURIComponent(JSON.stringify({"cmd":"share","title":title,"shareurl":url,"iconurl":img_url,"msg":body, "staturl": callback_url, 'callback':callback_func, 'show_item':'wechat_moments', 'hide_items':'wechat_moments'})));
}
}, 300);
}
function share_callback(status) {//分享收回
if (status == 1) {
// success
trackEvent('签到', '分享成功');
collectShare('bd35');
nativeHttpRequest('GET', getHostApi('/sign/sign'), {'shared':'1'}, '提交中....', 'checkSign_show');
//location.reload(true);
} else {
nativeAlert('提示', '分享失败');
$('.share').click(signClick_share);
}
}
function update_info() {
$('.sign_total').text(total_point);
$('.sign_users').text(total_user);
}
function get_day(today, days) {
var new_day = new Date(today.getTime() + (days * 24 * 60 * 60 * 1000));
return fill_date(new_day.getMonth() + 1) + '.' + fill_date(new_day.getDate());
}
function fill_date(number) {
if (number < 10) {
return '0' + number;
}
return number.toString();
}
function signClick() {
$('.popup_out').hide();
btn_sign.unbind('click');
// $('.share').unbind();
collectClick('bd35');
//share();
//trackEvent('签到', '分享成功');
nativeHttpRequest('GET', getHostApi('/sign/sign'), {}, '提交中....', 'checkSign');
}
function checkSign(s, res) {
//alert(res);
res = JSON.parse(res);
if (res.code == 0) {
btn_sign.unbind('click');
collectJoin('bd35');
var points = res.data.points;
btn_sign.addClass('current').html('已签到' + (times + 1) + '天');
$('.header_wen1').html('明日签到可领<b class="get_num">' + sign_list[2] + '积分');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.sign_qb').animate({'top':'103%'},1000,function(){
$('.sign_qb').css({'top':'-110%'});
});
total_point += 1;
total_user += 1;
update_info();
} else {
nativeAlert('提示', res.msg);
btn_sign.click(popup);
}
}
function checkSign_show(s, res) {//检验签到展示
//alert(res);
res = JSON.parse(res);//解析json
if (res.code == 0) {
btn_sign.unbind('click');
collectJoin('bd35');
var points = res.data.points;
btn_sign.addClass('current').html('已签到' + (times + 1) + '天');
$('.header_wen1').html('明日签到可领<b class="get_num">' + sign_list[2] + '积分');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.sign_qb').animate({'top':'103%'},1000,function(){
$('.sign_qb').css({'top':'-110%'});
});
total_point += 1;
total_user += 1;
update_info();
} else {
// alert(JSON.stringify(res.msg))
nativeAlert('提示', res.msg);
btn_sign.click(popup);
}
}
</script>
</code>
回复内容：
那里有不同？区别大不大？
我要做一个H5页面嵌入到app里，但我不会写于是我就用抓包工具抓取了一个类似的页面，我想把我的程序加入进去但不知道如何去改动，好多js代码看不懂，希望有大神帮忙看下代码
是做一个签到页面
<code>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>签到</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/collect.js"></script>
<div class="header">
<span class="sign"><img class="sign_img" src="img/sign_img.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" ><b class="sign_in">签到</b></span>
<span class="header_middle">
<p class="header_wen1"></p>
<p class="header_wen2">连续签到有更多惊喜哦</p>
</span>
<div class="calendar_out">
<img class="line" src="img/line.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
<dl data-index="0">
<dt class="circle circle_gray">
<b class="point"></b><img class="yes yes_gray" src="img/gray_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="1">
<dt class="circle current circle_now">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days current">...</dd>
</dl>
<dl data-index="2">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="3">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="4">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="5">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
<dl data-index="6">
<dt class="circle">
<b class="point"></b><img class="yes yes_hide" src="img/green_yes.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</dt>
<dd class="days">...</dd>
</dl>
</div>
</div>
<div class="content">
<span class="prize_list">昨日获奖名单></span>
<div class="content_down">
<div class="box_out">
<span class="sign_box">
<img class="sign_qb" src="img/sign_qb.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</span>
<img class="sign_img2" src="img/sign.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</div>
<span class="integral_out"><b class="integral sign_total">...</b>积分</span>
</div>
<span class="integral_pool">积分奖池<b class="men_num sign_users">...</b>人贡献<i class="point_num sign_total">...</i>分</span>
</div>
<div class="rule">
<p>签到规则</p>
<span class="line2"></span>
<ul>
<li>1.<b class="tb">签到和签到分享</b>可以获得积分;</li>
<li>2.坚持每日签到和签到分享可以获得更更丰厚的奖励;</li>
<li>3.漏签会使签到进度重置，坚持签到奖励更丰富！</li>
<li>4.签到人数每增加1人，积分奖池就增加1积分;</li>
<li>5.次日0:00从当日签到的所有用户中<b class="tb">随机抽取1000名</b>中奖用户，平分积分奖池的奖励。</li>
<li>6.活动最终解释权归人人夺宝团队所有。
</li>
<li>7.温馨提示：叫上小伙伴一起签到，有更多奖励哦！</li>
</ul>
</div>
<div class="popup_out">
<div class="popup_in">
<div class="popup">
<p class="popup_w">签到分享可以获得<br>签到积分<b class="pop_tb">+<i class="pop_tb_in">5</i></b>的机会</p>
<div class="pop_btn">
<span class="pop_sign_btn">我要签到</span>
<span class="share">签到分享</span>
</div>
<img class="close" src="img/close.png" style="max-width:90%" alt="嵌入app的h5与普通的h5有何不同？" >
</div>
</div>
</div>
<script type="text/javascript">
var pop_sign = $('.pop_sign_btn')
var btn_sign = $('.sign');
var total_point = 0;
var total_user = 0;
var times = 0;
var sign_list = [];
$('.close').click(function(){
$(this).parent().parent().parent().hide();
})
$(function() {
trackEvent('签到', '首页');
collectDisplay('bd35');
nativeHttpRequest('GET', getHostApi('/sign/info'), {}, '', 'loadSignInfo');
$('.prize_list').click(function() {
openPage('签到', 'GET', getHostPage('/activity/sign/list.html'), {});
});
});
pop_sign.click(signClick);
$('.share').click(share)
function popup(){
$('.popup_out').show();
}
function loadSignInfo(s, res) {
//alert(res)
res = JSON.parse(res);
if (res.code == 0) {
data = res.data;
times = data.times;
sign_list = data.sign_list;
if (data.signed) {
btn_sign.addClass('current').html('已签到' + data.times + '天');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.header_wen1').html('明日签到可领<b class="get_num">' + data.sign_list[2] + '积分');
$('.share').addClass('current');
} else {
btn_sign.click(popup)
$('.header_wen1').html('今日签到可领<b class="get_num">' + data.sign_list[1] + '积分');
}
btn_sign.show();
// fill total info
total_point = parseInt(data.sign_total);
total_user = parseInt(data.sign_user);
update_info();
var today = new Date(data.today.replace(/-/g, '/'));
$.each(data.sign_list, function(index, point) {
var yesterday_signed = 0;
if (index == 0 && data.yesterday) {
yesterday_signed = 1;
}
var tmp_obj = $('.calendar_out dl[data-index=' + index + ']');
tmp_obj.find('.point').text('+' + point);
if (!yesterday_signed) {
tmp_obj.find('.circle img').removeClass('yes_gray').addClass('yes_hide');
}
// fill date
if (index == 1) {
tmp_obj.find('.days').text('今日');
} else if (index == 2) {
tmp_obj.find('.days').text('明日');
} else {
tmp_obj.find('.days').text(get_day(today, index - 1));
}
});
}
}
function share() {
//$('.share').unbind();
$('.popup_out').hide();
trackEvent('签到', '分享点击');
setTimeout(function() {
var title = '你的好友送你一份免费大礼，最高价值888！';
var body = title;
var url = 'http://dl.zhuquzhou.com/v20I/index.html?channel_id=gr2w&s=' + Math.random();
var img_url = 'http://7xja1h.com2.z0.glb.qiniucdn.com/1460969656';
var callback_url = 'activity/systime';
var callback_func = 'share_callback';
var platform = getPlatform();
if (platform == 'android') {
window.android_js.share_sdk(title, body, url, img_url, getHostApi('/' + callback_url), callback_func, 'wechat_moments', 'wechat_moments');//安卓的分享路径
} else if (platform == 'ios') {//苹果分享路径
window.location.href = ("ios://"+encodeURIComponent(JSON.stringify({"cmd":"share","title":title,"shareurl":url,"iconurl":img_url,"msg":body, "staturl": callback_url, 'callback':callback_func, 'show_item':'wechat_moments', 'hide_items':'wechat_moments'})));
}
}, 300);
}
function share_callback(status) {//分享收回
if (status == 1) {
// success
trackEvent('签到', '分享成功');
collectShare('bd35');
nativeHttpRequest('GET', getHostApi('/sign/sign'), {'shared':'1'}, '提交中....', 'checkSign_show');
//location.reload(true);
} else {
nativeAlert('提示', '分享失败');
$('.share').click(signClick_share);
}
}
function update_info() {
$('.sign_total').text(total_point);
$('.sign_users').text(total_user);
}
function get_day(today, days) {
var new_day = new Date(today.getTime() + (days * 24 * 60 * 60 * 1000));
return fill_date(new_day.getMonth() + 1) + '.' + fill_date(new_day.getDate());
}
function fill_date(number) {
if (number < 10) {
return '0' + number;
}
return number.toString();
}
function signClick() {
$('.popup_out').hide();
btn_sign.unbind('click');
// $('.share').unbind();
collectClick('bd35');
//share();
//trackEvent('签到', '分享成功');
nativeHttpRequest('GET', getHostApi('/sign/sign'), {}, '提交中....', 'checkSign');
}
function checkSign(s, res) {
//alert(res);
res = JSON.parse(res);
if (res.code == 0) {
btn_sign.unbind('click');
collectJoin('bd35');
var points = res.data.points;
btn_sign.addClass('current').html('已签到' + (times + 1) + '天');
$('.header_wen1').html('明日签到可领<b class="get_num">' + sign_list[2] + '积分');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.sign_qb').animate({'top':'103%'},1000,function(){
$('.sign_qb').css({'top':'-110%'});
});
total_point += 1;
total_user += 1;
update_info();
} else {
nativeAlert('提示', res.msg);
btn_sign.click(popup);
}
}
function checkSign_show(s, res) {//检验签到展示
//alert(res);
res = JSON.parse(res);//解析json
if (res.code == 0) {
btn_sign.unbind('click');
collectJoin('bd35');
var points = res.data.points;
btn_sign.addClass('current').html('已签到' + (times + 1) + '天');
$('.header_wen1').html('明日签到可领<b class="get_num">' + sign_list[2] + '积分');
$('.circle_now').addClass('current2');
$('.circle_now .yes_hide').show();
$('.sign_qb').animate({'top':'103%'},1000,function(){
$('.sign_qb').css({'top':'-110%'});
});
total_point += 1;
total_user += 1;
update_info();
} else {
// alert(JSON.stringify(res.msg))
nativeAlert('提示', res.msg);
btn_sign.click(popup);
}
}
</script>
</code>
pc 端大小单位平常是用px
而安卓用dp，苹果用pt
pc有dblclick
安卓苹果有ontouch
只要运行时是WebView,HTML5都是相同的吧.
我打包的基于WebView+PHP(ARM)用于开发App的PHPDroid.
WebView相当于浏览器,PHP作为HTTP服务器,B/S架构,
开发App,就像用PHP开发WAP手机站一样简单.
1，受限区别在于webview或者crosswalk之中的一些内建功能比如：alert，conform之类浏览器的控件式可以定义的；
2，对于一些事件不再继承与系统的安全设置：比如，硬件加速拉，存储cookie拉...在浏览器中是禁用的；但是嵌入的可以定义webview或者crosswalk初始时启用的；
3，还有对新标准，可能系统内建的webview效率很差或者不流畅，嵌入的可以做到不使用内建的webview，而使用自构建的chrome内核的框架来承载APP；
4，最重要的是，如果是混合的APP，基本就是自构的一个浏览器，基本可以将原H5的webapp的一些实现费力的功能转移到实现更好的原声代码中；比如：图标为松鼠的一个浏览器，你可以认为他加载了一个H5的webapp之后，就是一个混合APP，有了一些比如：生成当前adress的二维码功能，分享页面（APP级别的非WEB级别的）等功能；这些功能在web上实现比较费力、但是在原生代码上实现却是比较成熟完美；
5：大致上，你可以认为：混合的H5上的web页面，要比独立实现的web页面上，少了很多代码（当然，是web代码），但是这些功能一般是在原生代码上实现的；【可以想象一下：web上的“分享到微信”和在微信中打开的页面上的“分享到微信”，这两部分功能一个web实现，一个原生实现】
喝多了，话多语碎，抱歉...
1、对于这个签到页面，并没有什么不同，差异只是页面布局问题。
2、这样的签到功能的小页面可以直接使用webview loadURL加载，只需要把h5部署到web服务器上就行；或者直接打包到app里面（但是这样更新就不容易）。
3、签到页面可以让前端写，当然你也可以自己写。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Homestead vagrant bsdtar.EXE报错다음 기사：Sphinx是什么