HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

Audio模块录音格式汇总(aac、mp3)

mp3 audio aac

新版本HBuilderX(0.1.50)中的5+应用已经支持录制aac和mp3格式文件:
目前Audio模板的通用录音格式有aac、mp3、amr。
另外Android支持录制为3gp,iOS支持录制为wav。
微信小程序里支持aac和mp3。
如需要跨端使用,则只能使用acc和mp3。
mp3在Android上的使用需要单独配一个模块,该模块大小为700k:
在manifest.json的plus->distribute->plugins节点中配置:

//...  
"plus": {  
      "distribute": {  
            "plugins": {  
                "audio": {  
                    "mp3": {  
                        "description": "Android平台录音支持MP3格式文件"  
                    }  
                },  
                //...  
            },  
            //...  
      },  
      //...  
}

5+API用法
调用录音时指定格式为mp3,示例:

var r = plus.audio.getRecorder();  
r.record({filename:'_doc/audio/',format:'mp3',}, function(p){  
    console.log('录音完成:'+p);  
}, function(e){  
    console.log('录音失败:'+e.message);  
});

综上推荐使用acc格式,iOS、Android、微信小程序平台都支持,无需额外配置,Android安装包体积更小,录制后的文件体积更小。

继续阅读 »

新版本HBuilderX(0.1.50)中的5+应用已经支持录制aac和mp3格式文件:
目前Audio模板的通用录音格式有aac、mp3、amr。
另外Android支持录制为3gp,iOS支持录制为wav。
微信小程序里支持aac和mp3。
如需要跨端使用,则只能使用acc和mp3。
mp3在Android上的使用需要单独配一个模块,该模块大小为700k:
在manifest.json的plus->distribute->plugins节点中配置:

//...  
"plus": {  
      "distribute": {  
            "plugins": {  
                "audio": {  
                    "mp3": {  
                        "description": "Android平台录音支持MP3格式文件"  
                    }  
                },  
                //...  
            },  
            //...  
      },  
      //...  
}

5+API用法
调用录音时指定格式为mp3,示例:

var r = plus.audio.getRecorder();  
r.record({filename:'_doc/audio/',format:'mp3',}, function(p){  
    console.log('录音完成:'+p);  
}, function(e){  
    console.log('录音失败:'+e.message);  
});

综上推荐使用acc格式,iOS、Android、微信小程序平台都支持,无需额外配置,Android安装包体积更小,录制后的文件体积更小。

收起阅读 »

uni-app在iOS平台上,图片显示空白的临时解决方案

空白 拍照

=============== update @ 20190121============

HBuilderX 1.5 版本已解决该问题,请开发者尽快升级版本。

=============== 如下是原文章 ============

HBuilder X ( 0.1.50.20180918-alpha ) 更新后,uni-app引入了一个新bug:

在iOS平台,通过手机拍照或从相册选择图片,在页面上显示空白

下版本uni-app会修复该问题,开发者目前可以通过如下方案临时解决:

修改manifest.json,在app-plus 节点下增加如下配置:

"runmode" : "liberate"

修改后结果如下:

继续阅读 »

=============== update @ 20190121============

HBuilderX 1.5 版本已解决该问题,请开发者尽快升级版本。

=============== 如下是原文章 ============

HBuilder X ( 0.1.50.20180918-alpha ) 更新后,uni-app引入了一个新bug:

在iOS平台,通过手机拍照或从相册选择图片,在页面上显示空白

下版本uni-app会修复该问题,开发者目前可以通过如下方案临时解决:

修改manifest.json,在app-plus 节点下增加如下配置:

"runmode" : "liberate"

修改后结果如下:

收起阅读 »

this.scroll = new BScroll(this.$refs.xxx)报错解决办法

uniapp

