混合開發與第三方插件

1.掌握manifest.json使用

一個項目的核心配置，比如
原生app權限（核心功能模塊，如果不選，功能無法實現），
項目啓動圖片，項目默認圖標
- 說明：替換元素以後，必須保存mainfest文件，之後必須打包成apk或ipa，安裝到手機纔可以

2.如何往項目裏面添加支持原生的第三方庫

在manifest進行修改，修改sdk(支持第三方的庫)

3.實現支付寶功能

支付功能都被dcloud託管到payment模塊裏面
- getChanels() //可以獲取當前手機裏面全部付款渠道
- 支付寶，微信
- request（支付渠道，支付訂單信息【ajax接口拿到信息，fn】）進行支付—-這是支付的核心方法

支付寶舉例說明付款方式：

淘寶—>跳轉到支付寶—->首頁登錄—->訂單處理—->輸入密碼進行付款

1.早期：前後端還沒有完全分離的時候是用jsp完成
- 生成訂單—>提交給支付寶（提示你登錄）—->查詢訂單 —>輸入密碼進行付款

2.（一般用在pc端）前端付款的時候：傳入你的用戶名和付款金額和密碼
- 後端
- 1.接收到前端請求
- 2.後端通過httpclient【是不同的服務端之間通信的工具】訪問支付寶
- 3.申請權限—核心是拿到支付寶簽證（有了簽證纔可以進行付款）
- 支付寶平臺

3.（一般用在移動端）後端提供的接口 <—-我們要使用的

前端只需要輸入付款的金額就可以了，後端直接將需要的訂單信息和簽證全部返回回來，就可以在頁面中調用本地原生接口

dcloud提供的接口：
http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=

<script type="text/javascript">
    var ALI_SERVICE = "http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=0.01";
    document.getElementById('pay').addEventListener('touchend',function(){
        //0.獲取支付模塊
        var pay=plus.payment;
        //1.獲取到手機裏面全部支付渠道
        pay.getChannels(function(payWays){
            alert(JSON.stringify(payWays));
            for(var i=0;i<payWays.length;i++){
                if(payWays[i].id == 'alipay'){
                    plus.nativeUI.toast('準備調用阿里支付');
                    var currentPayWays=payWays[i];
                    getOrders( ALI_SERVICE,function(order){
                        pay.request(currentPayWays,order,function(){
                            alert('付款成功，謝謝土豪！~~');
                        })
                    })
                }
            }
        })
//2.request（支付渠道，支付訂單信息【ajax接口拿到信息，fn】） 進行支付
    })
    //訂單信息
    var getOrders = function(url,fn){
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.status =200 && xhr.readyState ==4){
                fn(xhr.responseText);
            }
        }
    }
</script>

如果是一個列表付款總額呢~so:

    <style type="text/css">
        button{
            width: 200px;
            height: 40px;
            background: orange;
            border-radius: 6px;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            color: #fff;
        }
        #list>div{
            width:100%;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: hidden;
            border-bottom: 1px solid #acacac;
        }
        .name{
            font-size: 24px;
        }
        .price{
            color:red;font-size: 32px;
        }
    </style>
    <script type="text/javascript">

        document.addEventListener('plusready', function(){
            //console.log("所有plus api都應該在此事件發生後調用，否則會出現plus is undefined。"

        });

    </script>
</head>
<body>
    <div id="list">
        <div>
            <div class="name">
                口罩防霾口罩
            </div>
            <div class="price">
                0.01
            </div>
        </div>
        <div>
            <div class="name">
                圍巾
            </div>
            <div class="price">
                0.01
            </div>
        </div>
        <div>
            <div class="name">
                領結
            </div>
            <div class="price">
                0.01
            </div>
        </div>
    </div>
    <button id="pay">支付一千萬</button>

</body>
<script type="text/javascript">

    var ALI_SERVICE = "http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=";
    document.getElementById('pay').addEventListener('touchend',function(){
        var price = document.getElementsByClassName('price');
        var total =0.0;
        for(var i=0;i<price.length;i++){
            total+=parseFloat(price[i].innerText);
        }
        alert("付款金額爲："+total);
        //0.獲取支付模塊
        var pay=plus.payment;
        //1.獲取到手機裏面全部支付渠道
        pay.getChannels(function(payWays){
            alert(JSON.stringify(payWays));
            for(var i=0;i<payWays.length;i++){
                if(payWays[i].id == 'alipay'){
                    plus.nativeUI.toast('準備調用阿里支付');
                    var currentPayWays=payWays[i];
                    getOrders( ALI_SERVICE+total,function(order){
                        pay.request(currentPayWays,order,function(){
                            alert('付款成功，謝謝土豪！~~');
                        })
                    })

                }
            }
        })
        //2.request（支付渠道，支付訂單信息【ajax接口拿到信息，fn】） 進行支付
    })
    //訂單信息
    var getOrders = function(url,fn){
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.status =200 && xhr.readyState ==4){
                fn(xhr.responseText);
            }
        }
    }
</script>

4.手機裏面打開百度地圖或者高德地圖原生App

百度地圖祕鑰：

ios : lE1xkhcUtw7*******dWvVCqDr6GoYN

android : qF2y1S3jF63********Au54ID7NMaLG

配置當前manifest裏面權限 appkey
Maps模塊管理地圖控件，用於在web頁面中顯示地圖控件，提供各種接口操作地圖控件，如添加標點、路線等。通過plus.maps可獲取地圖管理對象。
plus.map.api()調用就可以了
- plus.maps.openSysMap( dst, des, src );
- dst: ( Point ) 必選導航目的地座標
  要求使用WGS-84座標系值，即GPS獲取的值。
