文章 - DCloud问答

【分享】自用HBuilder主题（配色方案Visual Studio (Code)白色）

HBuilder 主题

自从改做前端了解到MUI之后，就爱上HBuilder了，代码提示和代码块太强大了
之前做.NET的时候一直以为Visual Studio是世界第一IDE，现在发现是自己孤陋寡闻了
对于前端来说的话，目前我没有发现哪个编辑器比HBuilder强大（最喜欢的代码格式化功能也有）
之前写代码一直都有代码格式化的强迫症，基本上每写一段代码不格式化就不舒服
改做前端之后发现有一个Visual Studio Code也不错，虽然比Visual Studio差点，但我要的基本功能都有
而且字体渲染比Visual Studio好看，最重要的是体积小

代码截图：
HBuilder Visual Studio Theme Preview

对比Visual Studio Code（公司没装Visual Studio 2015）：
Visual Studio Code Theme Preview

特别喜欢HBuilder，几乎完美了，用了一周左右只发现有几个小地方有点瑕疵，希望开发人员可以参考一下后续做修正：
第一个是选中注释功能，双斜杠会在该行首位出现，挺影响美观的，如果能在代码前面显示看起来会更舒服些：
comment
如果保持这样去格式化代码会导致中间空了很多

第二个是好像不能选中指定代码块格式化（有时候可能只希望格式化选中的代码）
第三个是编辑器的美观不足atom、visual studio，感觉字体渲染没那么好看然后夜间模式主题的话，只会改变编辑器和侧边窗口，不会改菜单栏，只会改配色方案，不会改变全局主题（这个如果要改的话感觉要重做，所以可以忽略）
第四个是偶尔会出现卡死、崩溃的情况

不过已经很好了我已经离不开它了希望HBuilder越做越好！

> 主题可能还有不完善的地方，大家可以一起完善然后再分享出来
使用方法：菜单栏-视觉主题设置-高级设置-导入-选择下载的主题文件