近期做一个城市列表的小demo,用到了第三方的插件better-scroll(如何插入请参考:uni-app引用npm第三方库);
费时1天,解决报错问题:
错误问题:
Cannot read property '0' of undefined;at pages/city/city page lifeCycleMethod onReady function
TypeError: Cannot read property '0' of undefined
at new K (http://127.0.0.1:20155/appservice/pages/city/city.js:9:12181)
at a.mounted (http://127.0.0.1:20155/appservice/pages/city/city.js:9:56084)
at Gt (http://127.0.0.1:20155/appservice/common/vendor.js:2:16693)

错误代码:

this.scroll = new BScroll(this.$refs.wrapper)

错误原因:
this.$refs.wrapper 为 {}

解决办法:

            if (JSON.stringify(this.$refs.wrapper)=='{}') {  
                return;  
            }  
            this.scroll = new BScroll(this.$refs.wrapper)
继续阅读 »

近期做一个城市列表的小demo,用到了第三方的插件better-scroll(如何插入请参考:uni-app引用npm第三方库);
费时1天,解决报错问题:
错误问题:
Cannot read property '0' of undefined;at pages/city/city page lifeCycleMethod onReady function
TypeError: Cannot read property '0' of undefined
at new K (http://127.0.0.1:20155/appservice/pages/city/city.js:9:12181)
at a.mounted (http://127.0.0.1:20155/appservice/pages/city/city.js:9:56084)
at Gt (http://127.0.0.1:20155/appservice/common/vendor.js:2:16693)

错误代码:

this.scroll = new BScroll(this.$refs.wrapper)

错误原因:
this.$refs.wrapper 为 {}

解决办法:

            if (JSON.stringify(this.$refs.wrapper)=='{}') {  
                return;  
            }  
            this.scroll = new BScroll(this.$refs.wrapper)
收起阅读 »

【分享】解决Uni-app 关闭页面时Data数据不重置的Bug

// 解决页面关闭时组件数据不销毁的问题  
Vue.mixin({  
    onLoad() {  
        if (this.$initData$) {  
            Object.assign(this, JSON.parse(this.$initData$))  
        } else {  
            this.$initData$ = JSON.stringify(this.$data)  
        }  
    }  
})

在mani.js 最下面加入以上代码即可

出处

继续阅读 »
// 解决页面关闭时组件数据不销毁的问题  
Vue.mixin({  
    onLoad() {  
        if (this.$initData$) {  
            Object.assign(this, JSON.parse(this.$initData$))  
        } else {  
            this.$initData$ = JSON.stringify(this.$data)  
        }  
    }  
})

在mani.js 最下面加入以上代码即可

出处

收起阅读 »

PHP开发之递归算法的三种实现方法

  递归算法对于任何一个编程人员来说,应该都不陌生。因为递归这个概念,无论是在PHP语言还是Java等其他编程语言中,都是大多数算法的灵魂。对于PHP新手来说,递归算法的实现原理可能不容易理解。但是只要你了解掌握了这个算法原理,就可以灵活运用递归算法实现编程中的多种功能比如实现无限分类等。递归也是入门者最需要掌握的一个基础算法技巧。下面就通过具体代码示例为大家介绍PHP递归算法也是PHP递归排序的三种实现方法。

方法一:静态变量

<?php
function call(){
static $i=1;
echo $i.'<br>';
$i++;
if ($i<=10){
call();
}
}
call();

这种方法我们主要利用static定义静态变量来实现递归排序。如上我们定义了一个call方法和静态变量$i,如果我们不给$i变量添加判断,而是直接运行,显然就会出现死循环。

方法二:全局变量

$i=1;
function call(){
global $i;
echo $i;
$i++;
if($i<=10){
call();
}
}
call();

此种方法主要利用global定义全局变量来实现PHP递归排序。如上我们先定义了一个$i变量,再创建一个call方法。

方法三:引用传参

function call(&$i=1){
echo $i.'<br>';
$i++;
if($i<=10){
call($i);
}
}
call();

  大家在使用这个方法时,可以简单了解下PHP中引用传递的概念:可以将一个变量通过引用传递给函数,这样该函数就可以修改其参数的值,利用引用传参来实现PHP递归排序是最基础简单的一种算法了(注:在调用自身方法时,一定要将参数传递进去,否则就会报错。)。

  本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处!

继续阅读 »

  递归算法对于任何一个编程人员来说,应该都不陌生。因为递归这个概念,无论是在PHP语言还是Java等其他编程语言中,都是大多数算法的灵魂。对于PHP新手来说,递归算法的实现原理可能不容易理解。但是只要你了解掌握了这个算法原理,就可以灵活运用递归算法实现编程中的多种功能比如实现无限分类等。递归也是入门者最需要掌握的一个基础算法技巧。下面就通过具体代码示例为大家介绍PHP递归算法也是PHP递归排序的三种实现方法。

方法一:静态变量

<?php
function call(){
static $i=1;
echo $i.'<br>';
$i++;
if ($i<=10){
call();
}
}
call();

这种方法我们主要利用static定义静态变量来实现递归排序。如上我们定义了一个call方法和静态变量$i,如果我们不给$i变量添加判断,而是直接运行,显然就会出现死循环。

方法二:全局变量

$i=1;
function call(){
global $i;
echo $i;
$i++;
if($i<=10){
call();
}
}
call();

此种方法主要利用global定义全局变量来实现PHP递归排序。如上我们先定义了一个$i变量,再创建一个call方法。

方法三:引用传参

function call(&$i=1){
echo $i.'<br>';
$i++;
if($i<=10){
call($i);
}
}
call();

  大家在使用这个方法时,可以简单了解下PHP中引用传递的概念:可以将一个变量通过引用传递给函数,这样该函数就可以修改其参数的值,利用引用传参来实现PHP递归排序是最基础简单的一种算法了(注:在调用自身方法时,一定要将参数传递进去,否则就会报错。)。

  本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处!

收起阅读 »

力谱云倾力开发B2B2C商城,深挖APP无限吸金盈利模式

移动APP

力谱云倾力开发B2B2C商城,深挖APP无限吸金盈利模式
随着移动技术的成熟,企业移动化转型效率在不断攀升,同时其开发成本也在不断降低。敏锐的企业家们早已发现,依靠淘宝、京东的时代已经远去,B2B2C平台受到多方看好。为此,深耕移动*APP开发> 领域的力谱宿云企业,推出了为企业提供移动解决方案的业务开发平台——力谱云> ```javascript


企业为何争先打造B2B2C平台?  
​首先,在B2C与B2B相继盆满钵盈之后,集此两者优点于一身,B2B2C平台有应运而生。企业不再单单满足于开发为他人做嫁衣的店铺型App平台,除了做独立网店之外,无疑走平台化布局,能让企业站在行业的高度,打通上下游资源,利用先发优势,引领行业发展。此外,更有利好政策倾斜,通过垂直领域的丰富资源,吸引大量原始用户,根据地缘优势与线下门店的结合,可以走出一条引爆资金流的企业升级路。  
力谱云深度打磨B2B2C平台,支持N+吸金盈利模式  
> 力谱云作为一家为企业提供移动解决方案的App业务开发平台,在经历过B2C、B2B等平台的商业实战后,力谱云倾力开发打造了一款支持“招商、联营以及多门店O2O”等多业务模式的B2B2C多商户入驻平台。企业只需通过4大核心功能:电商平台、营销推广、客户运营以及数据分析,即可快速、低成本搭建B2B2C平台。  
通过B2B2C平台的搭建,企业可抽取商户入驻服务年费;并通过企业的增值服务获得可靠收益;并可开设自营商铺,创增营业实收;另外,可通过商品销售佣金制度的制定,进行抽成盈利;更可利用力谱云可无限扩展平台功能的特性,无限延伸平台价值,增加创收。在这一系列的App平台基础上,再搭配企业别具特色的分销业务体系,盈利吸金模式更可N+叠加。  
也正是由于如此,目前B2B2C平台成为了资本届竞相追捧的热宠儿。  
力谱云搭建云医护管家,从创业走向资本宠儿  
日前,一家河南健康管理企业,经由力谱云平台,成功上线了一款提供医护服务的B2B2C平台——“云医护管家”,就此实战案例,笔者和大家一同梳理一番此App平台的开发逻辑。  
首先,通过力谱云平台的“商城、预定、购物车、订单、门店”功能,快速整合一款能方便患者预约付款、医护入驻的B2B2C业务平台,并通过预约服务进行平台抽成。其次,通过多级分销,进行招商入驻,整合地域医护资源,开启平台资金流动。其三,利用代金券、文章等营销工具,打通平台引流、促活、转化、留存运营环节。最后,通过客服功能,提升售前、售后服务,打造优质用户体验。  
据了解,目前,云医护管家作为一家整合医护资源的B2B2C平台,已覆盖河南省超10+城市代理,另有数十家跨省代理商与机构正在磋商洽谈中。创始人也表示,初衷只是借力谱云平台搭建一款集合当地医护资源的平台进行自营,并没有想到会收获那么多机构和同行对此平台项目的高度肯定,也感谢来自力谱云平台腾飞计划的创业扶持与App开发资源倾斜。并表示,在接下来的发展中,走出河南省进行全国性代理业务覆盖,收获第一轮天使资金也将成为可能。  
其实,云医护管家的成功不仅在于其项目运作模式,也基于力谱云从研发到运营全程护航的移动解决方案以及对企业平台盈利能力的资源倾斜。  
力谱云除了研发,更关注平台的盈利性  
作为技术研发出身的**力谱云***> *平台,基于其创新云计算模式,可为企业移动转型压缩App成本至传统市场的1%,开发周期缩短至1周。在颠覆性的高效、低成本研发技术面前,力谱云也更关心企业平台的可持续盈利模式。  
为了增强其营销战略,降低平台运营成本,推出了一系列如拼团、限时抢购、积分、直播等营销工具,帮助企业用户全方位打通引流、促活、转化、留存各个运营环节。搭配强大的数据分析能力,精准跟踪用户、订单等数据,定期汇总分析,帮助制定App平台精准营销战略。并提供平台无限功能拓展的发展空间,每月数十多功能免费迭代更新等后期技术运营支持。让企业平台的每一步营收路,都走得更加平稳。  
目前,力谱云企业为了帮助中小企业用户更快速、成功地打入移动蓝海市场,联合数家创业机构,推出了创业资源丰富倾斜的腾飞计划,意在扶持初创型企业快速布局移动市场,抢先占领市场优势,打造企业升级出口。  
相信在未来,力谱云和中小型企业之间,尤其是初创企业,还将开启更为紧密的商业纽带。
继续阅读 »

力谱云倾力开发B2B2C商城,深挖APP无限吸金盈利模式
随着移动技术的成熟,企业移动化转型效率在不断攀升,同时其开发成本也在不断降低。敏锐的企业家们早已发现,依靠淘宝、京东的时代已经远去,B2B2C平台受到多方看好。为此,深耕移动*APP开发> 领域的力谱宿云企业,推出了为企业提供移动解决方案的业务开发平台——力谱云> ```javascript


企业为何争先打造B2B2C平台?  
​首先,在B2C与B2B相继盆满钵盈之后,集此两者优点于一身,B2B2C平台有应运而生。企业不再单单满足于开发为他人做嫁衣的店铺型App平台,除了做独立网店之外,无疑走平台化布局,能让企业站在行业的高度,打通上下游资源,利用先发优势,引领行业发展。此外,更有利好政策倾斜,通过垂直领域的丰富资源,吸引大量原始用户,根据地缘优势与线下门店的结合,可以走出一条引爆资金流的企业升级路。  
力谱云深度打磨B2B2C平台,支持N+吸金盈利模式  
> 力谱云作为一家为企业提供移动解决方案的App业务开发平台,在经历过B2C、B2B等平台的商业实战后,力谱云倾力开发打造了一款支持“招商、联营以及多门店O2O”等多业务模式的B2B2C多商户入驻平台。企业只需通过4大核心功能:电商平台、营销推广、客户运营以及数据分析,即可快速、低成本搭建B2B2C平台。  
通过B2B2C平台的搭建,企业可抽取商户入驻服务年费;并通过企业的增值服务获得可靠收益;并可开设自营商铺,创增营业实收;另外,可通过商品销售佣金制度的制定,进行抽成盈利;更可利用力谱云可无限扩展平台功能的特性,无限延伸平台价值,增加创收。在这一系列的App平台基础上,再搭配企业别具特色的分销业务体系,盈利吸金模式更可N+叠加。  
也正是由于如此,目前B2B2C平台成为了资本届竞相追捧的热宠儿。  
力谱云搭建云医护管家,从创业走向资本宠儿  
日前,一家河南健康管理企业,经由力谱云平台,成功上线了一款提供医护服务的B2B2C平台——“云医护管家”,就此实战案例,笔者和大家一同梳理一番此App平台的开发逻辑。  
首先,通过力谱云平台的“商城、预定、购物车、订单、门店”功能,快速整合一款能方便患者预约付款、医护入驻的B2B2C业务平台,并通过预约服务进行平台抽成。其次,通过多级分销,进行招商入驻,整合地域医护资源,开启平台资金流动。其三,利用代金券、文章等营销工具,打通平台引流、促活、转化、留存运营环节。最后,通过客服功能,提升售前、售后服务,打造优质用户体验。  
据了解,目前,云医护管家作为一家整合医护资源的B2B2C平台,已覆盖河南省超10+城市代理,另有数十家跨省代理商与机构正在磋商洽谈中。创始人也表示,初衷只是借力谱云平台搭建一款集合当地医护资源的平台进行自营,并没有想到会收获那么多机构和同行对此平台项目的高度肯定,也感谢来自力谱云平台腾飞计划的创业扶持与App开发资源倾斜。并表示,在接下来的发展中,走出河南省进行全国性代理业务覆盖,收获第一轮天使资金也将成为可能。  
其实,云医护管家的成功不仅在于其项目运作模式,也基于力谱云从研发到运营全程护航的移动解决方案以及对企业平台盈利能力的资源倾斜。  
力谱云除了研发,更关注平台的盈利性  
作为技术研发出身的**力谱云***> *平台,基于其创新云计算模式,可为企业移动转型压缩App成本至传统市场的1%,开发周期缩短至1周。在颠覆性的高效、低成本研发技术面前,力谱云也更关心企业平台的可持续盈利模式。  
为了增强其营销战略,降低平台运营成本,推出了一系列如拼团、限时抢购、积分、直播等营销工具,帮助企业用户全方位打通引流、促活、转化、留存各个运营环节。搭配强大的数据分析能力,精准跟踪用户、订单等数据,定期汇总分析,帮助制定App平台精准营销战略。并提供平台无限功能拓展的发展空间,每月数十多功能免费迭代更新等后期技术运营支持。让企业平台的每一步营收路,都走得更加平稳。  
目前,力谱云企业为了帮助中小企业用户更快速、成功地打入移动蓝海市场,联合数家创业机构,推出了创业资源丰富倾斜的腾飞计划,意在扶持初创型企业快速布局移动市场,抢先占领市场优势,打造企业升级出口。  
相信在未来,力谱云和中小型企业之间,尤其是初创企业,还将开启更为紧密的商业纽带。
收起阅读 »

如何用PHP读取Excel文件数据及内容信息

PHP

  在文章开始介绍前,大家需要了解一下PHPExcel是什么?PHPExcel 就是一个用来操作Office Excel 文档的PHP类库。接下来讲解如何利用PHPExcel类库将Excel表格内的信息内容读取出来,完整代码如下:
<?php

$fileName = "1.xls";

if (!file_exists($fileName)) {

return "文件不存在!";

}

// 引入PHPExcel

require_once "./PHPExcel/IOFactory.php";

// 载入当前文件

$phpExcel = PHPExcel_IOFactory::load($fileName);

// 设置为默认表

$phpExcel->setActiveSheetIndex(0);

// 获取表格数量

$sheetCount = $phpExcel->getSheetCount();

// 获取行数

$row = $phpExcel->getActiveSheet()->getHighestRow();

// 获取列数

$column = $phpExcel->getActiveSheet()->getHighestColumn();

echo "表格数目为:$sheetCount" . "表格的行数:$row" . "列数:$column";

$data = [];

// 行数循环

for ($i = 1; $i <= $row; $i++) {

// 列数循环

for ($c = 'A'; $c <= $column; $c++) {

$data[] = $phpExcel->getActiveSheet()->getCell($c . $i)->getValue();

}

echo "

";

print_r($data);

}
  在上述代码中,先if判断Excel表格是否存在,再用require_once引入PHPExcel类库中IOFactory.php这个类,然后使用PHPExcel类库的一个方法载入Excel文件,这里将载入的Excel文件赋值于$phpExcel变量。

  然后再将$phpExcel变量通过分别指定相应的方法来获取Excel表格的数目、行数、列数以及通过setActiveSheetIndex(0)方法设置这个表格为默认(0表示默认)。

  此时输出表格的数目、行数、列数的结果,通过浏览器访问的结果就出来了。然后我们用for循环遍历出表格的所有内容,再定义一个数组$data来接收这些内容。以上就是为大家分享的内容了,如果大家还是存在不了解的地方,可以留言咨询我们。

  本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。

继续阅读 »

  在文章开始介绍前,大家需要了解一下PHPExcel是什么?PHPExcel 就是一个用来操作Office Excel 文档的PHP类库。接下来讲解如何利用PHPExcel类库将Excel表格内的信息内容读取出来,完整代码如下:
<?php

$fileName = "1.xls";

if (!file_exists($fileName)) {

return "文件不存在!";

}

// 引入PHPExcel

require_once "./PHPExcel/IOFactory.php";

// 载入当前文件

$phpExcel = PHPExcel_IOFactory::load($fileName);

// 设置为默认表

$phpExcel->setActiveSheetIndex(0);

// 获取表格数量

$sheetCount = $phpExcel->getSheetCount();

// 获取行数

$row = $phpExcel->getActiveSheet()->getHighestRow();

// 获取列数

$column = $phpExcel->getActiveSheet()->getHighestColumn();

echo "表格数目为:$sheetCount" . "表格的行数:$row" . "列数:$column";

$data = [];

// 行数循环

for ($i = 1; $i <= $row; $i++) {

// 列数循环

for ($c = 'A'; $c <= $column; $c++) {

$data[] = $phpExcel->getActiveSheet()->getCell($c . $i)->getValue();

}

echo "

";

print_r($data);

}
  在上述代码中,先if判断Excel表格是否存在,再用require_once引入PHPExcel类库中IOFactory.php这个类,然后使用PHPExcel类库的一个方法载入Excel文件,这里将载入的Excel文件赋值于$phpExcel变量。

  然后再将$phpExcel变量通过分别指定相应的方法来获取Excel表格的数目、行数、列数以及通过setActiveSheetIndex(0)方法设置这个表格为默认(0表示默认)。

  此时输出表格的数目、行数、列数的结果,通过浏览器访问的结果就出来了。然后我们用for循环遍历出表格的所有内容,再定义一个数组$data来接收这些内容。以上就是为大家分享的内容了,如果大家还是存在不了解的地方,可以留言咨询我们。

  本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。

收起阅读 »

GraceUI6.0 正式发布

graceUI uniapp

GraceUI6.0 正式发布

GraceUI6.0 正式发布

MUI实现小米商城视频教程 附代码和笔记

mui

主要课程如下:
mui框架的基本使用
常用组件的使用,包括轮播组件、懒加载、下拉加载和节流函数
小米商城的实现

下载地址:http://www.sucaihuo.com/video/260.html

继续阅读 »

主要课程如下:
mui框架的基本使用
常用组件的使用,包括轮播组件、懒加载、下拉加载和节流函数
小米商城的实现

下载地址:http://www.sucaihuo.com/video/260.html

收起阅读 »

轻松e购-wap2app项目分享

案例 wap2app

APP名称:轻松e购
已经实现的功能:
一、原生分享;
二、下拉刷新;
三、APP内更新安装;
四、个推推送;
五、清理缓存;
六、阿里百川回调
七、收藏按钮点击刷新

已上架360和酷安,360因无软著,暂时未提交新版本
APP下载地址:APP下载

继续阅读 »

APP名称:轻松e购
已经实现的功能:
一、原生分享;
二、下拉刷新;
三、APP内更新安装;
四、个推推送;
五、清理缓存;
六、阿里百川回调
七、收藏按钮点击刷新

已上架360和酷安,360因无软著,暂时未提交新版本
APP下载地址:APP下载

收起阅读 »

单张拍照 和多张图片选择

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <link href="../css/iconfont.css" rel="stylesheet" />  
    <link href="../css/common.css" rel="stylesheet" />  
    <link href="../css/style.css" rel="stylesheet" />  
    <script src="../js/mui.min.js"></script>  
    <script src="../js/public.js"></script>  
    <script src="../js/common.js"></script>  
    <script src="../js/vue.min.js"></script>  
    <script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>  
</head>  

<body>  
    <div id="take_order">  

        <div class="bg-y-ffcc00 padding-10 wxrow">  
            <div class="flex1 b-333">  
                运单号:xxxxx  
            </div>  
            <div class="wxaround" onclick="clicked('barcode_scan.html',true,true)">  
                <span class="iconfont icon-saoma g-009999 size18"></span>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                地址信息  
            </div>  
            <div class='send-view margin-t20'>  
                <div class='send-tips'>寄</div>  
                <div class='triangle-left'></div>  
                <div class='triangle-right'></div>  
                <div class='import-view' data-type="consigner">  
                    <span class='iconfont icon-daoru margin-r5'></span>  
                    <span class='size12'>导入</span>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>姓名:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consigner-name' v-model="consignerName" placeholder='请输入姓名'></input>  
                    </div>  
                    <div class='wxaround size12'>手机:</div>  
                    <div class='flex3'>  
                        <input type='number' class='send-input consigner-phone' v-model="consignerPhone" placeholder='请输入手机'></input>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>详细地址:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consigner-address' v-model="consignerAddress" placeholder='请输入详细地址'></input>  
                    </div>  
                    <div class='fix-add wxaround select-address' data-type="consigner-address">  
                        <input type="hidden" class="consigner-address-lng" />  
                        <input type="hidden" class="consigner-address-lat" />  
                        <span class='iconfont icon-dingwei size18'></span>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>身份证号:</div>  
                    <div class='flex2'>  
                        <input type='text' class='send-input' v-model="consignerIdCard" placeholder='请输入身份证号'></input>  
                    </div>  
                </div>  
            </div>  

            <div class='send-view margin-t30'>  
                <div class='send-tips collect-tips'>收</div>  
                <div class='triangle-left collect-triangle-left'></div>  
                <div class='triangle-right collect-triangle-right'></div>  
                <div class='import-view' data-type="consignee">  
                    <span class='iconfont icon-daoru margin-r5'></span>  
                    <span class='size12'>导入</span>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>姓名:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consignee-name' v-model="consigneeName" placeholder='请输入姓名'></input>  
                    </div>  
                    <div class='wxaround size12'>手机:</div>  
                    <div class='flex3'>  
                        <input type='number' class='send-input consignee-phone' v-model="consigneePhone" placeholder='请输入手机'></input>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>详细地址:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consignee-address' v-model="consigneeAddress" placeholder='请输入详细地址'></input>  
                    </div>  
                    <div class='fix-add wxaround select-address' data-type="consignee-address">  
                        <input type="hidden" class="consignee-address-lng" />  
                        <input type="hidden" class="consignee-address-lat" />  
                        <span class='iconfont icon-dingwei size18'></span>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                物品信息  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>名称</div>  
                <div class='flex1'>  
                    <input type='text' class='send-input' v-model="goodName" placeholder='请输入名称'></input>  
                </div>  
                <div class='wxaround width50 size12'>类型</div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select">  
                        <option>请选择类型</option>  
                        <option value="item-1">item-1</option>  
                        <option value="item-2">item-2</option>  
                        <option value="item-3">item-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>重量</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入重量'></input>  
                    <span class="po-down">kg</span>  
                </div>  
                <div class='wxaround width50 size12'>数量</div>  
                <div class='flex1'>  
                    <input type='text' class='send-input' placeholder='请输入名称'></input>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>打包费  
                </div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select">  
                        <option>请选择类型</option>  
                        <option value="item-1">item-1</option>  
                        <option value="item-2">item-2</option>  
                        <option value="item-3">item-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
                <div class='wxaround width50 size12'>保价费</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入保价费'></input>  
                    <span class="po-down">元</span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>备注</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入备注'></input>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                费用信息  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>计费模式</div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select" v-model="billModel">  
                        <option>请选择计费模式</option>  
                        <option value="item-1">计费-1</option>  
                        <option value="item-2">计费-2</option>  
                        <option value="item-3">计费-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>关闭月结</div>  
                <div class='flex1'>  
                    <div class="mui-switch " id="mySwitch">  
                        <div class="mui-switch-handle"></div>  
                    </div>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>费用总计</div>  
                <div class='flex1'>  
                    <span class="bold">25.50元</span>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                拍摄照片  
            </div>  
            <div class='margin-t10 wxrow img-list'>  
                <!--<img src="../img/bc-img1.png" class="send-img" />  
                <img src="../img/ceshi.jpg" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />-->  
                <!--<img  id="showImg" src="../img/head.png" class="send-img" />-->  
                <div class="send-img add-img" onclick="captureImage()">  
                    <div class="send-img-choose-inside wxaround">  
                        <span class="iconfont icon-tubiao_huabanfuben size20 b-999"></span>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <div class="padding-10">  
            <button type="button" class="btn-take">下单</button>  
        </div>  
    </div>  
    <script>  
        mui.init();  

        function getDefaultData() {  
            return {  
                //寄件人  
                consignerName: '',  
                consignerPhone: '',  
                consignerAddress: '',  
                consignerIdCard: '',  

                //收件人  
                consigneeName: '',  
                consigneePhone: '',  
                consigneeAddress: '',  

                //物品信息  
                goodName: '',  
                goodType: '',  
                goodWeight: '',  
                goodAmount: '',  
                goodPack: '',  
                goodOffer: '',  
                goodRemark: '',  

                billModel: ''  
            }  
        }  

        let take_order = new Vue({  
            el: '#take_order',  
            data: getDefaultData(),  
            methods: {  
                resetData: function() { //重置数据  
                    Object.assign(this.$data, getDefaultData());  
                }  
            }  
        });  

        function clearView() {  
            mui.plusReady(function() {  
                var view = plus.nativeObj.View.getViewById('view');  
                var view1 = plus.nativeObj.View.getViewById('view1');  
                if(view) {  
                    view.close();  
                    view1.close();  
                }  
            })  

        }  

        //导入地址信息  
        function importInfo(t, n, p, d) {  
            if(t == 'consigner') {  
                take_order.consignerName = n;  
                take_order.consignerPhone = p  
                take_order.consignerAddress = d;  
            }  
            if(t == 'consignee') {  
                take_order.consigneeName = n;  
                take_order.consigneePhone = p  
                take_order.consigneeAddress = d;  
            }  
        }  

        function scaned(t, r, f) {  
            console.log(t)  
            console.log(r)  
            console.log(f)  
            if(!f || f == 'null') {  
                img.src = '../img/barcode.png';  
            } else {  
                plus.io.resolveLocalFileSystemURL(f, function(entry) {  
                    img.src = entry.toLocalURL();  
                });  
                //      img.src = 'http://localhost:8020/'+f;  
            }  
        }  

        let maxNum = 9;  
        let imgTotalNum = 0;  
        let imgList = null;  
        // 拍照  
        function captureImage() {  
            imgList = ddsd.qsa('.send-img').length - 1;  
            imgTotalNum = maxNum - imgList;  
            let bts = [{  
                title: "拍照",  
                style: "destructive"  
            }, {  
                title: "从相册选择"  
            }];  
            plus.nativeUI.actionSheet({  
                    title: "上传拍摄图片",  
                    cancel: "取消",  
                    buttons: bts  
                },  
                function(e) {  
                    if(e.index == 1) {  
                        let cmr = plus.camera.getCamera();  
                        cmr.captureImage(function(path) {  
                                plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                                    showImg(entry.toLocalURL());  
                                    ddsd.qs('.send-img').style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';  
                                }, function(e) {  
                                    ddsd.toast('读取拍照文件错误:' + e.message);  
                                });  
                            },  
                            function(error) {  
                                ddsd.toast("失败: " + error.message);  
                            }, {  
                                filename: '_doc/camera/',  
                                index: 1  
                            }  
                        );  
                    } else if(e.index == 2) {  
                        plus.gallery.pick(function(e) {  
                            for(var i in e.files) {  
                                showImg(e.files[i]);  
                            }  
                        }, function(e) {  
                            console.log("取消选择图片");  
                        }, {  
                            filter: "image",  
                            multiple: true,  
                            system: false,  
                            maximum: imgTotalNum,  
                            onmaxed: function() {  
                                plus.nativeUI.toast('最多可以选择'+ imgTotalNum +'张图片')  
                            }  
                        });  
                    }  
                }  
            );  

        }  
        // 添加播放项  
        function createItem(entry) {  
            let img = document.createElement('img');  
            img.className = 'send-img';  
            img.src = entry.toLocalURL();  
            ddsd.qs('.img-list').insertBefore(img, ddsd.qs('.img-list').firstChild);  
        }  

        var f1 = new Array();  
        let previewImageList = [];  
        function showImg(url) {  
            plus.nativeUI.showWaiting( "加载中..." );  
            if ((imgList - 1) > 0) {  
                imgTotalNum = imgTotalNum - (imgList - 1);  
            }  
            // 兼容以“file:”开头的情况  
            if(0 != url.toString().indexOf("file://")) {  
                url = "file://" + url;  
            }  
            var _div_ = ddsd.qs('.img-list');  
            var _img_ = new Image();  
            _img_.src = url; // 传过来的图片路径在这里用。  
            _img_.className = 'send-img';  
            _img_.onclick = function() {  
                console.log(f1)  
                plus.nativeUI.previewImage(previewImageList,{  
                    current:0,  
                    loop:true  
                });  
            };  
            _img_.onload = function() {  
                var tmph = _img_.height;  
                var tmpw = _img_.width;  
                var isHengTu = tmpw > tmph;  
                var max = Math.max(tmpw, tmph);  
                var min = Math.min(tmpw, tmph);  
                var bili = min / max;  
                if(max > 1200) {  
                    max = 1200;  
                    min = Math.floor(bili * max);  
                }  
                tmph = isHengTu ? min : max;  
                tmpw = isHengTu ? max : min;  
                _img_.style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';  
                _img_.onload = null;  
                plus.io.resolveLocalFileSystemURL(url, function(entry) {  
                        entry.file(function(file) {  
                            ddsd.log(file)  
                            canvasResize(file, {  
                                width: tmpw,  
                                height: tmph,  
                                crop: false,  
                                quality: 50, //压缩质量  
                                rotate: 0,  
                                callback: function(data, width, height) {  
                                    f1.push(data);  
                                    _img_.src = data;  
                                    _div_.appendChild(_img_);  
                                    previewImageList.push(file.fullPath)  
                                    if ((ddsd.qsa('.send-img').length - 1) == 9) {  
                                        ddsd.qs('.add-img').style.display = 'none';  
                                    }  
                                    plus.nativeUI.closeWaiting();  
                                }  
                            });  
                        });  
                    },  
                    function(e) {  
                        plus.nativeUI.closeWaiting();  
                        console.log(e.message);  
                    });  
            };  
        };  

        mui.plusReady(function() {  

            var img = null;  

            function update(t, r, f) {  
                outSet('扫描成功:');  
                outLine(t);  
                outLine(r);  
                outLine('\n图片地址:' + f);  
                if(!f || f == 'null') {  
                    img.src = '../img/barcode.png';  
                } else {  
                    plus.io.resolveLocalFileSystemURL(f, function(entry) {  
                        img.src = entry.toLocalURL();  
                    });  
                    //img.src = 'http://localhost:13131/'+f;  
                }  
            }  

            document.getElementById("mySwitch").addEventListener("toggle", function(event) {  
                if(event.detail.isActive) {  
                    console.log("你启动了开关");  
                } else {  
                    console.log("你关闭了开关");  
                }  
            })  

            var alist = document.getElementsByClassName("send-img");  
            if(alist) {  
                for(var i = 0; i < alist.length; i++) {  
                    alist[i].style.height = alist[i].offsetWidth + "px";;  
                }  
            }  

            //导入发货信息  
            mui("body").on('tap', '.import-view', function(e) {  
                var type = this.dataset.type;  
                var webview = mui.openWindow({  
                    url: 'search_add.html',  
                    id: 'search_add.html',  
                    styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                        titleNView: { // 窗口的标题栏控件  
                            autoBackButton: true,  
                            titleText: '查询地址', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                            titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                            titleSize: "17px", // 字体大小,默认17px  
                            backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                        }  
                    },  
                    extras: {  
                        type: type  
                    }  
                });  
            })  

            //获取地址信息  
            mui("body").on('tap', '.select-address', function(e) {  
                var address = document.querySelector('.' + this.dataset.type).value;  
                var type = this.dataset.type;  
                if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {  
                    plus.nativeUI.toast('当前环境暂不支持地图插件');  
                    return;  
                }  
                var ws = plus.webview.currentWebview();  
                var wm = plus.webview.getWebviewById(plus.runtime.appid);  
                wm && wm.evalJS("preateClear()");  
                var subpage = mui.openWindow({  
                    url: 'maps_map.html',  
                    id: 'maps_map.html',  
                    styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                        titleNView: { // 窗口的标题栏控件  
                            autoBackButton: true,  
                            titleText: '位置信息', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                            titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                            titleSize: "17px", // 字体大小,默认17px  
                            backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                        }  
                    },  
                    extras: {  
                        address: address,  
                        type: type  
                    }  
                });  

                //页面转场的时候清除掉view。  
                subpage.addEventListener('loaded', function() {  
                    subpage.show('slide-in-right', 200, function() {  
                        view.clear();  
                        view1.clear();  
                    });  
                });  
            })  

            //下单  
            mui("body").on('tap', '.btn-take', function() {  

                //                  if(!take_order.consignerName.Trim()) {  
                //                      ddsd.toast('请输入寄件人姓名');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerPhone.Trim()) {  
                //                      ddsd.toast('请输入寄件人电话');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerAddress.Trim()) {  
                //                      ddsd.toast('请输入寄件人地址');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerIdCard.Trim()) {  
                //                      ddsd.toast('请输入寄件人身份证');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneeName.Trim()) {  
                //                      ddsd.toast('请输入收件人姓名');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneePhone.Trim()) {  
                //                      ddsd.toast('请输入收件人手机');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneeAddress.Trim()) {  
                //                      ddsd.toast('请输入收件人地址');  
                //                      return false;  
                //                  }  

                console.log(take_order.billModel)  
                /*                  mui.openWindow({  
                                        url: 'wait_pay.html',  
                                        id: 'wait_pay.html',  
                                        styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                                            titleNView: { // 窗口的标题栏控件  
                                                autoBackButton: true,  
                                                titleText: '等待支付', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                                                titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                                                titleSize: "17px", // 字体大小,默认17px  
                                                backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                                            }  
                                        }  
                                    });*/  
            })  

        })  

        function setAddress() {  
            mui.plusReady(function() {  
                var addressJson = plus.storage.getItem('addressJson')  
                var addressData = JSON.parse(addressJson);  
                document.querySelector('.' + addressData.type).value = addressData.address;  
                document.querySelector('.' + addressData.type + '-lng').value = addressData.longitude;  
                document.querySelector('.' + addressData.type + '-lat').value = addressData.latitude;  
            })  
        }  
    </script>  

</body>  

</html>

继续阅读 »

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <link href="../css/iconfont.css" rel="stylesheet" />  
    <link href="../css/common.css" rel="stylesheet" />  
    <link href="../css/style.css" rel="stylesheet" />  
    <script src="../js/mui.min.js"></script>  
    <script src="../js/public.js"></script>  
    <script src="../js/common.js"></script>  
    <script src="../js/vue.min.js"></script>  
    <script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>  
</head>  

<body>  
    <div id="take_order">  

        <div class="bg-y-ffcc00 padding-10 wxrow">  
            <div class="flex1 b-333">  
                运单号:xxxxx  
            </div>  
            <div class="wxaround" onclick="clicked('barcode_scan.html',true,true)">  
                <span class="iconfont icon-saoma g-009999 size18"></span>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                地址信息  
            </div>  
            <div class='send-view margin-t20'>  
                <div class='send-tips'>寄</div>  
                <div class='triangle-left'></div>  
                <div class='triangle-right'></div>  
                <div class='import-view' data-type="consigner">  
                    <span class='iconfont icon-daoru margin-r5'></span>  
                    <span class='size12'>导入</span>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>姓名:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consigner-name' v-model="consignerName" placeholder='请输入姓名'></input>  
                    </div>  
                    <div class='wxaround size12'>手机:</div>  
                    <div class='flex3'>  
                        <input type='number' class='send-input consigner-phone' v-model="consignerPhone" placeholder='请输入手机'></input>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>详细地址:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consigner-address' v-model="consignerAddress" placeholder='请输入详细地址'></input>  
                    </div>  
                    <div class='fix-add wxaround select-address' data-type="consigner-address">  
                        <input type="hidden" class="consigner-address-lng" />  
                        <input type="hidden" class="consigner-address-lat" />  
                        <span class='iconfont icon-dingwei size18'></span>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>身份证号:</div>  
                    <div class='flex2'>  
                        <input type='text' class='send-input' v-model="consignerIdCard" placeholder='请输入身份证号'></input>  
                    </div>  
                </div>  
            </div>  

            <div class='send-view margin-t30'>  
                <div class='send-tips collect-tips'>收</div>  
                <div class='triangle-left collect-triangle-left'></div>  
                <div class='triangle-right collect-triangle-right'></div>  
                <div class='import-view' data-type="consignee">  
                    <span class='iconfont icon-daoru margin-r5'></span>  
                    <span class='size12'>导入</span>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>姓名:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consignee-name' v-model="consigneeName" placeholder='请输入姓名'></input>  
                    </div>  
                    <div class='wxaround size12'>手机:</div>  
                    <div class='flex3'>  
                        <input type='number' class='send-input consignee-phone' v-model="consigneePhone" placeholder='请输入手机'></input>  
                    </div>  
                </div>  
                <div class='margin-t20 wxrow b-333'>  
                    <div class='wxaround size12'>详细地址:</div>  
                    <div class='flex2 padding-r10'>  
                        <input type='text' class='send-input consignee-address' v-model="consigneeAddress" placeholder='请输入详细地址'></input>  
                    </div>  
                    <div class='fix-add wxaround select-address' data-type="consignee-address">  
                        <input type="hidden" class="consignee-address-lng" />  
                        <input type="hidden" class="consignee-address-lat" />  
                        <span class='iconfont icon-dingwei size18'></span>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                物品信息  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>名称</div>  
                <div class='flex1'>  
                    <input type='text' class='send-input' v-model="goodName" placeholder='请输入名称'></input>  
                </div>  
                <div class='wxaround width50 size12'>类型</div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select">  
                        <option>请选择类型</option>  
                        <option value="item-1">item-1</option>  
                        <option value="item-2">item-2</option>  
                        <option value="item-3">item-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>重量</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入重量'></input>  
                    <span class="po-down">kg</span>  
                </div>  
                <div class='wxaround width50 size12'>数量</div>  
                <div class='flex1'>  
                    <input type='text' class='send-input' placeholder='请输入名称'></input>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>打包费  
                </div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select">  
                        <option>请选择类型</option>  
                        <option value="item-1">item-1</option>  
                        <option value="item-2">item-2</option>  
                        <option value="item-3">item-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
                <div class='wxaround width50 size12'>保价费</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入保价费'></input>  
                    <span class="po-down">元</span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxaround width50 size12'>备注</div>  
                <div class='flex1 relative'>  
                    <input type='text' class='send-input' placeholder='请输入备注'></input>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                费用信息  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>计费模式</div>  
                <div class='flex1 relative'>  
                    <select class="mui-btn send-select" v-model="billModel">  
                        <option>请选择计费模式</option>  
                        <option value="item-1">计费-1</option>  
                        <option value="item-2">计费-2</option>  
                        <option value="item-3">计费-3</option>  
                        <option value="item-4">item-4</option>  
                        <option value="item-5">item-5</option>  
                    </select>  
                    <span class="iconfont icon-xiajiantou po-down"></span>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>关闭月结</div>  
                <div class='flex1'>  
                    <div class="mui-switch " id="mySwitch">  
                        <div class="mui-switch-handle"></div>  
                    </div>  
                </div>  
            </div>  
            <div class='margin-t20 wxrow b-333'>  
                <div class='wxcenter width60 size12'>费用总计</div>  
                <div class='flex1'>  
                    <span class="bold">25.50元</span>  
                </div>  
            </div>  
        </div>  

        <div class="bg-w-fff padding-10 margin-t10">  
            <div class="bold">  
                拍摄照片  
            </div>  
            <div class='margin-t10 wxrow img-list'>  
                <!--<img src="../img/bc-img1.png" class="send-img" />  
                <img src="../img/ceshi.jpg" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />  
                <img src="../img/head.png" class="send-img" />-->  
                <!--<img  id="showImg" src="../img/head.png" class="send-img" />-->  
                <div class="send-img add-img" onclick="captureImage()">  
                    <div class="send-img-choose-inside wxaround">  
                        <span class="iconfont icon-tubiao_huabanfuben size20 b-999"></span>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <div class="padding-10">  
            <button type="button" class="btn-take">下单</button>  
        </div>  
    </div>  
    <script>  
        mui.init();  

        function getDefaultData() {  
            return {  
                //寄件人  
                consignerName: '',  
                consignerPhone: '',  
                consignerAddress: '',  
                consignerIdCard: '',  

                //收件人  
                consigneeName: '',  
                consigneePhone: '',  
                consigneeAddress: '',  

                //物品信息  
                goodName: '',  
                goodType: '',  
                goodWeight: '',  
                goodAmount: '',  
                goodPack: '',  
                goodOffer: '',  
                goodRemark: '',  

                billModel: ''  
            }  
        }  

        let take_order = new Vue({  
            el: '#take_order',  
            data: getDefaultData(),  
            methods: {  
                resetData: function() { //重置数据  
                    Object.assign(this.$data, getDefaultData());  
                }  
            }  
        });  

        function clearView() {  
            mui.plusReady(function() {  
                var view = plus.nativeObj.View.getViewById('view');  
                var view1 = plus.nativeObj.View.getViewById('view1');  
                if(view) {  
                    view.close();  
                    view1.close();  
                }  
            })  

        }  

        //导入地址信息  
        function importInfo(t, n, p, d) {  
            if(t == 'consigner') {  
                take_order.consignerName = n;  
                take_order.consignerPhone = p  
                take_order.consignerAddress = d;  
            }  
            if(t == 'consignee') {  
                take_order.consigneeName = n;  
                take_order.consigneePhone = p  
                take_order.consigneeAddress = d;  
            }  
        }  

        function scaned(t, r, f) {  
            console.log(t)  
            console.log(r)  
            console.log(f)  
            if(!f || f == 'null') {  
                img.src = '../img/barcode.png';  
            } else {  
                plus.io.resolveLocalFileSystemURL(f, function(entry) {  
                    img.src = entry.toLocalURL();  
                });  
                //      img.src = 'http://localhost:8020/'+f;  
            }  
        }  

        let maxNum = 9;  
        let imgTotalNum = 0;  
        let imgList = null;  
        // 拍照  
        function captureImage() {  
            imgList = ddsd.qsa('.send-img').length - 1;  
            imgTotalNum = maxNum - imgList;  
            let bts = [{  
                title: "拍照",  
                style: "destructive"  
            }, {  
                title: "从相册选择"  
            }];  
            plus.nativeUI.actionSheet({  
                    title: "上传拍摄图片",  
                    cancel: "取消",  
                    buttons: bts  
                },  
                function(e) {  
                    if(e.index == 1) {  
                        let cmr = plus.camera.getCamera();  
                        cmr.captureImage(function(path) {  
                                plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                                    showImg(entry.toLocalURL());  
                                    ddsd.qs('.send-img').style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';  
                                }, function(e) {  
                                    ddsd.toast('读取拍照文件错误:' + e.message);  
                                });  
                            },  
                            function(error) {  
                                ddsd.toast("失败: " + error.message);  
                            }, {  
                                filename: '_doc/camera/',  
                                index: 1  
                            }  
                        );  
                    } else if(e.index == 2) {  
                        plus.gallery.pick(function(e) {  
                            for(var i in e.files) {  
                                showImg(e.files[i]);  
                            }  
                        }, function(e) {  
                            console.log("取消选择图片");  
                        }, {  
                            filter: "image",  
                            multiple: true,  
                            system: false,  
                            maximum: imgTotalNum,  
                            onmaxed: function() {  
                                plus.nativeUI.toast('最多可以选择'+ imgTotalNum +'张图片')  
                            }  
                        });  
                    }  
                }  
            );  

        }  
        // 添加播放项  
        function createItem(entry) {  
            let img = document.createElement('img');  
            img.className = 'send-img';  
            img.src = entry.toLocalURL();  
            ddsd.qs('.img-list').insertBefore(img, ddsd.qs('.img-list').firstChild);  
        }  

        var f1 = new Array();  
        let previewImageList = [];  
        function showImg(url) {  
            plus.nativeUI.showWaiting( "加载中..." );  
            if ((imgList - 1) > 0) {  
                imgTotalNum = imgTotalNum - (imgList - 1);  
            }  
            // 兼容以“file:”开头的情况  
            if(0 != url.toString().indexOf("file://")) {  
                url = "file://" + url;  
            }  
            var _div_ = ddsd.qs('.img-list');  
            var _img_ = new Image();  
            _img_.src = url; // 传过来的图片路径在这里用。  
            _img_.className = 'send-img';  
            _img_.onclick = function() {  
                console.log(f1)  
                plus.nativeUI.previewImage(previewImageList,{  
                    current:0,  
                    loop:true  
                });  
            };  
            _img_.onload = function() {  
                var tmph = _img_.height;  
                var tmpw = _img_.width;  
                var isHengTu = tmpw > tmph;  
                var max = Math.max(tmpw, tmph);  
                var min = Math.min(tmpw, tmph);  
                var bili = min / max;  
                if(max > 1200) {  
                    max = 1200;  
                    min = Math.floor(bili * max);  
                }  
                tmph = isHengTu ? min : max;  
                tmpw = isHengTu ? max : min;  
                _img_.style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';  
                _img_.onload = null;  
                plus.io.resolveLocalFileSystemURL(url, function(entry) {  
                        entry.file(function(file) {  
                            ddsd.log(file)  
                            canvasResize(file, {  
                                width: tmpw,  
                                height: tmph,  
                                crop: false,  
                                quality: 50, //压缩质量  
                                rotate: 0,  
                                callback: function(data, width, height) {  
                                    f1.push(data);  
                                    _img_.src = data;  
                                    _div_.appendChild(_img_);  
                                    previewImageList.push(file.fullPath)  
                                    if ((ddsd.qsa('.send-img').length - 1) == 9) {  
                                        ddsd.qs('.add-img').style.display = 'none';  
                                    }  
                                    plus.nativeUI.closeWaiting();  
                                }  
                            });  
                        });  
                    },  
                    function(e) {  
                        plus.nativeUI.closeWaiting();  
                        console.log(e.message);  
                    });  
            };  
        };  

        mui.plusReady(function() {  

            var img = null;  

            function update(t, r, f) {  
                outSet('扫描成功:');  
                outLine(t);  
                outLine(r);  
                outLine('\n图片地址:' + f);  
                if(!f || f == 'null') {  
                    img.src = '../img/barcode.png';  
                } else {  
                    plus.io.resolveLocalFileSystemURL(f, function(entry) {  
                        img.src = entry.toLocalURL();  
                    });  
                    //img.src = 'http://localhost:13131/'+f;  
                }  
            }  

            document.getElementById("mySwitch").addEventListener("toggle", function(event) {  
                if(event.detail.isActive) {  
                    console.log("你启动了开关");  
                } else {  
                    console.log("你关闭了开关");  
                }  
            })  

            var alist = document.getElementsByClassName("send-img");  
            if(alist) {  
                for(var i = 0; i < alist.length; i++) {  
                    alist[i].style.height = alist[i].offsetWidth + "px";;  
                }  
            }  

            //导入发货信息  
            mui("body").on('tap', '.import-view', function(e) {  
                var type = this.dataset.type;  
                var webview = mui.openWindow({  
                    url: 'search_add.html',  
                    id: 'search_add.html',  
                    styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                        titleNView: { // 窗口的标题栏控件  
                            autoBackButton: true,  
                            titleText: '查询地址', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                            titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                            titleSize: "17px", // 字体大小,默认17px  
                            backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                        }  
                    },  
                    extras: {  
                        type: type  
                    }  
                });  
            })  

            //获取地址信息  
            mui("body").on('tap', '.select-address', function(e) {  
                var address = document.querySelector('.' + this.dataset.type).value;  
                var type = this.dataset.type;  
                if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {  
                    plus.nativeUI.toast('当前环境暂不支持地图插件');  
                    return;  
                }  
                var ws = plus.webview.currentWebview();  
                var wm = plus.webview.getWebviewById(plus.runtime.appid);  
                wm && wm.evalJS("preateClear()");  
                var subpage = mui.openWindow({  
                    url: 'maps_map.html',  
                    id: 'maps_map.html',  
                    styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                        titleNView: { // 窗口的标题栏控件  
                            autoBackButton: true,  
                            titleText: '位置信息', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                            titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                            titleSize: "17px", // 字体大小,默认17px  
                            backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                        }  
                    },  
                    extras: {  
                        address: address,  
                        type: type  
                    }  
                });  

                //页面转场的时候清除掉view。  
                subpage.addEventListener('loaded', function() {  
                    subpage.show('slide-in-right', 200, function() {  
                        view.clear();  
                        view1.clear();  
                    });  
                });  
            })  

            //下单  
            mui("body").on('tap', '.btn-take', function() {  

                //                  if(!take_order.consignerName.Trim()) {  
                //                      ddsd.toast('请输入寄件人姓名');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerPhone.Trim()) {  
                //                      ddsd.toast('请输入寄件人电话');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerAddress.Trim()) {  
                //                      ddsd.toast('请输入寄件人地址');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consignerIdCard.Trim()) {  
                //                      ddsd.toast('请输入寄件人身份证');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneeName.Trim()) {  
                //                      ddsd.toast('请输入收件人姓名');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneePhone.Trim()) {  
                //                      ddsd.toast('请输入收件人手机');  
                //                      return false;  
                //                  }  
                //                  if(!take_order.consigneeAddress.Trim()) {  
                //                      ddsd.toast('请输入收件人地址');  
                //                      return false;  
                //                  }  

                console.log(take_order.billModel)  
                /*                  mui.openWindow({  
                                        url: 'wait_pay.html',  
                                        id: 'wait_pay.html',  
                                        styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
                                            titleNView: { // 窗口的标题栏控件  
                                                autoBackButton: true,  
                                                titleText: '等待支付', // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
                                                titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
                                                titleSize: "17px", // 字体大小,默认17px  
                                                backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
                                            }  
                                        }  
                                    });*/  
            })  

        })  

        function setAddress() {  
            mui.plusReady(function() {  
                var addressJson = plus.storage.getItem('addressJson')  
                var addressData = JSON.parse(addressJson);  
                document.querySelector('.' + addressData.type).value = addressData.address;  
                document.querySelector('.' + addressData.type + '-lng').value = addressData.longitude;  
                document.querySelector('.' + addressData.type + '-lat').value = addressData.latitude;  
            })  
        }  
    </script>  