- des: ( DOMString ) 必選導航目的地描述
  要求使用WGS-84座標系，即GPS獲取的值。
- src: ( Point ) 必選導航起始地描述

<body>
        <button id="map">打開百度地圖</button>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('map');
        btn.ontouchend=function(){
            // 設置目標位置座標點和起始位置座標點
            var dst =null;
            var src = new plus.maps.Point(116.335,39.966); // 大鐘寺
            //自己的定位
            plus.geolocation.getCurrentPosition(function(loc){
                dst = new plus.maps.Point(loc.coords.longitude,loc.coords.latitude);
                // 調用系統地圖顯示 
                plus.maps.openSysMap( dst, loc.addresses, src );
            })


        }
    </script>

5.掃面二維碼

// 擴展API加載完畢後調用onPlusReady回調函數 
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，現在可以正常調用擴展API
function onPlusReady() {
    var e = document.getElementById("scan");
    e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
    var text = '未知: ';
    switch(type){
        case plus.barcode.QR:
        text = 'QR: ';
        break;
        case plus.barcode.EAN13:
        text = 'EAN13: ';
        break;
        case plus.barcode.EAN8:
        text = 'EAN8: ';
        break;
    }
    alert( text+result );
    alert('開始下載');
    var d=plus.downloader.createDownload(result,{method:'GET'},function(){
        plus.nativeUI.toast('下載成功 請打開')
    });
    d.start();
}
function startRecognize() {
    scan = new plus.barcode.Barcode('bcid');
    scan.onmarked = onmarked; 
}
function startScan() {
    scan.start();
}
function cancelScan() {
    scan.cancel();
}
function setFlash() {
    scan.setFlash();
}

6. 下載

7.傳感器

Accelerometer模塊管理設備加速度傳感器，用於獲取設備加速度信息，包括x（屏幕水平方向）、y（垂直屏幕水平方向）、z（垂直屏幕平面方向）三個方向的加速度信息。通過plus.accelerometer獲取設備加速度傳感器管理對象。

傳感器

能把具有感知能力的硬件設備叫做傳感器

document.addEventListener('plusready',function(){
    //如何獲取手機裏面重力傳感加速器 傳感器（sensor）
    //IOT,BIG,DATA,在線教育，雲
    //能把具有感知能力的硬件設備叫做傳感器
    //getCurrentAcceleration獲取當前加速度信息
    var acc =plus.accelerometer.getCurrentAcceleration(function(s){
        alert(JSON.stringify(s));
        var x = s.xAxis;
        var y = s.yAxis;
        var z = s.zAxis;
        document.getElementsByClassName('x')[0].innerHTML = x;
        document.getElementsByClassName('y')[0].innerHTML = y;
        document.getElementsByClassName('z')[0].innerHTML = z;
    });

},false);

8.css+js風格接近原生的框架

UI框架：
mui,amaze,阿瓦隆，yo,frozen,

9.前端單元測試工具：

mocha,karma,jest
jest:用於做當前開發測試改良了mocha
主要用於敏捷開發的測試

敏捷開發：每個階段中的任務都可以拿來單獨測試
jest是facebook製作的，爲react量身定製的，其他任何內容都可以使用。jest是基於node.js寫的
1. 安裝jest到全局cnpm install jest -g cnpm install jest-cli -g
2. 創建項目jest安裝到局部 cnpm install jest –save-dev
3. 編寫被測試的api

app.js:

var app = function(a,b){
    return a+b;
}
module.exports = app;

test.js:

test('測試方法app',function(){
    //引入需要測試的模塊
    var app = require('./app');

    expect(app(2,11)).toBe(13);   //toBe()斷言 運行成功時候返回的結果
})

修改package.json內容

package.json:

{
  "devDependencies": {
    "jest": "^18.0.0"
  },
  "script":{
    "test":"jest"
  }
}

5. 通過命令進行測試

jest

單元測試

寫的任何的一個方法單元，可以測試任何小的api，或者大的模塊
在app.js寫一個api，test.js通過jest測試

9.搭建cordova(phonegap)混合開發環境

cordova需要虛擬機安卓或者iOS
1. 安裝cordova到全局 cnpm install cordova -g
2. 創建cordova項目 cordova create MyApp
3. 給項目添加平臺支持
- cd MyApp
- cordova platform add browser
4. 運行項目 cordova run ios

基於一個桌面插件來進行開發：
phonegap desktop
創建和部署項目

還可以在手機上面安裝phonegap developer

小例子：
.重力加速其獲取實現簡易搖一搖功能

var btn = document.getElementById('yao');
    btn.addEventListener('touchend',function(){
        var w = plus.accelerometer.watchAcceleration(function(s){

            var x = Math.round(Math.abs(s.xAxis));
            var y = Math.round(Math.abs(s.yAxis));
            var z = Math.round(Math.abs(s.zAxis));
            console.log('x'+x);
            console.log('y'+y);
            console.log('z'+z);
            if(x>1 && y>4 && z>4){
                alert('中獎了');
                //clearWatch(watchID)  關閉監聽設備加速度信息
                plus.accelerometer.clearWatch(w);
                return;
            }
        },function(){},false);
    })

混合開發與第三方插件

1.掌握manifest.json使用

2.如何往項目裏面添加支持原生的第三方庫

3.實現支付寶功能

支付寶舉例說明付款方式：

4.手機裏面打開百度地圖或者高德地圖原生App

5.掃面二維碼

6. 下載

7.傳感器

8.css+js風格接近原生的框架

9.前端單元測試工具：

9.搭建cordova(phonegap)混合開發環境

對比兩個複雜的對象是否完全相等

Homebrew簡介和基本使用

模塊化開發

混合開發與第三方插件

es6----知道()=>麼

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結