Vue + Mui

 

概述

Vue套用Mui的外殼開發app項目，能夠經過Mui的 manifest.json 文件添加權限

 

1.新建Mui項目

首先，新建一個空的Mui項目

 

 

window.location.href = 「app服務器的地址」

 

 

2.在Vue項目中引入Mui的js

 

 

 

 

微信支付

export default {
    paywx(money) {
        // 支付
        var pays = {};
        var w = null;
        var PAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=';
        var id = 'wxpay';

        plus.payment.getChannels(function(channels) {
            for(var i in channels) {

                var channel = channels[i];

                if(channel.id == 'qhpay' || channel.id == 'qihoo') { // 過濾掉不支持的支付通道：暫不支持360相關支付
                    continue;
                }
                pays[channel.id] = channel;

                if(channel.description == '微信') {
                    if(!channel.serviceReady) {
                        var txt = null;
                        switch(channel.id) {
                            case 'alipay':
                                txt = '檢測到系統未安裝「支付寶快捷支付服務」，沒法完成支付操做，是否當即安裝？';
                                break;
                            default:
                                txt = '系統未安裝「' + channel.description + '」服務，沒法完成支付，是否當即安裝？';
                                break;
                        }
                        plus.nativeUI.confirm(txt, function(e) {
                            if(e.index == 0) {
                                channel.installService();
                            }
                        }, channel.description);
                    }

                }

            }
            //                    info.innerText = txt;
        }, function(e) {
//            outLine('獲取支付通道失敗：' + e.message);
        });

        if(w) {
            return;
        } //檢查是否請求訂單中
        if(id === 'appleiap') {
//            outSet('應用內支付');
            clicked('payment_iap.html');
            return;
        }
//        outSet('----- 請求支付 -----');
        var url = PAYSERVER;
        if(id == 'alipay' || id == 'wxpay') {
            url += id;
        } else {
            plus.nativeUI.alert('當前環境不支持此支付通道！', null, '捐贈');
            return;
        }
        var appid = plus.runtime.appid;
        if(navigator.userAgent.indexOf('StreamApp') >= 0) {
            appid = 'Stream';
        }
        url += '&appid=' + appid + '&total=';

        w = plus.nativeUI.showWaiting();
        // 請求支付訂單
        var amount = money;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            switch(xhr.readyState) {
                case 4:
                    w.close();
                    w = null;
                    if(xhr.status == 200) {
//                        outLine('----- 請求訂單成功 -----');
//                        outLine(xhr.responseText);
                        var order = xhr.responseText;
                        plus.payment.request(pays[id], order, function(result) {
//                            outLine('----- 支付成功 -----');
//                            outLine(JSON.stringify(result));
                            plus.nativeUI.alert('支付成功：感謝你的支持，咱們會繼續努力完善產品。', function() {
                                back();
                            }, '捐贈');
                        }, function(e) {
//                            outLine('----- 支付失敗 -----');
//                            outLine('[' + e.code + ']：' + e.message);
                            plus.nativeUI.alert('更多錯誤信息請參考支付(Payment)規範文檔：http://www.html5plus.org/#specification#/specification/Payment.html', null, '支付失敗：' + e.code);
                        });
                    } else {
//                        outLine('----- 請求訂單失敗 -----');
//                        outLine(xhr.status);
                        plus.nativeUI.alert('獲取訂單信息失敗！', null, '捐贈');
                    }
                    break;
                default:
                    break;
            }
        }
        xhr.open('GET', url + amount);
//        outLine('請求支付訂單：' + url + amount);
        xhr.send();

    }
}

 

 分享微信好友，朋友圈

export default {

    // 分享連接
    shareHref(adtitle,adcontent,path,imgUrl) {

        //mui.toast("android");
        //分享操做 
        var shares = {};
        mui.plusReady(function() {
            plus.share.getServices(function(s) {
                if(s && s.length > 0) {
                    for(var i = 0; i < s.length; i++) {
                        var t = s[i];
                        shares[t.id] = t;
                    }
                }
            }, function() {
                console.log("獲取分享服務列表失敗");
            });
        });
        //分享連接點擊事件
        // 分享圖片
        //分享連接點擊事件

        var ids = [{
                id: "weixin",
                ex: "WXSceneSession"
            }, {
                id: "weixin",
                ex: "WXSceneTimeline"
            }],
            bts = [{
                title: "發送給微信好友"
            }, {
                title: "分享到微信朋友圈"
            }];
        plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: bts
        }, function(e) {
            var i = e.index;
            if(i > 0) {
                var s_id = ids[i - 1].id;
                var share = shares[s_id];
                if(share.authenticated) {
                    shareMessage(share, ids[i - 1].ex);

                } else {
                    share.authorize(function() {
                        shareMessage(share, ids[i - 1].ex);

                    }, function(e) {
                        console.log("認證受權失敗：" + e.code + " - " + e.message);

                    });
                }
            }
        });

        function shareMessage(share, ex) {
            var msg = {
                type: 'web',
                //content:'請選擇要分享的圖片',
                extra: {
                    scene: ex
                }
            };
            var img = imgUrl;
            //            mui.toast("img！-->" + img);
            // mui.toast("texx！-->"+texx);
            var urlx = 'http://www.baidu.com/';
            msg.href = path;
            msg.title = adtitle;
            msg.content = adcontent;
            //msg.pictures = [img];
            /*if(~share.id.indexOf('weibo')) {
                msg.content += $scope.indexC;
            }*/
            msg.thumbs = [img];
            share.send(msg, function() {
                console.log("分享到\"" + share.description + "\"成功！ ");
            }, function(e) {
                console.log("分享到\"" + share.description + "\"失敗: " + e.code + " - " + e.message);
            });
        }

    }

}

 

 

微信登陸認證

export default {
    wxlogin() {
        var auths = {};
        var id = 'weixin';
        // 獲取登陸認證通道
        plus.oauth.getServices(function(services) {
            var content = document.getElementById('dcontent');
            var info = document.getElementById("info");
            var txt = "登陸認證通道信息：";
            for(var i in services) {
                var service = services[i];
                console.log(service.id + ": " + service.authResult + ", " + service.userInfo);
                auths[service.id] = service;
            }

            var auth = auths[id];
            if(auth) {
                var w = null;
                if(plus.os.name == "Android") {
                    w = plus.nativeUI.showWaiting();
                }
                document.addEventListener("pause", function() {
                    setTimeout(function() {
                        w && w.close();
                        w = null;
                    }, 2000);
                }, false);
                auth.login(function() {
                    w && w.close();
                    w = null;
                    console.log(JSON.stringify(auth.authResult))
                    userinfo(auth);
                }, function(e) {
                    w && w.close();
                    w = null;
                    plus.nativeUI.alert("詳情錯誤信息請參考受權登陸(OAuth)規範文檔：http://www.html5plus.org/#specification#/specification/OAuth.html", null, "登陸失敗[" + e.code + "]：" + e.message);
                });
            } else {
                plus.nativeUI.alert("無效的登陸認證通道！", null, "登陸");
            }

        }, function(e) {

        });
    
        // 獲取用戶信息
        function userinfo(a) {
            a.getUserInfo(function() {
                var nickname = a.userInfo.nickname || a.userInfo.name || a.userInfo.miliaoNick;
                plus.nativeUI.alert("歡迎「" + nickname + "」登陸！");
            }, function(e) {
                plus.nativeUI.alert("獲取用戶信息失敗！", null, "登陸");
            });
        }

    }
}