</body>  

</html>

收起阅读 »

NFC读取卡片ID

NFC Native.JS

本人小白一枚,在基于@Android_磊子大哥的文章(原文地址)以及网上的一些大神的文章,改了一点自己需要的功能

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <title></title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  
        <script>  
            var NfcAdapter;  
            var NdefRecord;  
            var NdefMessage;  
            function listenNFCStatus() {  
                try{  
                    var main = plus.android.runtimeMainActivity();  
                    var Intent = plus.android.importClass('android.content.Intent');  
                    var Activity = plus.android.importClass('android.app.Activity');  
                    var PendingIntent = plus.android.importClass('android.app.PendingIntent');  
                    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
                    NfcAdapter = plus.android.importClass('android.nfc.NfcAdapter');  
                    var nfcAdapter = NfcAdapter.getDefaultAdapter(main);  
                    var intent = new Intent(main, main.getClass());  
                    intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);  
                    var pendingIntent = PendingIntent.getActivity(main, 0, intent, 0);  
                    var ndef = new IntentFilter("android.nfc.action.TECH_DISCOVERED");  
                    ndef.addDataType("*/*");  
                    var intentFiltersArray = [ndef];  
                    var techListsArray = [  
                        ["android.nfc.tech.IsoDep"],  
                        ["android.nfc.tech.NfcA"],  
                        ["android.nfc.tech.NfcB"],  
                        ["android.nfc.tech.NfcF"],  
                        ["android.nfc.tech.Nfcf"],  
                        ["android.nfc.tech.NfcV"],  
                        ["android.nfc.tech.NdefFormatable"],  
                        ["android.nfc.tech.MifareClassic"],  
                        ["android.nfc.tech.MifareUltralight"]  
                    ];  
                    document.addEventListener("newintent",  
                        function() {  
                            console.error('newintent');  
                            setTimeout(handle_nfc_data1, 1000);  
                        }, false);  
                    document.addEventListener("pause", function(e) {  
                        if (nfcAdapter) {  
                            nfcAdapter.disableForegroundDispatch(main);  
                            console.log('pause');  
                        }  
                    }, false);  
                    document.addEventListener("resume", function(e) {  
                        if (nfcAdapter) {  
                            console.log('resume');  
                            nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  
                        }  
                    }, false);  
                    nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  
                }catch(e){  
                    console.error(e);  
                }  
            }  

            function handle_nfc_data1()  
            {  
                NdefRecord = plus.android.importClass("android.nfc.NdefRecord");  
                NdefMessage = plus.android.importClass("android.nfc.NdefMessage");  
                var main = plus.android.runtimeMainActivity();  
                var intent = main.getIntent();  
                console.log("action type:" + intent.getAction());  
                if("android.nfc.action.TECH_DISCOVERED" == intent.getAction()){  
                    if(readyWriteData){  
                        __write(intent);  
                        readyWriteData = false;  
                    }else if(readyRead){  
                        __read(intent);  
                        readyRead = false;  
                    }  
                }  
            }  
            function showToast(msg){  
                plus.nativeUI.toast(msg);  
            }  

            function __write(intent){  
                try{  
                    waiting.setTitle('请勿移开标签\n正在写入...');  
                    var text = document.getElementById('text').value;  
                    console.log("text=" + text);  
                    var textBytes = plus.android.invoke(text,"getBytes");  
                    var textRecord = new NdefRecord(NdefRecord.TNF_MIME_MEDIA,  
                            plus.android.invoke("text/plain","getBytes"), plus.android.invoke("","getBytes"), textBytes);  
                    var message = new NdefMessage([textRecord]);  
                    var Ndef = plus.android.importClass('android.nfc.tech.Ndef');  
                    var NdefFormatable = plus.android.importClass('android.nfc.tech.NdefFormatable');  
                    var tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
                    var ndef = Ndef.get(tag);  
                    if (ndef != null) {  
                        var size = message.toByteArray().length;  
                        console.log("size=" + size);  
                        ndef.connect();  
                        if (!ndef.isWritable()) {  
                            showToast("tag不允许写入");  
                            waiting.close();  
                            return ;  
                        }  
                        if (ndef.getMaxSize() < size) {  
                            showToast("文件大小超出容量");  
                            waiting.close();  
                            return ;  
                        }  

                        ndef.writeNdefMessage(message);  
                        waiting.close();  
                        showToast("写入数据成功.");  
                        return ;  
                    } else {  
                        var format = NdefFormatable.get(tag);  
                        if (format != null) {  
                            try {  
                                format.connect();  
                                format.format(message);  
                                showToast("格式化tag并且写入message");  
                                waiting.close();  
                                return ;  
                            } catch (e) {  
                                showToast("格式化tag失败.");  
                                waiting.close();  
                                return ;  
                            }  
                        } else {  
                            showToast("Tag不支持NDEF");  
                            waiting.close();  
                            return ;  
                        }  
                    }  
                }catch(e){  
                    console.log("error=" + e);  
                    waiting.close();  
                    alert('写入失败');  
                }  

            }  

            function __read(intent){  
                try{  
                    var content = "";  
                    waiting.setTitle('请勿移开标签\n正在读取数据...');  
                    var tag = plus.android.importClass("android.nfc.Tag");  
                    tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
                    var bytesId  = intent.getByteArrayExtra(NfcAdapter.EXTRA_ID);  
                    console.log("bytesId:"+(bytesId));  
                    waiting.close();  
                    content +="卡片字节数组ID:"+tag.getId()+"<br/>";  
                    content +="卡片16进制ID:"+ bytesToHexString(tag.getId())+"<br/>";  
                    var tagid = reverseTwo(bytesToHexString(tag.getId()));  
                    content +="卡片16进制翻转ID:"+tagid+"<br/>";  
                    content +="卡片10进制卡号:"+parseInt(tagid, 16)+"<br/>";  

                    $("#content").html(content);  

                }catch(e){  
                    alert(e);  
                    //TODO handle the exception  
                }  
            }  

            function bytesToHexString(inarray){  
                var i, j, x;  
                var hex = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A",  
                    "B", "C", "D", "E", "F" ];  
                var out = "";  
                for (j = 0; j < inarray.length; ++j) {  
                    x = parseInt(inarray[j]) & 0xff;  
                    i = (x >> 4) & 0x0f;  
                    out += hex[i];  
                    i = x & 0x0f;  
                    out += hex[i];  
                }  
                return out;  
            }  

            function reverseTwo(str)   
            {   

                var str1 = "";  
                for(var i = 1; i <= str.length; i++){  
                    str1 +=str[i-1];  
                    if(i%2==0){  
                        if(i == str.length){  
                            break;  
                        }  
                        str1+=":";  
                    }  
                }  
                var str2 = "";  
                for(var i = str1.split(":").length-1; i >= 0 ; i--){  
                    str2+= str1.split(":")[i];  
                }  
                return str2;  
            }  

            document.addEventListener('plusready',listenNFCStatus,false);  

            var waiting ;  
            var readyWriteData = false;  
            var readyRead = false;  
            function writeData(){  
                var textEle = document.getElementById('text');  
                if(!textEle.value){  
                    alert('请输入要写入的内容');  
                    return;  
                }  
                readyWriteData = true;  
                waiting = plus.nativeUI.showWaiting("请将NFC标签靠近!");  
            }  
            function readData(){  
                readyRead = true;  
                waiting = plus.nativeUI.showWaiting("请将NFC标签靠近!");  
            }  
        </script>  

        <style>  
            button{  
                width: 50%;  
                height: 50px;  
            }  
        </style>  
    </head>  
    <body>  
        输入要写入的内容:<br/><textarea id="text">姓名:张二蛋年龄:29地址:北京海淀区</textarea><br/>  
       <button onclick="writeData()">写入</button>  
        <button style="position: absolute; bottom: 100px; right: 100px;" onclick="readData()">读取</button><br/>  
        读取的内容:  
        <div id="content"/>  
    </body>  
