微信公众号WebApp接管返回键实现“再按一次退出程序”功能
　　按微信产品部副总经理张颖“每一个公众号都是一个APP”的说法，我们确实可以利用微信内置浏览器访问为公众号设计WebApp单页应用，以使得客户在访问公众号时有近似原生App的体验，不过目前这样的公众号很少，原因除了使用javascript开发单页应用的难度比开发一般的Web页面难度更高一些，更重要的一点是使用微信内置浏览器访问Web页面时，Android用户一按物理返回键就回到微信界面，而Android用户按物理返回键的习惯预期是回到上一页，这样就使得微信公众号的WebApp客户体验非常差。
　　有什么方法改变这一点么？最理想的解决办法是微信自己接管用户按物理返回键这个事件，然后类似像getNetworkType一样提供javascript事件给开发者使用。不过很遗憾，腾讯目前没有提供这个事件，而且看样子将来也不打算提供。
　　这个问题不是大问题，但如果不解决会影响Android用户的客户体验。幸运的是，我找到了解决办法，方法就是利用javascript window history来解决。
　　由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。我们可以利用这一点，在WebApp加载主界面后先往history里压入“#”链接，然后监听popstate事件，在Android手机的浏览器，按下物理返回键默认的操作是执行window.history.back()，此时将触发popstate事件。收到popstate事件时代码显示“再按一次退出程序”div顶层标签，此时history栈已经为空，如用户再次按下物理返回键将执行默认操作回到微信。接着，我们要设定一个定时器，在指定的时间（比如2秒）后如用户没有再次按下物理返回键将再次往history里压入“#”链接，并隐藏“再按一次退出程序”div顶层标签，等待用户下一次按下物理返回键。
　　javascript实现代码如下：
pushHistory();
setTimeout(function () {
window.addEventListener(&popstate&, function(e) {
showBox(&再按一次退出程序&, 2000, function() {
pushHistory();
}, false);
function pushHistory() {
var state = {
title: &title&,
window.history.pushState(state, &title&, &#&);
function showBox(msg, timeOut, onTimeOut) {
if (typeof alertBoxDiv === &undefined&) {
alertBoxDiv = $(&&div/&&).addClass(&alert-box hide&).append( $(&&div/&&).addClass(&label label-primary&)).appendTo($(&body&));
alertBoxDiv.children(&.label&).html(msg);
alertBoxDiv.removeClass(&hide&);
if (typeof timeOut === &undefined&) timeOut = 2000;
setTimeout(function() {
alertBoxDiv.addClass(&hide&);
if (typeof onTimeOut !== &undefined&) onTimeOut();
}, timeOut);
　　监听popstate事件的代码稍作修改就可以用于任意控制单页应用中javascript生成的任意动态页面的跳转，此方法已经在微信公众号WebApp中使用，可在微信中搜索“myfunds”公众号关注体验。这个方法也可以用于微信公众号之外的WebApp，链接就不发了，免得CSDN又要审查。
本分类共有文章2篇,更多信息详见
& 2012 - 2016 &
&All Rights Reserved. &
/*爱悠闲图+*/
var cpro_id = "u1888441";微信Web-App几分钟变身“原生App”【教程】 - 开源中国社区
当前访客身份：游客 [
当前位置：
微信最近推出了 微信JS-SDK， 使微信公共号可以直接调用微信原生的接口，具备部分原生应用的能力。微信JS-SDK 的推出，将大大提高微信公共号的用户体验，但是如果存在一种方式，可以使微信公共号各种已有的服务，直接变为一款真正的原生应用，岂不是会更好？借助APICloud 平台，可以做到：零修改，微信公共号 变 iOS&&+ Android双平台原生应用！
两种实现方式：
方式一：&网站控制台新建 native 应用； 用我们提供的&&jweixin-1.0.0.js 文件替换 微信官方的&&jweixin-1.0.0.js 文件，并按特定目录组织；网站勾选必须的 weiXin&&sinaWeiBo qq baiduMap imageBrowser speechRecognizer baiduLocation scanner 模块；网站云编译，扫码即可安装。
方式二：&网站新建 webapp ，输入自己的 微信 webapp 地址；把我们的 jweixin-1.0.0.js放到您自己的服务器，并在页面内正确引入；勾选必须的 weiXin&&sinaWeiBo qq baiduMap imageBrowser speechRecognizer baiduLocation scanner模块；网站云编译，扫码即可安装。& && &
下面以微信 JS-SDK 的 demo 页面对方式做一具体介绍：&&
1.&&把此页面保存到本地 wiget 文件夹中。
建议使用 Google 浏览器，这样可以保存页面用到的 js css 文件。如图1.
2.修改中文文件（夹）名，因为 android 开发不允许存在中文文件名。这里我们把 “微信JS-SDK Demo_files”文件夹，更名为 “script” 文件夹; 把 “微信JS-SDK Demo.html” 文件，重命名为 index.html。
a.index.html 中的 “微信JS-SDK Demo_files” 相关路径也要同步修改为 “script”。
b.index.html 用作倒档的几个按钮，如”基础接口“，”分享接口“等，点击会跳出应用，需要删去 Google 智（无）能（脑）添加的路径信息：
”&”#menu-basic“。
c.以上需要修改的地方，都是因为使用了 Google 浏览器保存网页，浏览器智（无）能（脑）添加了无关信息；实际开发中，是不会遇到这个问题的。
3.在 wiget 文件目录下添加一个 config.xml 文件，并适当修改，并适当配置。如果2：
关于配置的更多信息，参见：
当然， 您可以直接复制附件中的 config.xml 文件到您自己的 wiget 文件夹中，来快速体验。
4.使用我们提供的 jweixin-1.0.0.js 文件替换 wiget/script/jweixin-1.0.0.js文件.（
jweixin-1.0.0.js 文件见下方链接
5.网站控制台新建 native 应用；widget 文件夹压缩为 widget.zip ，并上传到 网站控制台--&代码；
上传成功，云编译即可生成原生iOS + Android应用。见图3，图4.图5.
& && && && &
& && && && &
6.扫描生成的二维码，安装应用；安装成功后，打开即可体验。详见效果图。
1.微信 JS-SDK 接口文档，参见：&
2.示例中使用的是 APPloader 的相关 SDK 信息，微信分享后，可能会跳转到 APPLoader 应用。把您的应用配置更改为自己的，即可解决此问题。
1.iOS 安装包地址： & && &
2.安卓安装包地址： & && &
3. jweixin-1.0.0.js APICloud 版 地址； & && &
4.widet.zip 压缩包，源文件地址： & && &
二维码扫描快速体验：
共有8个评论
<span class="a_vote_num" id="a_vote_num_
分享给大家
<span class="a_vote_num" id="a_vote_num_
我们的QQ群是：
<span class="a_vote_num" id="a_vote_num_
我们的QQ群是：
<span class="a_vote_num" id="a_vote_num_
欢迎大家关注APICloud
<span class="a_vote_num" id="a_vote_num_
感觉不错的样子
<span class="a_vote_num" id="a_vote_num_
<span class="a_vote_num" id="a_vote_num_
<span class="a_vote_num" id="a_vote_num_
现在建立QQ交流平台，欢迎开发者和需求者加入。
APICloud明星服务外包群 QQ:
更多开发者职位上
有什么技术问题吗？
API_Clo...的其它问题
类似的话题您所在的位置： &
微信JS-SDK揭秘：WebApp几分钟变身“原生App”？
微信JS-SDK揭秘：WebApp几分钟变身“原生App”？
1月10日，微信公众平台面向开发者开放了微信内网页开发工具包（微信JS-SDK）。对广大开发者和微信营销来说，都是一个劲爆消息。以后用户在微信中看到的Web-App不局限于简单的页面展示，可以开发出一个功能较全面的App，包含更多的互动功能。
1月10日，微信公众平台面向开发者开放了微信内网页开发工具包（微信JS-SDK）。对广大开发者和微信营销来说，都是一个劲爆消息。以后用户在微信中看到的Web-App不局限于简单的页面展示，可以开发出一个功能较全面的App，包含更多的互动功能。
微信JS-SDK包提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，这也意味着微信公众平台将更加开放，微信公众号的可定制性更加灵活，也为微信营销提供了更多可能性。
微信营销已逐步成为公司必备的推广渠道，各个公司都通过微信营销来获取更多的用户，相信&微信JS-SDK的11类接口集&的发布，给各个公司又创造了施展才华的舞台，比拼谁家的创意更胜一筹？
微信的Web-App功能越强大，给用户的体验越好，企业需要为其付出的成本和时间就越高。微信此次发布看似增加了新功能，但是也进一步加强了对开发者的管控和锁定，基于其开发的Web-App只能在微信体系内发行，更重要的是用户桌面Native App如何解决?
微信的Web-App，通过APICloud平台输出Native App
企业和开发者为微信定制的Web-App，如果可以同时输出iOS和Android两个平台的Native App，这样就不需要单独开发，充分利用已有Web-App资源、节省企业成本，同时也达到了占据了用户桌面，一举两得，有没有很任性？！
现在互联网公司拼的就是速度、效率、对事件的响应态度，中国首家中国首个&云端一体&的移动应用云服务提供商APICloud，宣布对微信的Web-App的11类接口全面支持，把&微信的Web-App&通过APICloud&云编译&功能便可直接输出iOS和Android两个平台的原生App，无需额外编码，&快就任性、免费更任性&！
微信的Web-App通过APICloud打包，兼容现有功能成为Native App可以在桌面渠道发行，但是这种Web-App加壳的方式，无论是功能还是体验都还是比较弱的，属于轻应用。 除此以外，APICloud还提供了更丰富的JS API，如获取设备号、查找通讯录、地图导航、二维码扫描、窗口交互动画等等。开发者可以在微信JS-SDK基础上进一步加强App的体验，成为真正意义上功能强大的Native App。
APICloud表示：&秉承快速、高效的理念，将第一时间把App开发的重要革新、最新的设备特性和系统特性等通过APICloud平台实现，提供给开发者使用，使开发者永远快人一步将，将领先进行到底&。此前iOS8 发布时，APICloud在第一时间宣布&全球首家完美适配iOS8&！
APICloud重新定义移动应用开发，一种理想，就是一种力量。【编辑推荐】【责任编辑： TEL：（010）】
关于&&&&&&的更多文章
继微信5.0以来，最近微信公众平台推出新版，除推出微信认证外，
讲师： 13人学习过讲师： 18人学习过讲师： 18人学习过
手机游戏开发可以很简单，如Flappy Bird，一个人一杯
张小龙已经成为产品经理心中的神，无数人纷纷膜拜憧憬
国际消费类电子产品展览会（International Consumer E
本书深刻揭示了Spring的技术内幕，对IoC、AOP、事务管理等根基性的技术进行了深度的挖掘。读者阅读本书后，不但可以熟练使用Spri
Windows Phone专家
Android开发专家
51CTO旗下网站如何在安卓上实现类似于微信那种向右滑动关闭当前页面的功能？
可以使用Viewpager配合Fragment，重写Viewpager的Onscrollstatechange()方法
已有帐号？
无法登录？
社交帐号登录需求发布后1小时内收到服务商响应每个需求平均有10个服务商参与95%以上的需求得到了圆满解决所有需求不向雇主收取任何佣金11.11大促流量暴涨，销量翻倍的方法
将一个网页封装在安卓App中，实现跳转到微信
有相似问题想解决?专业顾问来帮助您
匹配服务商
选择服务商，签单
服务商工作
验收并付款
已投标服务商
共有3个服务商参与报价，查看更多服务商报价
参与报价,开始赚钱
提交你的报价和方案
中标后交付作品
获得任务赏金
极速：10分钟急速响应
高品质：精选服务商提供服务
放心：不满意可退款
APP成品套餐
APP成品源码套餐
交易成功的需求
APP开发相关需求