在X5中已经内置了对app引导页面的支持，只要在你的首页同目录下有splashPage.html这个文件，就可以优先加载splashPage.html这页面的内容.接下来我们就做个简单里例子来看下引导页的效果。 首先我们做一个最简单的w页面。   然后我们在这个w页面的同目录放一个splashPage.html，内容大致如下 <div style="z-index: 9999; position: absolute!important; top: 0; bottom: 0; width: 100%; font-size: 0;"><iframe style="border: 0; height: 100%; width: 100%;" src="http://chuye.cloud7.com.cn/Cloud7BeginPage/50455" width="300" height="150"></iframe></div> <script>// <![CDATA[ function closeSplashPage(){ /** 如果只需要引导页面出现一次就设置参数为false 如果需要每次都出现就不要设置 如果后续有需求需要再次显示引导页就 [...]

WeX5 版本更新(V3.3之前，包括V3.3) 本文介绍在WeX5的app中如何做版本更新 （模式1如果有版本更新需求，推荐采用模式二部署）。 （模式4如果有同样需求，可以根据自己网站实现相关逻辑）。 原理 版本更新的原理其实非常简单，通过一个请求，访问后台一个指定的文件，通过获取这个文件中关于新版本的信息，来和当前运行的app的版本进行比较，如果发现有新版本，就弹出提示用户有新版本，如果用户点击了更新，就通过文件中配置的url来下载更新。 用法 参考$UI/portal/sample的例子 1. 在需要进行版本更新的地方拷贝appVersionChecker.js、appVersion_in_server.js 2.在页面中引用appVersionChecker.js模块 //require('res!./appVersionChecker.js'); require(['./appVersionChecker']); 然后这个模块后会自动查找和自己同目录的一个叫做appVersion_in_server.js的文件，通过这个文件来获取新版本信息。如果有新版本信息就会自动提示更新。 可以看到这里有三个选项，忽略就是这个版本的更新以后就不会再提醒了当前用户了.取消就是这一次不更新，下次再打开到这里还会提示。 最后再看一下appVersion_in_server.js的写法，如果遇到需要版本更新的情况就去服务器上把这个文件修改一下就可以了。 其中downloadUrl是你的app文件的下载url，推荐写全路径.（ios推荐写app store的url 或者ios企业账号提供的app下载地址）. define(function(require){ var versionInfo = { androidApp:{ version:"6.0.0", changeLog:"1.这是为了演示WeX5 app版本更新能力 \n 2.别更新哦 点忽略就可以了", [...]

本文通过一个简单的银联支付案例介绍使用WeX5开发一个支持银联支付的功能的过程 1.新建一个pay.w页面，添加一个按钮.用来点击调用银联支付 2.在pay.w的js文件用引用银联支付插件 require("cordova!com.justep.cordova.plugin.unionpay"); 3.在按钮click事件中添加如下事件代码 Model.prototype.unionPayBtnClick = function(event) { navigator.unionpay.pay({ tn:"利用下面的url获取一个新的" },function(code){ alert('success:' + code); },function(code){ alert('error:' + code); }); }; 注意这里的tn是银联支付的编号，你需要有后台和银联支付网关交互获取支付单号(具体逻辑需要参考银联官方文档)，测试的话可以通过 http://202.101.25.178:8080/sim/gettn 获取一个测试单号。 4.在Native下面新建一个app 5. 这个时候打开app点击按钮开始支付吧(测试卡号：6226440123456785  密码：111101) 6.这个时候您已经入门了，如果需要申请自己的商户，可以参考商户申请文档，如果你开发完毕需要上线了，可以到插件中修改配置 <config-file [...]