</html>

manifest.json 模块权限配置勾选了NFC
避免打包之后刷卡会闪退

继续阅读 »

本人小白一枚,在基于@Android_磊子大哥的文章(原文地址)以及网上的一些大神的文章,改了一点自己需要的功能

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <title></title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  
        <script>  
            var NfcAdapter;  
            var NdefRecord;  
            var NdefMessage;  
            function listenNFCStatus() {  
                try{  
                    var main = plus.android.runtimeMainActivity();  
                    var Intent = plus.android.importClass('android.content.Intent');  
                    var Activity = plus.android.importClass('android.app.Activity');  
                    var PendingIntent = plus.android.importClass('android.app.PendingIntent');  
                    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
                    NfcAdapter = plus.android.importClass('android.nfc.NfcAdapter');  
                    var nfcAdapter = NfcAdapter.getDefaultAdapter(main);  
                    var intent = new Intent(main, main.getClass());  
                    intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);  
                    var pendingIntent = PendingIntent.getActivity(main, 0, intent, 0);  
                    var ndef = new IntentFilter("android.nfc.action.TECH_DISCOVERED");  
                    ndef.addDataType("*/*");  
                    var intentFiltersArray = [ndef];  
                    var techListsArray = [  
                        ["android.nfc.tech.IsoDep"],  
                        ["android.nfc.tech.NfcA"],  
                        ["android.nfc.tech.NfcB"],  
                        ["android.nfc.tech.NfcF"],  
                        ["android.nfc.tech.Nfcf"],  
                        ["android.nfc.tech.NfcV"],  
                        ["android.nfc.tech.NdefFormatable"],  
                        ["android.nfc.tech.MifareClassic"],  
                        ["android.nfc.tech.MifareUltralight"]  
                    ];  
                    document.addEventListener("newintent",  
                        function() {  
                            console.error('newintent');  
                            setTimeout(handle_nfc_data1, 1000);  
                        }, false);  
                    document.addEventListener("pause", function(e) {  
                        if (nfcAdapter) {  
                            nfcAdapter.disableForegroundDispatch(main);  
                            console.log('pause');  
                        }  
                    }, false);  
                    document.addEventListener("resume", function(e) {  
                        if (nfcAdapter) {  
                            console.log('resume');  
                            nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  
                        }  
                    }, false);  
                    nfcAdapter.enableForegroundDispatch(main, pendingIntent, intentFiltersArray, techListsArray);  
                }catch(e){  
                    console.error(e);  
                }  
            }  

            function handle_nfc_data1()  
            {  
                NdefRecord = plus.android.importClass("android.nfc.NdefRecord");  
                NdefMessage = plus.android.importClass("android.nfc.NdefMessage");  
                var main = plus.android.runtimeMainActivity();  
                var intent = main.getIntent();  
                console.log("action type:" + intent.getAction());  
                if("android.nfc.action.TECH_DISCOVERED" == intent.getAction()){  
                    if(readyWriteData){  
                        __write(intent);  
                        readyWriteData = false;  
                    }else if(readyRead){  
                        __read(intent);  
                        readyRead = false;  
                    }  
                }  
            }  
            function showToast(msg){  
                plus.nativeUI.toast(msg);  
            }  

            function __write(intent){  
                try{  
                    waiting.setTitle('请勿移开标签\n正在写入...');  
                    var text = document.getElementById('text').value;  
                    console.log("text=" + text);  
                    var textBytes = plus.android.invoke(text,"getBytes");  
                    var textRecord = new NdefRecord(NdefRecord.TNF_MIME_MEDIA,  
                            plus.android.invoke("text/plain","getBytes"), plus.android.invoke("","getBytes"), textBytes);  
                    var message = new NdefMessage([textRecord]);  
                    var Ndef = plus.android.importClass('android.nfc.tech.Ndef');  
                    var NdefFormatable = plus.android.importClass('android.nfc.tech.NdefFormatable');  
                    var tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
                    var ndef = Ndef.get(tag);  
                    if (ndef != null) {  
                        var size = message.toByteArray().length;  
                        console.log("size=" + size);  
                        ndef.connect();  
                        if (!ndef.isWritable()) {  
                            showToast("tag不允许写入");  
                            waiting.close();  
                            return ;  
                        }  
                        if (ndef.getMaxSize() < size) {  
                            showToast("文件大小超出容量");  
                            waiting.close();  
                            return ;  
                        }  

                        ndef.writeNdefMessage(message);  
                        waiting.close();  
                        showToast("写入数据成功.");  
                        return ;  
                    } else {  
                        var format = NdefFormatable.get(tag);  
                        if (format != null) {  
                            try {  
                                format.connect();  
                                format.format(message);  
                                showToast("格式化tag并且写入message");  
                                waiting.close();  
                                return ;  
                            } catch (e) {  
                                showToast("格式化tag失败.");  
                                waiting.close();  
                                return ;  
                            }  
                        } else {  
                            showToast("Tag不支持NDEF");  
                            waiting.close();  
                            return ;  
                        }  
                    }  
                }catch(e){  
                    console.log("error=" + e);  
                    waiting.close();  
                    alert('写入失败');  
                }  

            }  

            function __read(intent){  
                try{  
                    var content = "";  
                    waiting.setTitle('请勿移开标签\n正在读取数据...');  
                    var tag = plus.android.importClass("android.nfc.Tag");  
                    tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);  
                    var bytesId  = intent.getByteArrayExtra(NfcAdapter.EXTRA_ID);  
                    console.log("bytesId:"+(bytesId));  
                    waiting.close();  
                    content +="卡片字节数组ID:"+tag.getId()+"<br/>";  
                    content +="卡片16进制ID:"+ bytesToHexString(tag.getId())+"<br/>";  
                    var tagid = reverseTwo(bytesToHexString(tag.getId()));  
                    content +="卡片16进制翻转ID:"+tagid+"<br/>";  
                    content +="卡片10进制卡号:"+parseInt(tagid, 16)+"<br/>";  

                    $("#content").html(content);  

                }catch(e){  
                    alert(e);  
                    //TODO handle the exception  
                }  
            }  

            function bytesToHexString(inarray){  
                var i, j, x;  
                var hex = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A",  
                    "B", "C", "D", "E", "F" ];  
                var out = "";  
                for (j = 0; j < inarray.length; ++j) {  
                    x = parseInt(inarray[j]) & 0xff;  
                    i = (x >> 4) & 0x0f;  
                    out += hex[i];  
                    i = x & 0x0f;  
                    out += hex[i];  
                }  
                return out;  
            }  

            function reverseTwo(str)   
            {   

                var str1 = "";  
                for(var i = 1; i <= str.length; i++){  
                    str1 +=str[i-1];  
                    if(i%2==0){  
                        if(i == str.length){  
                            break;  
                        }  
                        str1+=":";  
                    }  
                }  
                var str2 = "";  
                for(var i = str1.split(":").length-1; i >= 0 ; i--){  
                    str2+= str1.split(":")[i];  
                }  
                return str2;  
            }  

            document.addEventListener('plusready',listenNFCStatus,false);  

            var waiting ;  
            var readyWriteData = false;  
            var readyRead = false;  
            function writeData(){  
                var textEle = document.getElementById('text');  
                if(!textEle.value){  
                    alert('请输入要写入的内容');  
                    return;  
                }  
                readyWriteData = true;  
                waiting = plus.nativeUI.showWaiting("请将NFC标签靠近!");  
            }  
            function readData(){  
                readyRead = true;  
                waiting = plus.nativeUI.showWaiting("请将NFC标签靠近!");  
            }  
        </script>  

        <style>  
            button{  
                width: 50%;  
                height: 50px;  
            }  
        </style>  
    </head>  
    <body>  
        输入要写入的内容:<br/><textarea id="text">姓名:张二蛋年龄:29地址:北京海淀区</textarea><br/>  
       <button onclick="writeData()">写入</button>  
        <button style="position: absolute; bottom: 100px; right: 100px;" onclick="readData()">读取</button><br/>  
        读取的内容:  
        <div id="content"/>  
    </body>  
</html>

manifest.json 模块权限配置勾选了NFC
避免打包之后刷卡会闪退

收起阅读 »