嵌入app的h5与普通的h5有何不同？-PHP 튜토리얼-php.cn

那里有不同？区别大不大？

我要做一个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>

로그인 후 복사

嵌入app的h5与普通的h5有何不同？

回复内容：

那里有不同？区别大不大？

<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>

로그인 후 복사

嵌入app的h5与普通的h5有何不同？

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、签到页面可以让前端写，当然你也可以自己写。