本文通过一个简单的微信支付案例介绍使用WeX5开发一个支持微信支付的功能的过程 注意：本文档适合3.1之前版本（包含3.1）,因为3.2开始我们的插件已经支持了微信最新api和最新借口（wechat v3）.所以随之js的api也有小部分变化。 1.新建一个mainActivity.w页面，添加一个按钮.用来点击调用微信支付 2.在mainActivity.w的js文件用引用微信插件 require("cordova!com.justep.cordova.plugin.weixin"); 3.在按钮click事件中添加如下事件代码 Model.prototype.weixinPayBtnClick = function(event) { var weixin = navigator.weixin; var traceID = justep.UUID.createUUID(); var traceNo = justep.UUID.createUUID(); var notifyUrl = "http://www.bex5.com"; var error = function(msg){ alert('支付异常：' [...]

以下教程基于2015-05-17发布的WeX5的3.1.1版本。如果你想先感受下支付，可以在 http://www.wex5.com/portfolio-items/demo-takeout/ 中扫码下载ios、android客户端支付来感受下（每份外卖支付金额都是1分钱哦）。 开发篇 我们需要在js中写上调用支付的代码，参考代码如下，详细代码可以参考外卖案例中的完整代码(非常推荐看下外卖中关于支付的逻辑/UI2/takeout/index.js，因为我认为这个地方对支付状态码和回调都做了比较全面的设计和实现，要不自己写起来还是有点麻烦的)。 /** 支付宝支付 **/ var alipay = navigator.alipay; alipay.pay({ "seller" : "huangyx@justep.com", //卖家支付宝账号或对应的支付宝唯一用户号 "subject" : "x5外卖", //商品名称 "body" : "x5外卖", //商品详情 "price" : "0.01", //金额，单位为RMB "tradeNo" : tradeNo, //唯一订单号 "timeout" : [...]

前世： 自从iphone上的mail应用有了这种加载的手势之后，我们发现很多本地应用都默默的采用了这种方式。这种手势已经成为一种趋势。那么我们能不能在移动端的html中模拟出这种本地效果里？ 首先让我们来分析下这里面的东西。 1.有滚动效果。滚动条不是默认就有的，或许有的时候不要滚动条更好看点，有时候要滚动条好点，也就是滚动条需要可以自定义。 2.可以下拉，上面有一部分能拉出来，同样的 下滑到最后可能触发事件，再出个菊花转什么的，用来加载更早的文章之类的。 3. 既然有纵向，是不是应该有横向。 4.说到横向，就想到图片轮播，那么能不能固定边界到某个元素，不偏不倚。 今生: 所以我们在想我们是否也能在网页中模拟这种效果？ 首先第一轮尝试我们想用浏览器原生的滚动区域（overflow：auto，-webkit-overflow-scrolling：touch）来模拟这种效果，但是很快就发现原生的滚动条，在局部区域滚动的时候效果都不理想，虽然能做到拉出东西，但是反映不灵敏，在滚动到最上面的时候，总有卡顿的现象。 同时，我们同时希望能做到滚动惯性，滚动弹动等效果，包括定义滚动条颜色宽度，是否隐藏，以及隐藏动画等，显然使用浏览器原生效果并不能令人满意，这个时候我们自然的想到了移动开发中一个不可不知的类库iscroll.让我们读一下iscroll把。 iscroll告诉我们，原生不太靠谱，自己动手丰衣足食。iscroll并没有考虑原生行为，而是通过模拟实现。因为iscroll要做很多事，而原生意味着不可控。iscroll通过使用css3动画以及帧动画（requestAnimationFrame）来模拟滚动，对区域滚动的行为、状态绝对可控，这样就可以大作文章，如知悉滚动位置，缩放控制等。 嗯，不错，基因一致就用这个了，所以我们就基于iscroll实现了scrollView组件。 既然我们是基于iscroll实现的scrollView，那我们先看下iscroll的基本属性和api。 常用的参数如下： hScroll               false 禁止横向滚动 true横向滚动 默认为true vScroll         [...]

在实际的项目开发中，需要用到 cordova 的插件，进行各个不同平台的辅助开发，我们可以通过 plugins.cordova.io 对现有插件的搜索，以及安装。 插件的安装和使用，详细可以通过查阅 Cordova 的官网文档 The Command-Line Interface . 但是更多的时候，我们需要开发属于我们自己的插件。通过查看官方文档 Plugin Development Guide，你会发现，坑爹啊，这文档怎么还是以前 2.x 的开发文档？？自己在编写插件的过程中，花了不少时间，在这里讲一下如何开发属于自己的插件。 通过命令行创建 app 应用之后，你会发现目录结构是这样子的： ├── platforms | ├── android | ├── ios | ├── wp7 | └── ... [...]

概述： Router是一种根据不同URL的来表现的页面状态的能力，基于HTML5 history api实现. Router模块提供了根据不同组件state、model的states、以及自定义states来实现的对浏览器的前进后退导航、有状态的书签、可分享的URL、URL自定义处理器等支持。如果你曾经使用过一些后端框架比如Express、Sinatra、Play,那么你将会发现和他们的想法非常相似。 […]