Hbuilder集成微信支付教程(简单流程)
整个系统运作的流程大致是这样:
(1)APP 向 服务器 发出需要付款的请求
(2)服务器 请求 微信服务端 下单
(3)服务器 将下单数据回复给 APP
(4)APP 向微信服务端 发起请求并输入密码进行支付
关键字用加粗表示,APP指用户正在使用的APP,服务器指自己的业务服务器,微信服务端指微信端的服务器。
那整个流程具体怎么实现?请看下文,将会从申请接口开始讲述。
第一步
在浏览器新标签页中打开https://open.weixin.qq.com/,注册一个账号,并且审核开发者资质(个人或者是企业)。
创建一个APP移动应用,应用的开发信息需要填写完整,如下载页面地址、Bundle ID(IOS)和应用签名(Android)等。应用签名不要填错,怎么获取它可以网上搜索方法。
接下来为该应用申请微信支付,填写好相应的资料,等待审核成功。
第二步
申请成功后,邮箱会收到这么一封邮件。
用这封邮件上显示的账号密码,登录微信支付,地址是:https://pay.weixin.qq.com/index.php/core/home/login
把网页上提示需要设置的都设置好,需要的控件也都给它装上。最好使用IE浏览器登录微信支付,谷歌浏览器会出现问题,原因是它们的插件不是很兼容非IE浏览器。
API密钥可以先设置好,证书也可以先下载下来,后面会用到。
第三步
之前做支付宝接口的时候,这一步基本都是开始进行小额测试了,但是微信为了广大的开发者能够在真枪实弹之前先熟悉这一切,所以就增加了一个“验收”的过程(个人表示这一步略坑,文档写的不清楚,走了些弯路)。
验收的指引文档在这里:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=23_1
这个“验收”就是在实际支付交易之前,先进行一些虚拟的交易。交易过程同真实交易一样,也是先在APP上买东西,调用微信支付,然后付款,但是不用真正的付款,商户账号也不会收到钱。
千万别忘记,要先打开微信,关注“微信支付商户接入验收助手”,然后绑定自己的微信支付账号。
依次点击“验收case”->“app支付”->“APP支付验收用例”,就可看到完成“验收”过程需要哪些步骤了。
标注了“必选”的用例都要去做掉,“可选”的可以不用管它。
每个用例都规定了交易的金额,一定要按照这个金额来支付,否则不会成功。
第四步
“验收”其实就是把整个支付流程全部跑一遍,所以APP中要记得集成微信支付插件。
Hbuilder在云打包时会自动集成微信支付,只要在manifest.json的“SDK配置”中填写好相关信息就可以了。
原生APP需要自己去集成,具体方法就要自己看文档实现了。
服务端程序需要按照https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1文档中的API去实现,“验收”过程中,所有的URL地址都需要加上sandboxnew,而且API密钥不能用上文提到自己去填写的(这是验收结束后真枪实弹时用的),而是从https://api.mch.weixin.qq.com/sandboxnew/pay/getsignkey获取的,这些在验收指引文档中都有说明。
坑1提示:“验收”过程中,在调用微信客户端支付时,微信会提示APP ID没有绑定PAY SIGN KEY。其实这个时候已经算是支付成功了,别管它,直接点确定!
坑2提示:服务器从微信服务端获取到下单数据,要给APP回复时,如果用Hbuilder,其实回复的是一串JSON数据,别把XML数据回复过去了(会提示支付失败-1)。格式如下:
{“appid”:”应用APPID”,”noncestr”:”随机数”,”package”:”Sign=WXPay”,”partnerid”:”微信支付商户号”,”prepayid”:”XXXXXXXXXXXX”,”timestamp”:时间戳,”sign”:”签名”}
将XML数据转成以上的JSON数据回给APP就可以了,记得重新签名要重新生成!
第五步
每完成一个验收流程,都要去微信公众号的“我的验收”->“查询验收结果”->“查询用例接入结果”->“APP支付”中查看一下,确定是否成功。
等所有“必选”用例全部完成,那么恭喜你,验收完成。这时别再用验收时获取到的API密钥了,用自己填写的API密钥开始真枪实弹地小额测试一笔吧。
涉及到退款等资金回滚的API业务,微信支付要求使用证书(上文说要下载的)来验证安全,如果服务器用的PHP就在CURL中设置好证书地址,方法在微信支付文档中有。
微信支付相比支付宝支付有一点好处,就是退款后,微信支付会退回扣的千分之六手续费,而支付宝不会退。
整个系统运作的流程大致是这样:
(1)APP 向 服务器 发出需要付款的请求
(2)服务器 请求 微信服务端 下单
(3)服务器 将下单数据回复给 APP
(4)APP 向微信服务端 发起请求并输入密码进行支付
关键字用加粗表示,APP指用户正在使用的APP,服务器指自己的业务服务器,微信服务端指微信端的服务器。
那整个流程具体怎么实现?请看下文,将会从申请接口开始讲述。
第一步
在浏览器新标签页中打开https://open.weixin.qq.com/,注册一个账号,并且审核开发者资质(个人或者是企业)。
创建一个APP移动应用,应用的开发信息需要填写完整,如下载页面地址、Bundle ID(IOS)和应用签名(Android)等。应用签名不要填错,怎么获取它可以网上搜索方法。
接下来为该应用申请微信支付,填写好相应的资料,等待审核成功。
第二步
申请成功后,邮箱会收到这么一封邮件。
用这封邮件上显示的账号密码,登录微信支付,地址是:https://pay.weixin.qq.com/index.php/core/home/login
把网页上提示需要设置的都设置好,需要的控件也都给它装上。最好使用IE浏览器登录微信支付,谷歌浏览器会出现问题,原因是它们的插件不是很兼容非IE浏览器。
API密钥可以先设置好,证书也可以先下载下来,后面会用到。
第三步
之前做支付宝接口的时候,这一步基本都是开始进行小额测试了,但是微信为了广大的开发者能够在真枪实弹之前先熟悉这一切,所以就增加了一个“验收”的过程(个人表示这一步略坑,文档写的不清楚,走了些弯路)。
验收的指引文档在这里:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=23_1
这个“验收”就是在实际支付交易之前,先进行一些虚拟的交易。交易过程同真实交易一样,也是先在APP上买东西,调用微信支付,然后付款,但是不用真正的付款,商户账号也不会收到钱。
千万别忘记,要先打开微信,关注“微信支付商户接入验收助手”,然后绑定自己的微信支付账号。
依次点击“验收case”->“app支付”->“APP支付验收用例”,就可看到完成“验收”过程需要哪些步骤了。
标注了“必选”的用例都要去做掉,“可选”的可以不用管它。
每个用例都规定了交易的金额,一定要按照这个金额来支付,否则不会成功。
第四步
“验收”其实就是把整个支付流程全部跑一遍,所以APP中要记得集成微信支付插件。
Hbuilder在云打包时会自动集成微信支付,只要在manifest.json的“SDK配置”中填写好相关信息就可以了。
原生APP需要自己去集成,具体方法就要自己看文档实现了。
服务端程序需要按照https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1文档中的API去实现,“验收”过程中,所有的URL地址都需要加上sandboxnew,而且API密钥不能用上文提到自己去填写的(这是验收结束后真枪实弹时用的),而是从https://api.mch.weixin.qq.com/sandboxnew/pay/getsignkey获取的,这些在验收指引文档中都有说明。
坑1提示:“验收”过程中,在调用微信客户端支付时,微信会提示APP ID没有绑定PAY SIGN KEY。其实这个时候已经算是支付成功了,别管它,直接点确定!
坑2提示:服务器从微信服务端获取到下单数据,要给APP回复时,如果用Hbuilder,其实回复的是一串JSON数据,别把XML数据回复过去了(会提示支付失败-1)。格式如下:
{“appid”:”应用APPID”,”noncestr”:”随机数”,”package”:”Sign=WXPay”,”partnerid”:”微信支付商户号”,”prepayid”:”XXXXXXXXXXXX”,”timestamp”:时间戳,”sign”:”签名”}
将XML数据转成以上的JSON数据回给APP就可以了,记得重新签名要重新生成!
第五步
每完成一个验收流程,都要去微信公众号的“我的验收”->“查询验收结果”->“查询用例接入结果”->“APP支付”中查看一下,确定是否成功。
等所有“必选”用例全部完成,那么恭喜你,验收完成。这时别再用验收时获取到的API密钥了,用自己填写的API密钥开始真枪实弹地小额测试一笔吧。
涉及到退款等资金回滚的API业务,微信支付要求使用证书(上文说要下载的)来验证安全,如果服务器用的PHP就在CURL中设置好证书地址,方法在微信支付文档中有。
微信支付相比支付宝支付有一点好处,就是退款后,微信支付会退回扣的千分之六手续费,而支付宝不会退。
原文地址:http://blog.luotiankeji.com/252.html
收起阅读 »IOS指纹识别插件开发方法
更新:HTML5+已经自带指纹识别。http://www.html5plus.org/doc/zh_cn/fingerprint.html。以下文档已过期。
之前一直考虑使用Native.js调用原生方法去实现指纹识别,但是,发现不行,因为Native.js如果调用原生方法中含有闭包的情况时,JS的回调函数无法正确识别参数的内容。
下面来说一下插件的开发,发现还是插件的开发灵活方便。
开发插件需要具备以下准备:
1、MAC系统并安装XCode。
2、按照官方文档配置好5+SDK的配置,并且调试成功。
以上准备工作完成后,就可以开发了:
1、在项目工程中,新建一个FingerprintIdent类,内容如下:
FingerprintIdent.h文件
#import <UIKit/UIKit.h>
#import <PGPlugin.h>
#import <PGMethod.h>
@interface FingerprintIdent : PGPlugin
// 是否支持指纹识别
- (void)canEvaluatePolicy:(PGMethod*)command;
// 弹出指纹识别窗口的方法
- (void)evaluatePolicy:(PGMethod*)command;
@end
FingerprintIdent.m文件
#import "FingerprintIdent.h"
#import <LocalAuthentication/LocalAuthentication.h>
@implementation FingerprintIdent
- (void)canEvaluatePolicy:(PGMethod*)command{
if(command) {
NSString* cbId = [command.arguments objectAtIndex:0];
LAContext *lacontent = [[LAContext alloc] init];
NSError *error = nil;
if([lacontent canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics error:&error]){
[self toSucessCallback:cbId withInt:1];
} else {
[self toSucessCallback:cbId withInt:0];
}
}
}
- (void)evaluatePolicy:(PGMethod*)command{
if(command) {
NSString* cbId = [command.arguments objectAtIndex:0];
NSString* pArgument1 = [command.arguments objectAtIndex:1];
LAContext *lacontent = [[LAContext alloc] init];
NSError *error = nil;
if([lacontent canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics error:&error]){
[lacontent evaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics localizedReason:pArgument1 reply:^(BOOL success, NSError * _Nullable error) {
NSMutableDictionary *result = [NSMutableDictionary dictionary];
if(success){
[result setValue:@"" forKey:@"error"];
} else {
NSString *errorMsg;
switch (error.code) {
case LAErrorSystemCancel:
{
errorMsg = @"切换到其他APP,系统取消验证Touch ID";
break;
}
case LAErrorUserCancel:
{
errorMsg = @"用户取消验证Touch ID";
break;
}
case LAErrorUserFallback:
{
errorMsg = @"用户选择输入密码,切换主线程处理";
break;
}
default:
{
errorMsg = @"其他情况,切换主线程处理";
break;
}
}
[result setValue:errorMsg forKey:@"error"];
}
NSData *data=[NSJSONSerialization dataWithJSONObject:result options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
[self toSucessCallback:cbId withString:jsonStr];
}];
} else {
[self toSucessCallback:cbId withInt:0];
}
}
}
@end
2、接下来,设置几项内容。
在Xcode项目中找到PandoraApi.bundle >> feature.plist
在里面添加一项 key为FingerprintIdent, type为Dictionary。在里面新建一子项 key为class ,type为String, value为FingerprintIdent。在新建一个子项 key为global ,type为Boolean, value为NO。
3、编辑你的测试页面test.html
内容如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div class="content">
<div class="button" onclick="iscanEvaluatePolicy()">是否支持指纹识别</div>
<div class="button" onclick="toEvaluatePolicy()">指纹识别</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
document.addEventListener( "plusready", function() {
// 声明的JS“扩展插件别名”
var _BARCODE = 'FingerprintIdent',
B = window.plus.bridge;
var fingerprintIdent = {
canEvaluatePolicy : function (successCallback, errorCallback ) {
var success = typeof successCallback !== 'function' ? null : function(args) {
successCallback(args);
},
fail = typeof errorCallback !== 'function' ? null : function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
return B.exec(_BARCODE, "canEvaluatePolicy", [callbackID]);
},
evaluatePolicy : function (Argus1, successCallback, errorCallback ) {
var success = typeof successCallback !== 'function' ? null : function(args) {
successCallback(args);
},
fail = typeof errorCallback !== 'function' ? null : function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
return B.exec(_BARCODE, "evaluatePolicy", [callbackID, Argus1]);
}
};
window.plus.fingerprintIdent = fingerprintIdent;
}, true );
// 是否支持指纹识别
function iscanEvaluatePolicy() {
plus.fingerprintIdent.canEvaluatePolicy(function( result ) {
alert( result);
},
function(result){
//alert(result)
});
}
// 校验指纹识别
function toEvaluatePolicy() {
plus.fingerprintIdent.evaluatePolicy('请校验指纹', function( result ) {
var data = mui.parseJSON(result);
if(!data.error) {
alert('校验成功');
} else {
alert( '错误原因:'+data.error);
}
},
function(result){
//alert(result)
});
}
</script>
</body>
</html>
OK,至此,IOS指纹识别插件已经开发完成。但是记住,一定要在本地使用XCode调试并打包才会生效。看到官方文档里面的IOS插件实例还是空的,我这提供一个实例。哈哈。
更新:HTML5+已经自带指纹识别。http://www.html5plus.org/doc/zh_cn/fingerprint.html。以下文档已过期。
之前一直考虑使用Native.js调用原生方法去实现指纹识别,但是,发现不行,因为Native.js如果调用原生方法中含有闭包的情况时,JS的回调函数无法正确识别参数的内容。
下面来说一下插件的开发,发现还是插件的开发灵活方便。
开发插件需要具备以下准备:
1、MAC系统并安装XCode。
2、按照官方文档配置好5+SDK的配置,并且调试成功。
以上准备工作完成后,就可以开发了:
1、在项目工程中,新建一个FingerprintIdent类,内容如下:
FingerprintIdent.h文件
#import <UIKit/UIKit.h>
#import <PGPlugin.h>
#import <PGMethod.h>
@interface FingerprintIdent : PGPlugin
// 是否支持指纹识别
- (void)canEvaluatePolicy:(PGMethod*)command;
// 弹出指纹识别窗口的方法
- (void)evaluatePolicy:(PGMethod*)command;
@end
FingerprintIdent.m文件
#import "FingerprintIdent.h"
#import <LocalAuthentication/LocalAuthentication.h>
@implementation FingerprintIdent
- (void)canEvaluatePolicy:(PGMethod*)command{
if(command) {
NSString* cbId = [command.arguments objectAtIndex:0];
LAContext *lacontent = [[LAContext alloc] init];
NSError *error = nil;
if([lacontent canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics error:&error]){
[self toSucessCallback:cbId withInt:1];
} else {
[self toSucessCallback:cbId withInt:0];
}
}
}
- (void)evaluatePolicy:(PGMethod*)command{
if(command) {
NSString* cbId = [command.arguments objectAtIndex:0];
NSString* pArgument1 = [command.arguments objectAtIndex:1];
LAContext *lacontent = [[LAContext alloc] init];
NSError *error = nil;
if([lacontent canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics error:&error]){
[lacontent evaluatePolicy:LAPolicyDeviceOwnerAuthenticationWithBiometrics localizedReason:pArgument1 reply:^(BOOL success, NSError * _Nullable error) {
NSMutableDictionary *result = [NSMutableDictionary dictionary];
if(success){
[result setValue:@"" forKey:@"error"];
} else {
NSString *errorMsg;
switch (error.code) {
case LAErrorSystemCancel:
{
errorMsg = @"切换到其他APP,系统取消验证Touch ID";
break;
}
case LAErrorUserCancel:
{
errorMsg = @"用户取消验证Touch ID";
break;
}
case LAErrorUserFallback:
{
errorMsg = @"用户选择输入密码,切换主线程处理";
break;
}
default:
{
errorMsg = @"其他情况,切换主线程处理";
break;
}
}
[result setValue:errorMsg forKey:@"error"];
}
NSData *data=[NSJSONSerialization dataWithJSONObject:result options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
[self toSucessCallback:cbId withString:jsonStr];
}];
} else {
[self toSucessCallback:cbId withInt:0];
}
}
}
@end
2、接下来,设置几项内容。
在Xcode项目中找到PandoraApi.bundle >> feature.plist
在里面添加一项 key为FingerprintIdent, type为Dictionary。在里面新建一子项 key为class ,type为String, value为FingerprintIdent。在新建一个子项 key为global ,type为Boolean, value为NO。
3、编辑你的测试页面test.html
内容如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div class="content">
<div class="button" onclick="iscanEvaluatePolicy()">是否支持指纹识别</div>
<div class="button" onclick="toEvaluatePolicy()">指纹识别</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
document.addEventListener( "plusready", function() {
// 声明的JS“扩展插件别名”
var _BARCODE = 'FingerprintIdent',
B = window.plus.bridge;
var fingerprintIdent = {
canEvaluatePolicy : function (successCallback, errorCallback ) {
var success = typeof successCallback !== 'function' ? null : function(args) {
successCallback(args);
},
fail = typeof errorCallback !== 'function' ? null : function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
return B.exec(_BARCODE, "canEvaluatePolicy", [callbackID]);
},
evaluatePolicy : function (Argus1, successCallback, errorCallback ) {
var success = typeof successCallback !== 'function' ? null : function(args) {
successCallback(args);
},
fail = typeof errorCallback !== 'function' ? null : function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
return B.exec(_BARCODE, "evaluatePolicy", [callbackID, Argus1]);
}
};
window.plus.fingerprintIdent = fingerprintIdent;
}, true );
// 是否支持指纹识别
function iscanEvaluatePolicy() {
plus.fingerprintIdent.canEvaluatePolicy(function( result ) {
alert( result);
},
function(result){
//alert(result)
});
}
// 校验指纹识别
function toEvaluatePolicy() {
plus.fingerprintIdent.evaluatePolicy('请校验指纹', function( result ) {
var data = mui.parseJSON(result);
if(!data.error) {
alert('校验成功');
} else {
alert( '错误原因:'+data.error);
}
},
function(result){
//alert(result)
});
}
</script>
</body>
</html>
OK,至此,IOS指纹识别插件已经开发完成。但是记住,一定要在本地使用XCode调试并打包才会生效。看到官方文档里面的IOS插件实例还是空的,我这提供一个实例。哈哈。
收起阅读 »滚动条不回归开始位置
官方教程,滚动区域需要加入如下代码
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
options = {
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
}
mui('.mui-scroll-wrapper').scroll(options);
这样添加好代码,当内容滚动一段距离,如果有需求需要更换滚动区域的内容,特别是后加载的内容比之前少,会发现看不到数据,需要下拉一下滚动区域。
查看了一下 滚动区域是通过 transform 实现的,可以动态的去修改 transform 就可以实现回归位置
var scroll= mui(".mui-scroll-wrapper .mui-scroll")[0];
scroll.style.transform ="translate3d(0px, 0px, 0px) translateZ(0px)";
官方教程,滚动区域需要加入如下代码
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
options = {
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
}
mui('.mui-scroll-wrapper').scroll(options);
这样添加好代码,当内容滚动一段距离,如果有需求需要更换滚动区域的内容,特别是后加载的内容比之前少,会发现看不到数据,需要下拉一下滚动区域。
查看了一下 滚动区域是通过 transform 实现的,可以动态的去修改 transform 就可以实现回归位置
var scroll= mui(".mui-scroll-wrapper .mui-scroll")[0];
scroll.style.transform ="translate3d(0px, 0px, 0px) translateZ(0px)";
DCloud赞助W3C,2017年W3C顾问委员会在京顺利召开;HBuilder 8.1.2版启动异常及Android平台地图问题的解决办法
【公告】关于HBuilder 8.1.2不能正常启动,Android平台地图卡顿、POI搜索后不显示数据问题的解决办法,请参考http://ask.dcloud.net.cn/article/1356
============================================
近日,2017 W3C顾问委员会会议(W3C AC 2017)在北京的国家会议中心顺利举行。本届会议共安排了8个会议环节,覆盖W3C的愿景与战略发展、加强Web核心、下一代用户体验与工业需求、延伸Web的覆盖度内容、W3C流程与AB优先级等话题。包括DCloud在内,共有近100名W3C的会员代表及全球团队成员参加了本次AC会议。
W3C顾问委员会是W3C全球团队与W3C会员交流的重要平台,每年在全球举行两次,仅面向会员开放。
W3C全球CEO Jeff在开场致谢大会赞助商阿里巴巴和DCloud:
在本次会议中,DCloud CEO、HTML5中国产业联盟秘书长王安,向包括W3C CEO在内的众多组织成员和领导汇报了HTML5在中国的发展情况,分析了在移动领域,为什么web没有成为主流计算平台。加载速度、渲染流畅度、功能不足、可安装性不足、弱网适应能力差是当前HTML5的瓶颈问题。用户更喜欢用原生版本,而开发商也发现原生版本的留存率和付费转化率超过HTML5版本数倍。HTML5中国产业联盟通过HTML5+扩展标准做出了积极的尝试,目前已经在商用环境中基于HTML5+标准已经做出了大量功能体验、留存、付费转换等业务数据与原生一致的产品。
在中国,因为腾讯小程序的强势和谷歌的缺位,HTML5强化扩展这个产业发展非常快,行业竞争激烈程度是国外所没有的。在讨论中W3C CEO Jeff回复称在中国这么大的市场出现了这样的新的突破他并不惊讶,希望中国的标准组织能够与W3C有更紧密的合作,将这些商用经验输出到全球。
DCloud CEO、HTML5中国产业联盟秘书长王安 在工作会议中讲话:
作为W3C的会员,DCloud一直秉承标准化路线,推进繁荣开放的增强型web生态。以后也将继续与W3C全球保持紧密沟通,增强中国技术标准在全球的影响力!
【公告】关于HBuilder 8.1.2不能正常启动,Android平台地图卡顿、POI搜索后不显示数据问题的解决办法,请参考http://ask.dcloud.net.cn/article/1356
============================================
近日,2017 W3C顾问委员会会议(W3C AC 2017)在北京的国家会议中心顺利举行。本届会议共安排了8个会议环节,覆盖W3C的愿景与战略发展、加强Web核心、下一代用户体验与工业需求、延伸Web的覆盖度内容、W3C流程与AB优先级等话题。包括DCloud在内,共有近100名W3C的会员代表及全球团队成员参加了本次AC会议。
W3C顾问委员会是W3C全球团队与W3C会员交流的重要平台,每年在全球举行两次,仅面向会员开放。
W3C全球CEO Jeff在开场致谢大会赞助商阿里巴巴和DCloud:
在本次会议中,DCloud CEO、HTML5中国产业联盟秘书长王安,向包括W3C CEO在内的众多组织成员和领导汇报了HTML5在中国的发展情况,分析了在移动领域,为什么web没有成为主流计算平台。加载速度、渲染流畅度、功能不足、可安装性不足、弱网适应能力差是当前HTML5的瓶颈问题。用户更喜欢用原生版本,而开发商也发现原生版本的留存率和付费转化率超过HTML5版本数倍。HTML5中国产业联盟通过HTML5+扩展标准做出了积极的尝试,目前已经在商用环境中基于HTML5+标准已经做出了大量功能体验、留存、付费转换等业务数据与原生一致的产品。
在中国,因为腾讯小程序的强势和谷歌的缺位,HTML5强化扩展这个产业发展非常快,行业竞争激烈程度是国外所没有的。在讨论中W3C CEO Jeff回复称在中国这么大的市场出现了这样的新的突破他并不惊讶,希望中国的标准组织能够与W3C有更紧密的合作,将这些商用经验输出到全球。
DCloud CEO、HTML5中国产业联盟秘书长王安 在工作会议中讲话:
作为W3C的会员,DCloud一直秉承标准化路线,推进繁荣开放的增强型web生态。以后也将继续与W3C全球保持紧密沟通,增强中国技术标准在全球的影响力!
收起阅读 »ThinkPHP5.0入门到精通(含项目)
ThinkPHP5.0入门到精通
http://study.163.com/course/courseMain.htm?courseId=1003838084
课程介绍:
第一部分:
Thinkphp5.0入门教程,使开发者快速从thinkphp3.2版本过度到thinkphp5.0,最高效的降低学习成本,不研究概念性的东西,只讲究实际开发中用到的东西。
第二部分:
属于高级教程,有一定的难度,开发项目中常用的到类库或则组件,都会陆续更新上去,比如phpmailer邮件服务,阿里云oss存储服务,
支付宝支付,微信支付,七牛云存错,图片上传等等,整理成插件的形式,便于学习和使用。
由于课程标题数量限制,只能突出一部分知识点。
有php的基础知识,有了解过thinkphp方面的知识。
第一阶段(学前私信:835173372)
001:站点部署环境和框架解释
002:代码执行流程和命名空间
003:数据库配置和引入db类库
004:数据库CURD-查询数据,插入数据
单条查询,批量查询,单条插入,批量插入。
005:数据库CURD-更新数据,删除数据
单条更新,批量更新,单条删除,批量删除,字段加1/n,字段健1/n
006:数据库CURD-查询方法,查询语法
getTableInfo()方法,where()F方法,whereOr()方法,混合查询,LIKE查询, BETWEEN查询等等
007:数据库CURD-多表联查,缓存查询
alias(),join(),limit(),group(),order(),cache(),select()使用技巧。
008:数据库CURD-分页查询,聚合查询
page(),limit(),count(),max(),min(),avg()使用技巧
009:数据请求-请求信息,请求接受变量
Request类的引入和使用,is_Get();is_Post();is_Ajax();is_Mobile();input()助手函数的使用技巧
010:数据请求-伪静态,公共方法创建等
数据请求-伪静态,HTTP头信息,公共方法引入等
011:控制器初始化-空操作-跳转重定向等
控制器定义,初始化,空操作,跳转重定向详解
012:视图,模板赋值渲染,循环遍历等等
模板引擎,模板赋值,模板渲染,模板定位,模板标签,变量输出,循环输出标签,比较标签,原生php,定义标签。
013:Tp5.0-session功能的封装和执行原理
Session的创建,获取,删除,助手函数的使用。
014:分页实现-内置Paginator对象详解等
分页实现(内置Paginator对象来实现)
015:Workerman-PHP socket服务器框架
修改站点入口地址和Workerman-PHP socket服务器框架
插件开发
016:搭建PHPMailer类库开发邮件发送
git地址:https://github.com/PHPMailer/PHPMailer
php.ini注意开启ssl服务,命名空间的注意事项,smtp授权码的概念,网易邮箱客户端端口465
017:Tp5.0验证码的创建和验证使用技巧
验证码类库(think-captcha)引入使用,一个页面创建个多个验证吗,多个验证码的验证等等
018:验证码的ajax动态切换效果开发案例
cdn模式引入jquery类库,标准的ajax请求api接口数据案例,http请求和响应分析。
019:命令行自动生成模块目录和控制器
命令行自动生成模块目录和控制器
ThinkPHP5.0 具备自动创建功能,可以用来自动生成需要的模块及目录结构和文件等,自动生成主要调用\think\Build类库
020:Composer工具安装和使用-安装Tp5和插件
1:Composer工具安装和使用。2:使用中国镜像设置。3:安装thinkphp最新包和扩展类库。
项目实战-PHP订单系统开发
021:项目需求分析和库表结构分析
商品主表和附表分析,订单主表和附表分析,页面开发所用到js库-vue.js,layer-mobile.js,jqurey.js
022:下单页面模板引入,vue对象赋值技巧
以json字符串的格式赋值到模板的vue对象里
023:vue实现页面的数据绑定(需要vue的知识)
vue的高级用法,包括click事件,watch,v-model用法等等。
024:vue配合后台接口ajax实现省市区三级联动插件
后台提供ajax接口数据,用户不同的操作响应不同的返回数据。
025:vue配合Layer-mobil组合表单数据,下单操作
vue配合Layer-mobil组合表单数据,下单操作,layer-mobile做一些提示效果
026:订单入库操作,库表的回滚操作
订单入库操作,库表的回滚操作-多表更新操作容易产生垃圾数据。
027:代码优化和项目终结
代码优化和项目终结
学习地址:
http://study.163.com/course/courseMain.htm?courseId=1003838084
ThinkPHP5.0入门到精通
http://study.163.com/course/courseMain.htm?courseId=1003838084
课程介绍:
第一部分:
Thinkphp5.0入门教程,使开发者快速从thinkphp3.2版本过度到thinkphp5.0,最高效的降低学习成本,不研究概念性的东西,只讲究实际开发中用到的东西。
第二部分:
属于高级教程,有一定的难度,开发项目中常用的到类库或则组件,都会陆续更新上去,比如phpmailer邮件服务,阿里云oss存储服务,
支付宝支付,微信支付,七牛云存错,图片上传等等,整理成插件的形式,便于学习和使用。
由于课程标题数量限制,只能突出一部分知识点。
有php的基础知识,有了解过thinkphp方面的知识。
第一阶段(学前私信:835173372)
001:站点部署环境和框架解释
002:代码执行流程和命名空间
003:数据库配置和引入db类库
004:数据库CURD-查询数据,插入数据
单条查询,批量查询,单条插入,批量插入。
005:数据库CURD-更新数据,删除数据
单条更新,批量更新,单条删除,批量删除,字段加1/n,字段健1/n
006:数据库CURD-查询方法,查询语法
getTableInfo()方法,where()F方法,whereOr()方法,混合查询,LIKE查询, BETWEEN查询等等
007:数据库CURD-多表联查,缓存查询
alias(),join(),limit(),group(),order(),cache(),select()使用技巧。
008:数据库CURD-分页查询,聚合查询
page(),limit(),count(),max(),min(),avg()使用技巧
009:数据请求-请求信息,请求接受变量
Request类的引入和使用,is_Get();is_Post();is_Ajax();is_Mobile();input()助手函数的使用技巧
010:数据请求-伪静态,公共方法创建等
数据请求-伪静态,HTTP头信息,公共方法引入等
011:控制器初始化-空操作-跳转重定向等
控制器定义,初始化,空操作,跳转重定向详解
012:视图,模板赋值渲染,循环遍历等等
模板引擎,模板赋值,模板渲染,模板定位,模板标签,变量输出,循环输出标签,比较标签,原生php,定义标签。
013:Tp5.0-session功能的封装和执行原理
Session的创建,获取,删除,助手函数的使用。
014:分页实现-内置Paginator对象详解等
分页实现(内置Paginator对象来实现)
015:Workerman-PHP socket服务器框架
修改站点入口地址和Workerman-PHP socket服务器框架
插件开发
016:搭建PHPMailer类库开发邮件发送
git地址:https://github.com/PHPMailer/PHPMailer
php.ini注意开启ssl服务,命名空间的注意事项,smtp授权码的概念,网易邮箱客户端端口465
017:Tp5.0验证码的创建和验证使用技巧
验证码类库(think-captcha)引入使用,一个页面创建个多个验证吗,多个验证码的验证等等
018:验证码的ajax动态切换效果开发案例
cdn模式引入jquery类库,标准的ajax请求api接口数据案例,http请求和响应分析。
019:命令行自动生成模块目录和控制器
命令行自动生成模块目录和控制器
ThinkPHP5.0 具备自动创建功能,可以用来自动生成需要的模块及目录结构和文件等,自动生成主要调用\think\Build类库
020:Composer工具安装和使用-安装Tp5和插件
1:Composer工具安装和使用。2:使用中国镜像设置。3:安装thinkphp最新包和扩展类库。
项目实战-PHP订单系统开发
021:项目需求分析和库表结构分析
商品主表和附表分析,订单主表和附表分析,页面开发所用到js库-vue.js,layer-mobile.js,jqurey.js
022:下单页面模板引入,vue对象赋值技巧
以json字符串的格式赋值到模板的vue对象里
023:vue实现页面的数据绑定(需要vue的知识)
vue的高级用法,包括click事件,watch,v-model用法等等。
024:vue配合后台接口ajax实现省市区三级联动插件
后台提供ajax接口数据,用户不同的操作响应不同的返回数据。
025:vue配合Layer-mobil组合表单数据,下单操作
vue配合Layer-mobil组合表单数据,下单操作,layer-mobile做一些提示效果
026:订单入库操作,库表的回滚操作
订单入库操作,库表的回滚操作-多表更新操作容易产生垃圾数据。
027:代码优化和项目终结
代码优化和项目终结
学习地址:
http://study.163.com/course/courseMain.htm?courseId=1003838084
mui扩展图标的使用
1.在html中引入icons-extra.css文件即可。此文件可以在例子的css文件中找到,引入即可使用mui扩展图标
1.在html中引入icons-extra.css文件即可。此文件可以在例子的css文件中找到,引入即可使用mui扩展图标
video视频,点击播放禁止自动全屏,点击全屏自动横屏播放
点击播放禁止自动全屏
首先在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。
"plus":{
"allowsInlineMediaPlayback": true
}
然后在video标签中添加playsinline属性,然后测试得出iphone5s系统8.3上还是会自动全屏(其他的没有全部测试过,不太清楚),查了一圈后加上webkit-playsinline好了,
注意两个都加上,否则高低版本不兼容
<video controls="controls" preload="auto" playsinline webkit-playsinline src="" poster="" width="100%" height="auto">
</video>
点击全屏自动横屏播放
现在已经可以点击不全屏播放了,但是看着字幕太小看不清,想点开全屏看,发现不能横屏,还是很小看不清,才发现app被设置成了禁止横屏,这就尴尬了!经过一番查找还是被我找出在app禁止横屏的基础上,点击全屏横屏播放的解决办法了:
首先在manifest.json里设置
全部勾上,或者直接在manifest.json的plus节点下的distribute节点里添加:
"orientation": ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/
然后在首页
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
所以app还是禁止横屏的
然后iOS上监听video元素的webkitbeginfullscreen与webkitendfullscreen事件,在全屏开始和结束时,对屏幕方向做相应的调整:
// iOS平台的视频全屏旋转
var fullScreenOfIos = function(videoElem) {
// 监听的事件与Android平台有很大区别
videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
});
videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
});
};
Android上监听webkitfullscreenchange事件,并且读取全屏元素,对屏幕方向做出调整:
// Android平台的视频全屏旋转
var fullScreenOfAndroid = function() {
if(true) {
// 最新5+API的支持
var self = plus.webview.currentWebview();
self.setStyle({
videoFullscreen: 'landscape'
});
} else {
document.addEventListener('webkitfullscreenchange', function() {
var el = document.webkitFullscreenElement; //获取全屏元素
if(el) {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
} else {
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
}
});
}
};
最后让我们来分别调用一下:
// 涉及到5+API的内容,均在plusready事件后调用;
document.addEventListener('plusready', function() {
var osName = plus.os.name;
if(osName === 'Android') {
fullScreenOfAndroid();
} else if(osName === 'iOS') {
var videoElem = document.getElementById('video');
fullScreenOfIos(videoElem);
}
});
大功告成!!!
点击播放禁止自动全屏
首先在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。
"plus":{
"allowsInlineMediaPlayback": true
}
然后在video标签中添加playsinline属性,然后测试得出iphone5s系统8.3上还是会自动全屏(其他的没有全部测试过,不太清楚),查了一圈后加上webkit-playsinline好了,
注意两个都加上,否则高低版本不兼容
<video controls="controls" preload="auto" playsinline webkit-playsinline src="" poster="" width="100%" height="auto">
</video>
点击全屏自动横屏播放
现在已经可以点击不全屏播放了,但是看着字幕太小看不清,想点开全屏看,发现不能横屏,还是很小看不清,才发现app被设置成了禁止横屏,这就尴尬了!经过一番查找还是被我找出在app禁止横屏的基础上,点击全屏横屏播放的解决办法了:
首先在manifest.json里设置
全部勾上,或者直接在manifest.json的plus节点下的distribute节点里添加:
"orientation": ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/
然后在首页
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
所以app还是禁止横屏的
然后iOS上监听video元素的webkitbeginfullscreen与webkitendfullscreen事件,在全屏开始和结束时,对屏幕方向做相应的调整:
// iOS平台的视频全屏旋转
var fullScreenOfIos = function(videoElem) {
// 监听的事件与Android平台有很大区别
videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
});
videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
});
};
Android上监听webkitfullscreenchange事件,并且读取全屏元素,对屏幕方向做出调整:
// Android平台的视频全屏旋转
var fullScreenOfAndroid = function() {
if(true) {
// 最新5+API的支持
var self = plus.webview.currentWebview();
self.setStyle({
videoFullscreen: 'landscape'
});
} else {
document.addEventListener('webkitfullscreenchange', function() {
var el = document.webkitFullscreenElement; //获取全屏元素
if(el) {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
} else {
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
}
});
}
};
最后让我们来分别调用一下:
// 涉及到5+API的内容,均在plusready事件后调用;
document.addEventListener('plusready', function() {
var osName = plus.os.name;
if(osName === 'Android') {
fullScreenOfAndroid();
} else if(osName === 'iOS') {
var videoElem = document.getElementById('video');
fullScreenOfIos(videoElem);
}
});
大功告成!!!
收起阅读 »关于setPullToRefresh 背景色
webview 的 setPullToRefresh 拉下来时的背景色怎么设置啊?
webview 的 setPullToRefresh 拉下来时的背景色怎么设置啊?
h5+免费教程、mui免费教程、各类app开发实战教程更新中,一起努力共同进步!!
hcoder 一直致力于奉献高质量的视频教程,官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点 : JavaScript 快速提高视频教程
实战: MUI、H5 APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 开发教程
知识点 : mui 全套教程
hcoder 一直致力于奉献高质量的视频教程,官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点 : JavaScript 快速提高视频教程
实战: MUI、H5 APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 开发教程
知识点 : mui 全套教程
免费教程地址
http://www.hcoder.net/course/index/cate/4
写给HBuilder的警示
HBuilder,是我用过最好用的一个工具,我也期盼与逐步这个工具成长。
但无意中我看到了APICloud及被法院判决抄袭违法事宜,惊叹中国知识产权违法成本太低了!
然后,我即被他的官网征服了!
这个流氓平台无疑对产品运维的很用心和细致,无论是产品介绍或是学习资料,都一目了然,
丰富且全面。记得学习HBuilder时,在其官网很难找到系统的学习资料,页面看上去繁杂和平庸。在网上搜索的视频,绝大多数还收费。
尽管我对HBuilder抱有敬畏,但我依然担心,有朝一日会被对手超越。至少,目前从网上搜索,该平台能搜索到时50万 条信息,而HBuilder才20万+ 。
在经济市场上,技术实力雄厚固然是根本,但不懂得市场运营也会惨败。例如,运作不成功的Huilder技术人才,也有可能被对手以高手挖墙角,并携带核心源码投入敌营。中国产权违法成本之低,根本不需要冒太大风险。
总之太多的血的教训,我不需要多说。
在选择Hbuilder或Apicloud之间,我仍在犹豫。因为,作为一名开发者,投入的是最宝贵的时间成本。
HBuilder,是我用过最好用的一个工具,我也期盼与逐步这个工具成长。
但无意中我看到了APICloud及被法院判决抄袭违法事宜,惊叹中国知识产权违法成本太低了!
然后,我即被他的官网征服了!
这个流氓平台无疑对产品运维的很用心和细致,无论是产品介绍或是学习资料,都一目了然,
丰富且全面。记得学习HBuilder时,在其官网很难找到系统的学习资料,页面看上去繁杂和平庸。在网上搜索的视频,绝大多数还收费。
尽管我对HBuilder抱有敬畏,但我依然担心,有朝一日会被对手超越。至少,目前从网上搜索,该平台能搜索到时50万 条信息,而HBuilder才20万+ 。
在经济市场上,技术实力雄厚固然是根本,但不懂得市场运营也会惨败。例如,运作不成功的Huilder技术人才,也有可能被对手以高手挖墙角,并携带核心源码投入敌营。中国产权违法成本之低,根本不需要冒太大风险。
总之太多的血的教训,我不需要多说。
在选择Hbuilder或Apicloud之间,我仍在犹豫。因为,作为一名开发者,投入的是最宝贵的时间成本。
MUI入门笔记
学习的是腾讯课程的教程h5+ App 开发实战教程 - 仿《有道词典》
一.准备工作
- 新建项目,选择mui作为模板
- 规划代码,建立基础文件作为模板来建立新文件copy.html
- 引css时引mui.css,而不是压缩版,方便做全局修改
二.常用代码记录
点击a标签打开新页面
<a id=“此处id要与html名字一致” onclick="openInfo(this.id)">
<script>
function openInfo(id) {
mui.openWindow({
url: id + '.html',
id: id + '.html',
});
}
</script>
二级页面标题栏,带返回键
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="title">标题</h1>
</header> 学习的是腾讯课程的教程h5+ App 开发实战教程 - 仿《有道词典》
一.准备工作
- 新建项目,选择mui作为模板
- 规划代码,建立基础文件作为模板来建立新文件copy.html
- 引css时引mui.css,而不是压缩版,方便做全局修改
二.常用代码记录
点击a标签打开新页面
<a id=“此处id要与html名字一致” onclick="openInfo(this.id)">
<script>
function openInfo(id) {
mui.openWindow({
url: id + '.html',
id: id + '.html',
});
}
</script>
二级页面标题栏,带返回键
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="title">标题</h1>
</header> 收起阅读 »