由于附件限定格式不能上传，请点击[此处](http://res.dskui.com/files/Visual Studio Code.tmTheme)下载主题
或直接访问下载地址：http://res.dskui.com/files/Visual Studio Code.tmTheme

继续阅读 »

自从改做前端了解到MUI之后，就爱上HBuilder了，代码提示和代码块太强大了
之前做.NET的时候一直以为Visual Studio是世界第一IDE，现在发现是自己孤陋寡闻了
对于前端来说的话，目前我没有发现哪个编辑器比HBuilder强大（最喜欢的代码格式化功能也有）
之前写代码一直都有代码格式化的强迫症，基本上每写一段代码不格式化就不舒服
改做前端之后发现有一个Visual Studio Code也不错，虽然比Visual Studio差点，但我要的基本功能都有
而且字体渲染比Visual Studio好看，最重要的是体积小

代码截图：
HBuilder Visual Studio Theme Preview

对比Visual Studio Code（公司没装Visual Studio 2015）：
Visual Studio Code Theme Preview

特别喜欢HBuilder，几乎完美了，用了一周左右只发现有几个小地方有点瑕疵，希望开发人员可以参考一下后续做修正：
第一个是选中注释功能，双斜杠会在该行首位出现，挺影响美观的，如果能在代码前面显示看起来会更舒服些：
comment
如果保持这样去格式化代码会导致中间空了很多

第二个是好像不能选中指定代码块格式化（有时候可能只希望格式化选中的代码）
第三个是编辑器的美观不足atom、visual studio，感觉字体渲染没那么好看然后夜间模式主题的话，只会改变编辑器和侧边窗口，不会改菜单栏，只会改配色方案，不会改变全局主题（这个如果要改的话感觉要重做，所以可以忽略）
第四个是偶尔会出现卡死、崩溃的情况

不过已经很好了我已经离不开它了希望HBuilder越做越好！

> 主题可能还有不完善的地方，大家可以一起完善然后再分享出来
使用方法：菜单栏-视觉主题设置-高级设置-导入-选择下载的主题文件

由于附件限定格式不能上传，请点击[此处](http://res.dskui.com/files/Visual Studio Code.tmTheme)下载主题
或直接访问下载地址：http://res.dskui.com/files/Visual Studio Code.tmTheme

收起阅读 »

测试登入进入主页无限刷求救大神

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
    .imageView0{width: 100%;height: 140px;}  
    .imageView6{width: 100%;clear: both;margin-top: 4px;}  
    .imageView1{width: 32%;height: 100%;background-color: #0099FF;float: left;text-align: center;display: block;}  
    .imageView1 img{width: 100%;}  
    .imageView2{width: 32%;height: 100%;float: left;margin-left: 2%;text-align: center;display: block;}  
    .imageView2 img{width: 30%;}  
    .imageView3{width: 32%;height: 100%;background-color:#CC66CC ;float:right;text-align: center;display: block;}  
    .imageView3 img{width: 100%;}  
    .imageView4{width: 49%;height: 70px;background-color:#FF9999 ;float: left;display: block;}  
    .imageView4 img{width: 30%;margin-top: 14%;margin: auto;}  
    .imageView5{width: 49%;height: 70px;background-color:#FF6633 ;float: right;display: block;}  
    .imageView5 img{width: 30%;margin-top: 14%;margin: auto;}  
    </style>  
</head>

<div class="mui-slider"style="margin-top: 44px;">
<div class="mui-slider-group mui-slider-loop">

<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u23.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>

<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:3100
});
</script>

<div style="height: 4px;"></div>

<div class="imageView2">
<div style="width: 100%;height: 48%;background-color:#FFCC33 ;overflow: auto;">
<img style="float: left;margin-top: 20%;" src="../images/images/主页/u51.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">VIP业务</p>
</div>
<div style="width: 100%;height: 48%;background-color:#FFCCFF ;margin-top: 4%;overflow: auto;">
<img style="float: left;margin-top: 30%;" src="../images/images/主页/u55.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">企业团购</p>
</div>
</div>

<div class="imageView4">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u59.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%;">信用卡业务</p>
</div>
</div>

<div class="imageView5">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u63.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%">工资卡业务</p>
</div>
</div>
</div>

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 id="title" class="mui-title">我的主页</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">我的主页</span>  
        </a>  
        <a class="mui-tab-item" href="weChat.html">  
            <span class="mui-icon mui-icon-weixin"><span class="mui-badge">9</span></span>  
            <span class="mui-tab-label">绑定微信</span>  
        </a>  
        <a class="mui-tab-item" href="news.html">  
            <span class="mui-icon mui-icon-chat"></span>  
            <span class="mui-tab-label">消息提醒</span>  
        </a>  
        <a class="mui-tab-item" href="mePage.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">我的账户</span>  
        </a>  
    </nav>  
    <script src="../js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
         //mui初始化  
        mui.init();  
        var subpages = ['homepage.html', 'weChat.html', 'news.html', 'mePage.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  

         //创建子页面，首个选项卡页面显示，其它均隐藏；  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 4; i++) {  
                var temp = {};  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                self.append(sub);  
                if (i > 0) {  
                    sub.hide();  
                }else{  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow,temp);  
                }  
                self.append(sub);  
            }  
        });  
         //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  
            //更换标题  
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            //显示目标选项卡  
            //若为iOS平台或非首次显示，则直接显示  
            if(mui.os.ios||aniShow[targetTab]){  
                plus.webview.show(targetTab);  
            }else{  
                //否则，使用fade-in动画，且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow,temp);  
                plus.webview.show(targetTab,"fade-in",300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
         //自定义事件，模拟点击“首页选项卡”  
        document.addEventListener('gohome', function() {  
            var defaultTab = document.getElementById("defaultTab");  
            //模拟首页点击  
            mui.trigger(defaultTab, 'tap');  
            //切换选项卡高亮  
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
            if (defaultTab !== current) {  
                current.classList.remove('mui-active');  
                defaultTab.classList.add('mui-active');  
            }  
        });  
    </script>

</body>
</html>

继续阅读 »

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
    .imageView0{width: 100%;height: 140px;}  
    .imageView6{width: 100%;clear: both;margin-top: 4px;}  
    .imageView1{width: 32%;height: 100%;background-color: #0099FF;float: left;text-align: center;display: block;}  
    .imageView1 img{width: 100%;}  
    .imageView2{width: 32%;height: 100%;float: left;margin-left: 2%;text-align: center;display: block;}  
    .imageView2 img{width: 30%;}  
    .imageView3{width: 32%;height: 100%;background-color:#CC66CC ;float:right;text-align: center;display: block;}  
    .imageView3 img{width: 100%;}  
    .imageView4{width: 49%;height: 70px;background-color:#FF9999 ;float: left;display: block;}  
    .imageView4 img{width: 30%;margin-top: 14%;margin: auto;}  
    .imageView5{width: 49%;height: 70px;background-color:#FF6633 ;float: right;display: block;}  
    .imageView5 img{width: 30%;margin-top: 14%;margin: auto;}  
    </style>  
</head>

<div class="mui-slider"style="margin-top: 44px;">
<div class="mui-slider-group mui-slider-loop">

<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u23.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>

<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:3100
});
</script>

<div style="height: 4px;"></div>

<div class="imageView2">
<div style="width: 100%;height: 48%;background-color:#FFCC33 ;overflow: auto;">
<img style="float: left;margin-top: 20%;" src="../images/images/主页/u51.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">VIP业务</p>
</div>
<div style="width: 100%;height: 48%;background-color:#FFCCFF ;margin-top: 4%;overflow: auto;">
<img style="float: left;margin-top: 30%;" src="../images/images/主页/u55.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">企业团购</p>
</div>
</div>

<div class="imageView4">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u59.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%;">信用卡业务</p>
</div>
</div>

<div class="imageView5">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u63.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%">工资卡业务</p>
</div>
</div>
</div>

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 id="title" class="mui-title">我的主页</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">我的主页</span>  
        </a>  
        <a class="mui-tab-item" href="weChat.html">  
            <span class="mui-icon mui-icon-weixin"><span class="mui-badge">9</span></span>  
            <span class="mui-tab-label">绑定微信</span>  
        </a>  
        <a class="mui-tab-item" href="news.html">  
            <span class="mui-icon mui-icon-chat"></span>  
            <span class="mui-tab-label">消息提醒</span>  
        </a>  
        <a class="mui-tab-item" href="mePage.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">我的账户</span>  
        </a>  
    </nav>  
    <script src="../js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
         //mui初始化  
        mui.init();  
        var subpages = ['homepage.html', 'weChat.html', 'news.html', 'mePage.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  

         //创建子页面，首个选项卡页面显示，其它均隐藏；  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 4; i++) {  
                var temp = {};  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                self.append(sub);  
                if (i > 0) {  
                    sub.hide();  
                }else{  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow,temp);  
                }  
                self.append(sub);  
            }  
        });  
         //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  
            //更换标题  
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            //显示目标选项卡  
            //若为iOS平台或非首次显示，则直接显示  
            if(mui.os.ios||aniShow[targetTab]){  
                plus.webview.show(targetTab);  
            }else{  
                //否则，使用fade-in动画，且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow,temp);  
                plus.webview.show(targetTab,"fade-in",300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
         //自定义事件，模拟点击“首页选项卡”  
        document.addEventListener('gohome', function() {  
            var defaultTab = document.getElementById("defaultTab");  
            //模拟首页点击  
            mui.trigger(defaultTab, 'tap');  
            //切换选项卡高亮  
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
            if (defaultTab !== current) {  
                current.classList.remove('mui-active');  
                defaultTab.classList.add('mui-active');  
            }  
        });  
    </script>

</body>
</html>

收起阅读 »

Ping++支付的实现

由于项目需要，本人用H5实现了Android版，并成功发布。其中支付是使用的Ping++。
Hbuilder限制支付只能使用支付宝和微信。
但是实际上Ping++支付是直接调用支付宝或微信的，Ping++的作用就是统一了支付请求和回调。所以我们在获得支付申请数据之后，拆分出第三方支付所需要的数据，然后调用第三方支付就可以了。
具体步骤和代码：

从后台获取支付请求数据，数据示例:


payid = 'alipay'  
var payReq = {  
  "body": "***订单",  
  "subject": "xxxxxxxxx",  
  "object": "charge",  
  "client_ip": "175.13.62.206",  
  "order_no": "xxxxxxxxx",  
  "currency": "cny",  
  "amount": 100,  
  "id": "ch_ xxxxxxxxx",  
  "failure_code": null,  
  "paid": false,  
  "refunded": false,  
  "created": 1467358041,  
  "description": null,  
  "amount_refunded": 0,  
  "livemode": false,  
  "amount_settle": 100,  
  "metadata": {},  
  "time_paid": null,  
  "app": "app_ xxxxxxxxx",  
  "extra": {},  
  "credential": {  
    "alipay": {  
      "orderInfo": "_input_charset=\"utf-8\"&body=\"***订单\"&it_b_pay=\"2016-07-02 15:27:21\"&notify_url=\"https%3A%2F%2Fapi.pingxx.com%2Fnotify%2Fcharges%2Fch_ xxxxxxxxx\"&out_trade_no=\"xxxxxxxxx\"&partner=\"xxxxxxxxx\"&payment_type=\"1\"&seller_id=\"xxxxxxxxx\"&service=\"mobile.securitypay.pay\"&subject=\"*****\"&total_fee=\"1.00\"&sign=\"SEM0T1MwMWV6SFdUTFN5WDlPOWVqTEtH\"&sign_type=\"RSA\""  
    },  
    "object": "credential"  
  },  
  "time_settle": null,  
  "time_expire": 1467444441,  
  "failure_msg": null,  
  "refunds": {  
    "data": [],  
    "has_more": false,  
    "object": "list",  
    "url": "/v1/charges/ch_xxxx/refunds"  
  },  
  "transaction_no": null,  
  "channel": "alipay"  
}  
};

payid = 'wxpay';
var payReq = {
"body": "*",
"subject": "****",
"object": "charge",
"client_ip": "175.13.62.206",
"order_no": "xxxxxxxxx",
"currency": "cny",
"amount": 100,
"id": "ch_xx",
"failure_code": null,
"paid": false,
"refunded": false,
"created": 1467358181,
"description": null,
"amount_refunded": 0,
"livemode": false,
"amount_settle": 100,
"metadata": {},
"time_paid": null,
"app": "app_xxx",
"extra": {},
"credential": {
"wx": {
"sign": "xxxxx",
"appId": "xxxxx",
"timeStamp": "1467358181",
"packageValue": "Sign=WXPay",
"partnerId": "123456",
"nonceStr": "11111111111111",
"prepayId": "xxxxxxxxxxxx"
},
"object": "credential"
},
"time_settle": null,
"time_expire": 1467365381,
"failure_msg": null,
"refunds": {
"data": [],
"has_more": false,
"object": "list",
"url": "/v1/charges/ch_xxxxx/refunds"
},
"transaction_no": null,
"channel": "wx"
}
}

2. 转换请求数据  
//-----支付宝支付  
payid = 'alipay';
```javascript  
var order = payReq.credential['alipay'].orderInfo;

//end-----支付宝支付

//-----微信支付
payid = 'wxpay';

var wxData = payReq.credential['wx'];  
var wxPay = {appid:wxData.appId,  
        noncestr:wxData.nonceStr,  
        'package':wxData.packageValue,  
        partnerid:wxData.partnerId,  
        prepayid:wxData.prepayId,  
        timestamp:wxData.timeStamp,  
        sign:wxData.sign};  
var order = JSON.stringify(wxPay);

//end-----微信支付

调用支付
callPay(payid, order)

//调用支付  
function callPay(payid, order) {  
    console.log("----- order -----" + JSON.stringify(order));  
    plus.payment.request(pays[payid], order, function(result){  
            console.log("----- 支付成功 -----");  
            mui.toast('支付成功');  
                        //支付成功处理  
            //paySuccess (result);  
                },function(e){  
                    plus.nativeUI.closeWaiting();  
                    console.log("----- 支付失败 -----");  
                    console.log("["+e.code+"]："+e.message);  
                    plus.nativeUI.alert("支付失败",null,"错误码："+e.code);  
            });  
}

其他代码请参照H5+示例工程的plus/payment.html 。

继续阅读 »

由于项目需要，本人用H5实现了Android版，并成功发布。其中支付是使用的Ping++。
Hbuilder限制支付只能使用支付宝和微信。
但是实际上Ping++支付是直接调用支付宝或微信的，Ping++的作用就是统一了支付请求和回调。所以我们在获得支付申请数据之后，拆分出第三方支付所需要的数据，然后调用第三方支付就可以了。
具体步骤和代码：

从后台获取支付请求数据，数据示例:


payid = 'alipay'  
var payReq = {  
  "body": "***订单",  
  "subject": "xxxxxxxxx",  
  "object": "charge",  
  "client_ip": "175.13.62.206",  
  "order_no": "xxxxxxxxx",  
  "currency": "cny",  
  "amount": 100,  
  "id": "ch_ xxxxxxxxx",  
  "failure_code": null,  
  "paid": false,  
  "refunded": false,  
  "created": 1467358041,  
  "description": null,  
  "amount_refunded": 0,  
  "livemode": false,  
  "amount_settle": 100,  
  "metadata": {},  
  "time_paid": null,  
  "app": "app_ xxxxxxxxx",  
  "extra": {},  
  "credential": {  
    "alipay": {  
      "orderInfo": "_input_charset=\"utf-8\"&body=\"***订单\"&it_b_pay=\"2016-07-02 15:27:21\"&notify_url=\"https%3A%2F%2Fapi.pingxx.com%2Fnotify%2Fcharges%2Fch_ xxxxxxxxx\"&out_trade_no=\"xxxxxxxxx\"&partner=\"xxxxxxxxx\"&payment_type=\"1\"&seller_id=\"xxxxxxxxx\"&service=\"mobile.securitypay.pay\"&subject=\"*****\"&total_fee=\"1.00\"&sign=\"SEM0T1MwMWV6SFdUTFN5WDlPOWVqTEtH\"&sign_type=\"RSA\""  
    },  
    "object": "credential"  
  },  
  "time_settle": null,  
  "time_expire": 1467444441,  
  "failure_msg": null,  
  "refunds": {  
    "data": [],  
    "has_more": false,  
    "object": "list",  
    "url": "/v1/charges/ch_xxxx/refunds"  
  },  
  "transaction_no": null,  
  "channel": "alipay"  
}  
};

payid = 'wxpay';
var payReq = {
"body": "*",
"subject": "****",
"object": "charge",
"client_ip": "175.13.62.206",
"order_no": "xxxxxxxxx",
"currency": "cny",
"amount": 100,
"id": "ch_xx",
"failure_code": null,
"paid": false,
"refunded": false,
"created": 1467358181,
"description": null,
"amount_refunded": 0,
"livemode": false,
"amount_settle": 100,
"metadata": {},
"time_paid": null,
"app": "app_xxx",
"extra": {},
"credential": {
"wx": {
"sign": "xxxxx",
"appId": "xxxxx",
"timeStamp": "1467358181",
"packageValue": "Sign=WXPay",
"partnerId": "123456",
"nonceStr": "11111111111111",
"prepayId": "xxxxxxxxxxxx"
},
"object": "credential"
},
"time_settle": null,
"time_expire": 1467365381,
"failure_msg": null,
"refunds": {
"data": [],
"has_more": false,
"object": "list",
"url": "/v1/charges/ch_xxxxx/refunds"
},
"transaction_no": null,
"channel": "wx"
}
}

2. 转换请求数据  
//-----支付宝支付  
payid = 'alipay';
```javascript  
var order = payReq.credential['alipay'].orderInfo;

//end-----支付宝支付

//-----微信支付
payid = 'wxpay';

var wxData = payReq.credential['wx'];  
var wxPay = {appid:wxData.appId,  
        noncestr:wxData.nonceStr,  
        'package':wxData.packageValue,  
        partnerid:wxData.partnerId,  
        prepayid:wxData.prepayId,  
        timestamp:wxData.timeStamp,  
        sign:wxData.sign};  
var order = JSON.stringify(wxPay);

//end-----微信支付

调用支付
callPay(payid, order)

//调用支付  
function callPay(payid, order) {  
    console.log("----- order -----" + JSON.stringify(order));  
    plus.payment.request(pays[payid], order, function(result){  
            console.log("----- 支付成功 -----");  
            mui.toast('支付成功');  
                        //支付成功处理  
            //paySuccess (result);  
                },function(e){  
                    plus.nativeUI.closeWaiting();  
                    console.log("----- 支付失败 -----");  
                    console.log("["+e.code+"]："+e.message);  
                    plus.nativeUI.alert("支付失败",null,"错误码："+e.code);  
            });  
}

其他代码请参照H5+示例工程的plus/payment.html 。

收起阅读 »

手机短信验证希望可以帮到一下朋友

短信验证码


//手机号验证  
function PhoneMobile() {  
    var tel = document.all("tel").value;  
    if (tel.match(/^(13[0-9]|14(5|7)|15(0|1|2|3|5|6|7|8|9)|18[0-9])\d{8}$/) != null) {  
        //verificationMobile();  
    } else {  
        $("#tel").val("输入的手机号不正确");  
        $("#tel").css("color", "red")  
    }  
}  
//验证码  
function verificationMobile() {  
    var btn = document.getElementById('btn');  
    btn.onclick = function() {  
        var sleep = 60,  
            interval = null;  
        PhoneMobile();  
        if ($("#tel").val() != "输入的手机号不正确") {  
            CallAction();  
            if (!interval) {  
                this.disabled = "disabled";  
                this.style.cursor = "wait";  
                this.value = "重新发送 (" + sleep-- + ")";  
                interval = setInterval(function() {  
                    if (sleep == 0) {  
                        if (!!interval) {  
                            clearInterval(interval);  
                            interval = null;  
                            sleep = 60;  
                            btn.style.cursor = "pointer";  
                            btn.removeAttribute('disabled');  
                            btn.value = "获取验证码";  
                            btn.style.backgroundColor = '';  
                        }  
                        return false;  
                    }  
                    btn.value = "重新发送 (" + sleep-- + ")";  
                }, 1000);  
            }  
        }  
    }  
}  
//验证码请求  
function CallAction() {  
    var data = 你的数据请求连接;  
    $.ajax({  
        async: true,  
        url: '网站连接',  
        data: data,  
        dataType: 'jsonp',  
        type: 'get',  
        callback: successCallback,  
        timeout: 10000,  
        complete: function(XMLHttpRequest, status) {  
            if (status == 'timeout') {  
                //超时,status还有success,error等值的情况   
                alert("方法查询异常！");  
            }  
        }  
    });  
}

继续阅读 »


//手机号验证  
function PhoneMobile() {  
    var tel = document.all("tel").value;  
    if (tel.match(/^(13[0-9]|14(5|7)|15(0|1|2|3|5|6|7|8|9)|18[0-9])\d{8}$/) != null) {  
        //verificationMobile();  
    } else {  
        $("#tel").val("输入的手机号不正确");  
        $("#tel").css("color", "red")  
    }  
}  
//验证码  
function verificationMobile() {  
    var btn = document.getElementById('btn');  
    btn.onclick = function() {  
        var sleep = 60,  
            interval = null;  
        PhoneMobile();  
        if ($("#tel").val() != "输入的手机号不正确") {  
            CallAction();  
            if (!interval) {  
                this.disabled = "disabled";  
                this.style.cursor = "wait";  
                this.value = "重新发送 (" + sleep-- + ")";  
                interval = setInterval(function() {  
                    if (sleep == 0) {  
                        if (!!interval) {  
                            clearInterval(interval);  
                            interval = null;  
                            sleep = 60;  
                            btn.style.cursor = "pointer";  
                            btn.removeAttribute('disabled');  
                            btn.value = "获取验证码";  
                            btn.style.backgroundColor = '';  
                        }  
                        return false;  
                    }  
                    btn.value = "重新发送 (" + sleep-- + ")";  
                }, 1000);  
            }  
        }  
    }  
}  
//验证码请求  
function CallAction() {  
    var data = 你的数据请求连接;  
    $.ajax({  
        async: true,  
        url: '网站连接',  
        data: data,  
        dataType: 'jsonp',  
        type: 'get',  
        callback: successCallback,  
        timeout: 10000,  
        complete: function(XMLHttpRequest, status) {  
            if (status == 'timeout') {  
                //超时,status还有success,error等值的情况   
                alert("方法查询异常！");  
            }  
        }  
    });  
}

收起阅读 »

Dcloud学习资料汇总+视频教程

视频教程 HBuilder mui

1、首先记住以下3个常用网站：
DCloud官网：http://www.dcloud.io/
MUI官网：http://dev.dcloud.net.cn/mui/
专业培训：http://www.dongyixueyuan.com/

2、学习顺序
（1）MUI、5+、Native.js等相关知识参照DCloud官方文档
（2）5+API，即HTML5+联盟中的HTML5+规范
（3）MUI
直接报名可以跳过自学部分，让老师来教。

3、资源汇总
MUI-FAQ：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/122
APP优化技巧：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/25
视频教程：https://ke.qq.com/course/71784#term_id=100131434

4、官方相关视频
如何让Android手机的HTML5 App性能体验接近原生王安（DCloud CEO
http://v.youku.com/v_show/id_XNzYyNzI3NDQw.html

mui—让HTML5达到原生体验的高性能框架崔红保（Dcloud 前端工程
http://v.youku.com/v_show/id_XNzYyOTEyMjcy.html?from=s1.8-1-1.2

Native.js，让js像原生一样强大+++江树源（数字天堂CTO）
http://v.youku.com/v_show/id_XNzYzNTcwNDI4.html

5、Dcloud指定培训机构：东翌学院-小班直播教学+课程源码+视频回放+老师辅导+vip学员群
立即试学>>>跨平台App开发直播VIP班

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构，跨平台APP开发整体课程在线直播+课程源码+全套视频，最新最全的APP开发，HB和MUI的全套视频，零基础都可以学习，更有高级进修课程，30天最快速的开发跨平台APP！咨询报名QQ：410355878 网址：http://www.dongyixueyuan.com/ 欢迎有意向学习的朋友加好友咨询！谢谢Dcloud提供这么好的平台！

继续阅读 »

muii alert 框当页面比较长的时候点击 alert 仍然在最上面浮动加一行代码搞定

.mui-popup{
position:fixed;
}

IOS 平台离线打包定位插件配置

定位 SDK iOS

1 在工程中添加如下库
文件在SDK/Libs/目录下
注: Linker Flags、framework添加方法参考该文档
liblibGeolocation.a
libBaiduKeyVerify.a
BaiduMapAPI_Utils.framework
BaiduMapAPI_Base.framework
BaiduMapAPI_Search.framework
BaiduMapAPI_Location.framework

2 在工程中添加如下系统Framework
QuartzCore.framework
CoreGraphics.framework
CoreTelephony.framework
SystemConfiguration.framework
Security.framework
MapKit.framework
OpenGLES.framework
CoreLocation.framework
libstdc++.6.0.9.tbd
libsqlite3.0.tbd

3 在info.plist文件中添加如下配置
NSLocationWhenInUseUsageDescription:[类型String]
NSLocationWhenInUseDescription:[类型String]
注意：这两个Key对应的Value为空