Heim > Artikel > Backend-Entwicklung > 嵌入app的h5与普通的h5有何不同？
嵌入app的h5与普通的h5有何不同？
- WBOYOriginal
- 2016-06-06 20:08:271976Durchsuche
那里有不同？区别大不大？
我要做一个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、签到页面可以让前端写，当然你也可以自己写。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Homestead vagrant bsdtar.EXE报错Nächster Artikel：Sphinx是什么
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)