没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！H5创建webApp保存到桌面（代码教程）
苹果端保存到桌面代码：（注意尺寸是57x57）
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&/&
&meta name=&apple-mobile-web-app-capable& content=&yes&/&
&meta content=&telephone=yes& name=&format-detection&/&
&meta name=&apple-mobile-web-app-status-bar-style& content=&white&/&
&meta name=&x5-fullscreen& content=&true&/&
&meta name=&apple-touch-fullscreen& content=&yes&/&
&link href=&css/pc/index.css& type=&text/css& rel=&stylesheet&/&
&link rel=&apple-touch-icon& sizes=&57x57& href=&img/logo-k.png&/&
&link href=&img/page-icon.png& rel=&shortcut icon&/&
试了一下发现安卓端用打开保存到桌面后图标显示不了，(chrome和UC）都不行。但是看了哔哩哔哩网站上的可以。
安卓端于是多了一行代码：
&link rel=&manifest& href=&manifest.json&&
manifest.json文件内容如下（直接复制哔哩哔哩的）：
&name&: &哔哩哔哩web版&,
&short_name& :&bilibili&,
&start_url&: &index.html&,
&display&: &standalone&,
&orientation&: &portrait&,
&theme_color&: &#de698c&,
&background_color&: &#fff&,
&icons&: [{
&src&: &//s1.hdslb.com/bfs/static/mult/images/app_logo.png@36w_36h.png&,
&sizes&: &36x36&,
&type&: &image/png&
&src&: &//s1.hdslb.com/bfs/static/mult/images/app_logo.png@48w_48h.png&,
&sizes&: &48x48&,
&type&: &image/png&
&src&: &//s1.hdslb.com/bfs/static/mult/images/app_logo.png@72w_72h.png&,
&sizes&: &72x72&,
&type&: &image/png&
&src&: &//s1.hdslb.com/bfs/static/mult/images/app_logo.png@96w_96h.png&,
&sizes&: &96x96&,
&type&: &image/png&
&src&: &//static.hdslb.com/mobile/img/512.png&,
&sizes&: &144x144&,
&type&: &image/png&
&src&: &//static.hdslb.com/mobile/img/512.png&,
&sizes&: &192x192&,
&type&: &image/png&
&src&: &//static.hdslb.com/mobile/img/512.png&,
&sizes&: &256x256&,
&type&: &image/png&
&src&: &//static.hdslb.com/mobile/img/512.png&,
&sizes&: &512x512&,
&type&: &image/png&
&permissions&: {
&desktop-notification&: {
&description&: &Needed for creating system notifications.&
看了一下他们需要适应不同的手机屏幕，所以就有不同的尺寸。评论-4154&
最近机票团队在一个页面布局复杂的地方发现一个BUG，非常奇怪并且不好定位，这类问题一般最后都会到我这里，这个问题是，改变dom结构，页面却不渲染！！！
如图所示，我动态的改变了dom结构，结果页面那一坨变得什么都没有，相当奇怪！！！在PC模拟iPhone就可以重现，iPhone、note4等手机上也可重现，由于这种BUG我不是第一次碰到，很快便引起了注意，总结起来可以归结于：
js代码改变fixed元素的html结构（一般是动画后并且布局相对复杂），页面不会渲染
问题定位-分离法
本着发现问题，定位问题，解决问题的步骤，我开始了定位，这里的难点是，这类问题往往非常难以定位，因为他的dom tree相当复杂，首先我做了一个事情，直接将其htmlcss分离出来，摆脱js的原因，直接显示该dom。
于是问题不在了，这个很令人费解，难道是js对其造成了影响？经过一轮纠缠，定位失败开始二轮定位。
问题定位-最小化问题
这种问题确实不好处理的时候，光靠看页面可能不能处理了，这个时候便把机票的代码拿到本地，部署起来，做了几件事情：
① 去掉该页多余的业务代码，基本上不完成任何功能
② 去掉多余的dom结构（由于我们是单页应用，dom可能相对比较复杂）
打开对应业务代码一看，洋洋洒洒3000行，立马想吐：
这个时候一行行去读代码就是2B的行为了，直接找到那个显示日历的代码：
然后稍作改动，把其它业务逻辑全部搞掉，事件绑定也搞掉，只留下显示日历的事件，直接一来点击显示日历，这个时候形成的dom结构由4000多行变成了1000多行，但是依旧有BUG
问题定位-CSS重置
由于机票对日历的样式，做了重置，所以有理由怀疑是他们自己的css导致的问题，于是想去掉他们的css引用试了试，虽然样式难看了点，但是问题依旧存在......
问题定位-js逻辑
这个时候便有理由怀疑其日历显示后，本身有一定逻辑功能导致出错，于是看到了日历show后面干的事情，并且为了防止dom结构过大，将月份显示设置为1月。
都这个样子了，他居然还是渲染不处理，有点伤害自尊！！！
因为这个日历显示时候有一个从右到左的动画，这个时候将其动画关掉，却发现问题解决了！！！其中的代码为zepto的实现，不是关键
'-webkit-transform': prepareCss,
transform: prepareCss
.animate({
'-webkit-transform': 'translate(0, 0)',
transform: 'translate(0, 0)'
}, 500, 'ease-in-out', function() {
'-webkit-transform': '',
transform: ''
问题定位成功-脱离文档流的渲染
最后问题定位成功，至少从表现和处理来说是定位成功的，简单来说：
动画执行结束后，如果我改变的是fixed元素中的一个子单元的html，不会有反应，但是我们同时改变static元素便会引起一次渲染，尼玛这是神马鬼！！！
问题探索-渲染的差异
为了弄懂这个原因，我们得看到渲染的细节，这里做了一个对比：
不引起static dom变化
引起static dom变化
这里注意观察最后一次paint便可以看见渲染出来的东西不一样，导致这种的差异是什么呢，我们一次次的对比几次不同
这里做一个差异对比，因为这里的static元素与fixed元素还有一些管理，我们这里操作与之完全无关的元素试试。事实证明没有什么影响，所以这类问题的解决方案是：
移动端过多定位元素布局时，偶尔操作fixed元素html不会渲染，解决方案是同步改变与之相关的static元素，便会引导渲染
刚刚使用的是设置html，这里完全可以使用这种做法：
el.html(el.html())
可以达到相同的功能，但是问题导致原因依旧不可知......不可说不是一种遗憾！！！如果您知道这个问题的答案，请您留言。
阅读(...) 评论()Hybrid 架构下的 H5 应用加速方案-石破
前端技术博客
&&&&&&&&在移动 App 开发领域，主流的开发模式可分为 Native、Hybrid、WebApp 三种方式。然而 2013 年，纯 WebApp 开发模式的发展受到一定挫折，以 Facebook 为代表的独立 App 转投 Native 阵营。但是开发者对 WebApp 更新速度快，跨平台优势的渴望却并未减弱，最终的结果是促成了 Hybrid App 在 2013 年数量的激增，并且增长的速率非常之快。&简单的说，Hybrid App是 Native App 和 Mobile Web 二者混合开发的产物，HTML5&&的页面被嵌入到 Natvie App 的 webview 中。因此它综合了更新速度快，交互体验好，跨平台等优点。
&&&&&&&本文分享的就是 HTML5 页面(尤其是被嵌入的 H5 应用)&借助 Hybrid 架构来提升自己的加载速度和性能的一种解决方案。该方案要求你对 Hybrid App 进行以下三步骤的改造：
一：模块化你的 H5 页面/应用，引入模块加载器（可选）
&&&&&&&&模块加载器不必多说，SeaJS、requireJS、kissy loader 等耳熟能详，任你挑选。使用模块化的方式来开发你的应用，不仅仅将有利于后期的代码维护，在 Hrbrid 的架构中，还将会有利于性能的提升。
&&&&&&&&或许你有疑问：模块开发粒度越细化，加载时请求的JS、CSS等静态资源的数量越多，页面的性能不会越差吗？我的回答是：如果你仅仅是使用了模块加载器并异步加载各个模块，那么加载的性能一定很差，因为请求的数量太多。当然你肯定会想到在发布前打包合并静态资源，那么对这样的解决方案我只能给到 50 分，因为被打包合并的文件中只要有一个子文件发生变化，那么整个文件（JS或CSS）都要被重新下载，对移动带宽而言还是个负担。
&&&&&&&&怎么破？请继续进行步骤二：
二：启用 AppCache ，并引入增量更新机制
&&&&&&&&做过 WebApp 的同学应该会了解&文件，Html5提供的应用缓存功能，开发者只要把需被缓存的静态资源文件名罗列在这个列表中即可保证二次访问时无需重新加载。看起来不错！这样前面说的模块化开发造成的请求数量过多的问题，至少在二次访问时不会再发生了。嗯，这样的方案可以给到 70 分吧。其实，Html5&提供的 mainfest 缓存机制有个比较大的问题（兼容性就先不提了）：如果 mainfest 列表中的一个资源文件需要更新，那么整个 mainfest 中的其它文件也都需要被重新下载一遍。&也即是说二次访问没有问题了，但是 Html5 应用更新时还是会出现全量下载的问题。
&&&&&&&&别忘了，我们是 Hybrid App，还可以充分利用 Native 层的强大能力，所以抛弃mainfest吧，让 Native 来帮助 Html5 应用缓存静态资源文件。总体思路是：
&&&&&&& 1、Html5 应用首次启动时，调用 Native 提供的加载资源文件专用的 Device API 来请求所需的资源文件，由 Native 层发出真正的资源请求，并将请求结果缓存在手机的SD卡上。当然，这里完全可以优化为一次 zip 包请求，因为 native 能够提供强大的解压能力。
&&&&&&& 2、H5 应用再次启动时，所有的静态资源都是通过 Device API 读取本地缓存，无需再走网络。
&&&&&&& 3、H5 应用出现静态资源更新时，在应用启动时首先通过 Device API 加载需要更新的文件，并更新本地缓存，其它未变更文件继续走缓存。
&&&&&&&&流程看起来挺顺，其中有几个关键问题需要解决：
&&&&&&& 1、如何通过 Device API 加载资源文件？
&&&&&&&&&&&&这里使用模块加载器的优势就体现出来了，只需要在加载器中做点小修改，不直接走Http请求了，而直接调用 Native 提供的文件加载 DeviceAPI 即可。&如果你没有模块加载器，就需要写统一的函数来做加载资源的功能了。
&&&&&&&&&&&&其实 Native 也提供了拦截机制，能够拦截到 H5 应用发出的所有 Http 请求并进行自定义处理，可惜这样好的功能在 Andorid 4.0 以下版本不支持。&故现阶段还是主动调用 Device API 更靠谱。
&&&&&&& 2、何时需要进行静态资源的更新？
&&&&&&&&&&&&每次静态资源发布都会产生一个唯一的发布时间戳（或是所有资源内容的MD5编码），H5应用启动后，可将当前时间戳保存下来，等应用下次启动时，请求最新的发布时间戳并与本地时间戳进行对比，若不同，则首先进行静态资源的增量更新。
&&&&&&& 3、如何判断哪些是需要被增量更新替代的静态资源文件？
&&&&&&&&&&&&这个问题的回答会比较复杂些，核心思路是通过对前后两次资源文件（js、css、image等）发布的内容对比完成：
如此，H5 应用借助 Native 应用的能力完成了资源的缓存与增量更新，可以保证 H5 应用在启动与更新时的加载速度。当然也有方案借助 HTML5 的 localstorage 来替代 Native 的缓存更新策略，但是可能会受到两处限制：
1、若 Hybrid App 比较复杂，涉及多个子域甚至主域间的静态资源共享，则 localstorage 的方案首先要解决跨域访问的问题，并且在每个子域存储空间上存在上限，是 5M。
2、Native 能够支持更新包的 zip 打包下载，一次请求，然后解压并更新本地缓存。而 localstorage 无法实现。
若应用中以上两点不是问题，则使用 localstorage 缓存的策略完全 OK。
三：启用 spdy 协议
&&&&&&&&协议在移动开发上大有可为，它是HTTP协议的增强版本，能够通过一次TCP链接同时请求到多个资源文件，请求速度上的提升那是自然的了，非常强大！chrome&等 webkit 内核浏览器都已经支持。&可惜若是借助浏览器自身使用 spdy 协议则要求静态资源服务（js、css、image）必须是 https 的域名服务，且&能支持spdy协议。相信大多数静态服务器都还是http 服务，是无法通过浏览器来直接支持的。
&&&&&&&&&还是那句话，因为我们是 hybrid 应用，可以发挥native的优势！ native 层完全可以实现基于 spdy 协议请求的 device API，供 H5 应用（JS）来调用。这样就不需要 https 域名服务器也能使用 spdy了。
&&&&&&&&如果你的 Hybrid 应用已经支持了 spdy 协议，那么你可以考虑不再需要把增量更新的资源文件打包成 zip 下载了，直接 spdy 协议并行下载即可！
SPDY 与 HTTP 协议速度对比：&&
本文提供了一种基于 Hybrid 架构的 H5 应用加载性能优化方案，如有疑问及建议，欢迎探讨，邮件 terence.wangt@alibaba-inc.com
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字写本文章的目的是为了记录工作中遇到的问题，方便以后遇到可以迅速解决问题
H5手机网站接入支付宝的支付接口，推荐使用支付宝提供的SDK来快速开发
我使用的是SDK开发
引用命名空间
using Aop.A
using Aop.Api.R
using Aop.Api.R
using Aop.Api.U
首页需要定义一些常量
static string serverUrl = "https://openapi.alipaydev.com/gateway.do";
static string app_id = "**";
//开发者的应用ID
static string format = "JSON";
static string charset = "utf-8";
static string sign_type = "RSA2";
//签名格式
static string version = "<span style="color: #.0";
string UID = "<span style="color: #16";//卖家支付宝账户号
//商户私钥
static string merchant_private_key = "***";
//支付宝公钥
static string alipay_public_key = "***";
这里的app_id,merchant_private_key,alipay_public_key 我就没有列出来了，获取的方法需要自己去支付宝平台完成一些操作进行获取
在用户点击网站付款时，我们需要唤醒支付宝，来进行支付
public string H5RequestPayWay(OrderPO order)
IAopClient client = new DefaultAopClient(serverUrl, app_id, merchant_private_key, format, version, sign_type, alipay_public_key, charset, false);
AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();
string address= "http://m." + PathLogic1.RootD
request.SetReturnUrl(address+ "/WebPay/AlipayPayResult");//同步请求
request.SetNotifyUrl(address + "/WebPay/AsyncPay");//异步请求
var lstDetail = Context.Data.OrderDetail.Where(x =& x.OrderNo == order.OrderNo).ToSelectList(x=&new { x.SkuName});
StringBuilder sb = new StringBuilder();
for (int i = <span style="color: #; i & lstDetail.Count(); i++)
sb.Append(lstDetail[i].SkuName + ",");
request.BizContent = "{" +
"\"body\":\""+sb.ToString().Substring(<span style="color: #,sb.Length-<span style="color: #)+"\"," +
"\"subject\":\"袋鼠巴巴商品支付\"," +
"\"out_trade_no\":\""+order.OrderNo+"\"," +
"\"timeout_express\":\"90m\"," +
"\"total_amount\":"+(order.TotalAmount.Value+order.TotalFreight.Value)+"," +
"\"product_code\":\"QUICK_WAP_PAY\"" +
}";//这里填写一些发送给支付宝的一些参数
AlipayTradeWapPayResponse response = client.pageExecute(request);
return response.B//这里会发送一个表单输出到页面中
具体发送给支付宝的参数，自行去查看
执行上面方法后，买家输入自己的支付宝账号密码进行支付，支付成功的结果，支付宝会以post的方式异步请求你的SetNotifyUrl的地址
这个SetNotifyUrl的地址必须要外网可以访问，支付宝的请求才能进来
买家支付成功，商家修改订单状态和数据库的操作，都在异步请求中执行
public ActionResult AlipayPayResult()
ViewBag.result = "success";
return View("PayResult");
&/// &summary&&&&&&&& /// 验证通知数据的正确性&&&&&&& /// &/summary&&&&&&&& /// &param name="out_trade_no"&&/param&&&&&&&& /// &param name="total_amount"&&/param&&&&&&&& /// &param name="seller_id"&&/param&&&&&&&& /// &returns&&/returns& private SortedDictionary&string, string& GetRequestPost()
int i = <span style="color: #;
SortedDictionary&string, string& sArray = new SortedDictionary&string, string&();
NameValueC
//Load Form variables into NameValueCollection variable.
coll = Request.F
// Get names of all forms into a string array.
String[] requestItem = coll.AllK
for (i = <span style="color: #; i & requestItem.L i++)
sArray.Add(requestItem[i], Request.Form[requestItem[i]]);
/// &summary&
/// &/summary&
/// &param name="inputPara"&&/param&
/// &returns&&/returns&
public Boolean
Verify(SortedDictionary&string, string& inputPara)
Dictionary&string, string& sPara = new Dictionary&string, string&();
Boolean verifyResult = AlipaySignature.RSACheckV1(inputPara, alipay_public_key, charset,sign_type,false);
return verifyR
异步请求：
[HttpPost]
public void AsyncPay()
SortedDictionary&string, string& sPara = GetRequestPost();//将post请求过来的参数传化为SortedDictionary
if (sPara.Count & <span style="color: #)
AlipayTradeWayPayServer pay = new AlipayTradeWayPayServer();
Boolean VerifyResult = pay.Verify(sPara);//验签if (VerifyResult)
//商户订单号
string out_trade_no = Request.Form["out_trade_no"];
//支付宝交易号
string trade_no = Request.Form["trade_no"];
//支付金额
decimal total_amount = Request.Form["total_amount"].ConvertType(Decimal.Zero);
//实收金额
//decimal receipt_amount = Request.Form["receipt_amount"].ConvertType(Decimal.Zero);
//交易状态
string trade_status = Request.Form["trade_status"];
//卖家支付宝账号
string seller_id = Request.Form["seller_id"];
//商品描述
string body = Request.Form["body"];
//交易创建时间
DateTime gmt_create = DateTime.Parse(Request.Form["gmt_create"]);
//交易付款时间
DateTime gmt_payment = DateTime.Parse(Request.Form["gmt_payment"]);
string appid = Request.Form["app_id"];
WriteError("验证参数开始");
Boolean DataValidity = pay.CheckInform(out_trade_no, total_amount, seller_id, appid);//商家判断参数时候是否匹配if (DataValidity)
if (Request.Form["trade_status"] == "TRADE_FINISHED")
AlipayWayPayPO model = CreateAlipayWayPay(out_trade_no, trade_no, trade_status, gmt_create, gmt_payment);
pay.PaySuccess(out_trade_no, model);//修改订单
//退款日期超过可退款期限后（如三个月可退款），支付宝系统发送该交易状态通知
else if (Request.Form["trade_status"] == "TRADE_SUCCESS")
AlipayWayPayPO model = CreateAlipayWayPay(out_trade_no, trade_no, trade_status, gmt_create, gmt_payment);
pay.PaySuccess(out_trade_no, model);//修改订单
//付款完成后，支付宝系统发送该交易状态通知
//——请根据您的业务逻辑来编写程序（以上代码仅作参考）——
Response.Write("success");
//请不要修改或删除
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
catch (Exception ex)
else//验证失败
Response.Write("fail");
Response.Write("无通知参数");
阅读(...) 评论()