混合开发与第三方插件

1.掌握manifest.json使用

一个项目的核心配置,比如
原生app权限(核心功能模块,如果不选,功能无法实现),
项目启动图片,项目默认图标
- 说明:替换元素以后,必须保存mainfest文件,之后必须打包成apk或ipa,安装到手机才可以

2.如何往项目里面添加支持原生的第三方库

在manifest进行修改,修改sdk(支持第三方的库)

3.实现支付宝功能

  1. 支付功能都被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;iif(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;iparseFloat(price[i].innerText);
        }
        alert("付款金额为:"+total);
        //0.获取支付模块
        var pay=plus.payment;
        //1.获取到手机里面全部支付渠道
        pay.getChannels(function(payWays){
            alert(JSON.stringify(payWays));
            for(var i=0;iif(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

  1. 配置当前manifest里面权限 appkey
  2. Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象。
  3. 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. 下载

混合开发与第三方插件_第1张图片

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()断言 运行成功时候返回的结果
})
  1. 修改package.json内容
package.json:

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

混合开发与第三方插件_第2张图片
5. 通过命令进行测试

jest

混合开发与第三方插件_第3张图片
单元测试

写的任何的一个方法单元,可以测试任何小的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);
    })

你可能感兴趣的:(移动端)