Home > Article > Backend Development > 嵌入app的h5与普通的h5有何不同?
那里有不同?区别大不大?
我要做一个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、签到页面可以让前端写,当然你也可以自己写。