HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

动态修改app桌面图标

经过半年的潜心研究,发现dcound越来越强大,对dcound充满信心。

回归正题,主要是希望app里能增加一个动态修改app桌面图标的功能,如某宝在双11、双12时,桌面图标会改变,也有类似一些分区域的app,会在app桌面图标上显示当地城市的名称。

继续阅读 »

经过半年的潜心研究,发现dcound越来越强大,对dcound充满信心。

回归正题,主要是希望app里能增加一个动态修改app桌面图标的功能,如某宝在双11、双12时,桌面图标会改变,也有类似一些分区域的app,会在app桌面图标上显示当地城市的名称。

收起阅读 »

[解决]打开文件服务失败,请尝试拔掉数据线后重新连接手机

真机调试

连接ios测试时有时连不上,显示:

正在建立手机连接...
正在同步手机端程序文件...
打开文件服务失败,请尝试拔掉数据线后重新连接手机

摸索发现正确姿势是先连手机,再打开hbuilder。

ps.运行→真机→hbuilder基座测试,不用每次都等打包 。
psps.未受信任:设置→通用→设备管理→找到beijing那个信任。

继续阅读 »

连接ios测试时有时连不上,显示:

正在建立手机连接...
正在同步手机端程序文件...
打开文件服务失败,请尝试拔掉数据线后重新连接手机

摸索发现正确姿势是先连手机,再打开hbuilder。

ps.运行→真机→hbuilder基座测试,不用每次都等打包 。
psps.未受信任:设置→通用→设备管理→找到beijing那个信任。

收起阅读 »

h5+ 跨平台 app开发学习路线及对应视频教程

5+App开发 mui

《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »

《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

收起阅读 »

关于MUI中NumberBox任意浮点数、整数加减的优化

numbox 技术分享

最近刚有个数字输入框浮点数输入、加减的需求。

查询社区只有http://ask.dcloud.net.cn/article/477这一篇文章的建议是替换源码中parseInt为parseFloat,

但觉得这个方法并不完全解决js中浮点数相加结果异常的问题。

于是对mui.js中的numberbox部分进行适当修改,实现任意浮点数、整数加减的需求。

代码如下,可直接复制粘贴到mui.js8024行处进行替换:

 (function($) {  

    var touchSupport = ('ontouchstart' in document);  
    var tapEventName = touchSupport ? 'tap' : 'click';  
    var changeEventName = 'change';  
    var holderClassName = 'mui-numbox';  
    var plusClassSelector = '.mui-btn-numbox-plus,.mui-numbox-btn-plus';  
    var minusClassSelector = '.mui-btn-numbox-minus,.mui-numbox-btn-minus';  
    var inputClassSelector = '.mui-input-numbox,.mui-numbox-input';  

    var Numbox = $.Numbox = $.Class.extend({  
        /**  
         * 构造函数  
         **/  
        init: function(holder, options) {  
            var self = this;  
            if (!holder) {  
                throw "构造 numbox 时缺少容器元素";  
            }  
            self.holder = holder;  
            options = options || {};  
            options.step = parseFloat(options.step || 1);  
            self.options = options;  
            self.input = $.qsa(inputClassSelector, self.holder)[0];  
            self.plus = $.qsa(plusClassSelector, self.holder)[0];  
            self.minus = $.qsa(minusClassSelector, self.holder)[0];  
            self.checkValue();  
            self.initEvent();  
        },  
        /**  
         * 初始化事件绑定  
         **/  
        initEvent: function() {  
            var self = this;  
            var add = function(arg1,arg2){  
                    var r1,r2,m,n;   
                try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                m=Math.pow(10,Math.max(r1,r2));  
                n=(r1>=r2)?r1:r2;  
                return ((arg1*m+arg2*m)/m).toFixed(n);    
            };  

            var sub = function(arg1,arg2){  
                 var r1,r2,m,n;   
                 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                 m=Math.pow(10,Math.max(r1,r2));   
                 n=(r1>=r2)?r1:r2;   
                 return ((arg1*m-arg2*m)/m).toFixed(n);   
            };  

            self.plus.addEventListener(tapEventName, function(event) {  
                var val = add(parseFloat(self.input.value),self.options.step);   
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);   
            });  
            self.minus.addEventListener(tapEventName, function(event) {  
                var val = sub(parseFloat(self.input.value),self.options.step);  
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);  
            });  
            self.input.addEventListener(changeEventName, function(event) {  
                var val = self.input.value;   
                self.checkValue();  
                //触发顶层容器  
                $.trigger(self.holder, changeEventName, {  
                    value: val  
                 });  
            });  
        },  
        /**  
         * 获取当前值  
         **/  
        getValue: function() {  
            var self = this;  
            return parseFloat(self.input.value);  
        },  
        /**  
         * 验证当前值是法合法  
         **/  
        checkValue: function() {  
            var self = this;  
            var val = self.input.value;  
            if (val == null || val == '' || isNaN(val)) {  
                self.input.value = self.options.min || 0;  
                self.minus.disabled = self.options.min != null;  
            } else {  
                var val = parseFloat(val);  
                if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {  
                    val = self.options.max;  
                    self.plus.disabled = true;  
                } else {  
                    self.plus.disabled = false;  
                }  
                if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {  
                    val = self.options.min;  
                    self.minus.disabled = true;  
                } else {  
                    self.minus.disabled = false;  
                }  
                self.input.value = val;  
            }  
        },  
        /**  
         * 更新选项  
         **/  
        setOption: function(name, value) {  
            var self = this;  
            self.options[name] = value;  
        },  
        /**  
         * 动态设置新值  
         **/  
        setValue: function(value) {  
            this.input.value = value;  
            this.checkValue();  
        }  
    });  

    $.fn.numbox = function(options) {  
        var instanceArray = [];  
        //遍历选择的元素  
        this.each(function(i, element) {  
            if (element.numbox) {  
                return;  
            }  
            if (options) {  
                element.numbox = new Numbox(element, options);  
            } else {  
                var optionsText = element.getAttribute('data-numbox-options');  
                var options = optionsText ? JSON.parse(optionsText) : {};  
                options.step = element.getAttribute('data-numbox-step') || options.step;  
                options.min = element.getAttribute('data-numbox-min') || options.min;  
                options.max = element.getAttribute('data-numbox-max') || options.max;  
                element.numbox = new Numbox(element, options);  
            }  
        });  
        return this[0] ? this[0].numbox : null;  
    }  

    //自动处理 class='mui-locker' 的 dom  
    $.ready(function() {  
        $('.' + holderClassName).numbox();  
    });  

}(mui));
继续阅读 »

最近刚有个数字输入框浮点数输入、加减的需求。

查询社区只有http://ask.dcloud.net.cn/article/477这一篇文章的建议是替换源码中parseInt为parseFloat,

但觉得这个方法并不完全解决js中浮点数相加结果异常的问题。

于是对mui.js中的numberbox部分进行适当修改,实现任意浮点数、整数加减的需求。

代码如下,可直接复制粘贴到mui.js8024行处进行替换:

 (function($) {  

    var touchSupport = ('ontouchstart' in document);  
    var tapEventName = touchSupport ? 'tap' : 'click';  
    var changeEventName = 'change';  
    var holderClassName = 'mui-numbox';  
    var plusClassSelector = '.mui-btn-numbox-plus,.mui-numbox-btn-plus';  
    var minusClassSelector = '.mui-btn-numbox-minus,.mui-numbox-btn-minus';  
    var inputClassSelector = '.mui-input-numbox,.mui-numbox-input';  

    var Numbox = $.Numbox = $.Class.extend({  
        /**  
         * 构造函数  
         **/  
        init: function(holder, options) {  
            var self = this;  
            if (!holder) {  
                throw "构造 numbox 时缺少容器元素";  
            }  
            self.holder = holder;  
            options = options || {};  
            options.step = parseFloat(options.step || 1);  
            self.options = options;  
            self.input = $.qsa(inputClassSelector, self.holder)[0];  
            self.plus = $.qsa(plusClassSelector, self.holder)[0];  
            self.minus = $.qsa(minusClassSelector, self.holder)[0];  
            self.checkValue();  
            self.initEvent();  
        },  
        /**  
         * 初始化事件绑定  
         **/  
        initEvent: function() {  
            var self = this;  
            var add = function(arg1,arg2){  
                    var r1,r2,m,n;   
                try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                m=Math.pow(10,Math.max(r1,r2));  
                n=(r1>=r2)?r1:r2;  
                return ((arg1*m+arg2*m)/m).toFixed(n);    
            };  

            var sub = function(arg1,arg2){  
                 var r1,r2,m,n;   
                 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                 m=Math.pow(10,Math.max(r1,r2));   
                 n=(r1>=r2)?r1:r2;   
                 return ((arg1*m-arg2*m)/m).toFixed(n);   
            };  

            self.plus.addEventListener(tapEventName, function(event) {  
                var val = add(parseFloat(self.input.value),self.options.step);   
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);   
            });  
            self.minus.addEventListener(tapEventName, function(event) {  
                var val = sub(parseFloat(self.input.value),self.options.step);  
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);  
            });  
            self.input.addEventListener(changeEventName, function(event) {  
                var val = self.input.value;   
                self.checkValue();  
                //触发顶层容器  
                $.trigger(self.holder, changeEventName, {  
                    value: val  
                 });  
            });  
        },  
        /**  
         * 获取当前值  
         **/  
        getValue: function() {  
            var self = this;  
            return parseFloat(self.input.value);  
        },  
        /**  
         * 验证当前值是法合法  
         **/  
        checkValue: function() {  
            var self = this;  
            var val = self.input.value;  
            if (val == null || val == '' || isNaN(val)) {  
                self.input.value = self.options.min || 0;  
                self.minus.disabled = self.options.min != null;  
            } else {  
                var val = parseFloat(val);  
                if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {  
                    val = self.options.max;  
                    self.plus.disabled = true;  
                } else {  
                    self.plus.disabled = false;  
                }  
                if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {  
                    val = self.options.min;  
                    self.minus.disabled = true;  
                } else {  
                    self.minus.disabled = false;  
                }  
                self.input.value = val;  
            }  
        },  
        /**  
         * 更新选项  
         **/  
        setOption: function(name, value) {  
            var self = this;  
            self.options[name] = value;  
        },  
        /**  
         * 动态设置新值  
         **/  
        setValue: function(value) {  
            this.input.value = value;  
            this.checkValue();  
        }  
    });  

    $.fn.numbox = function(options) {  
        var instanceArray = [];  
        //遍历选择的元素  
        this.each(function(i, element) {  
            if (element.numbox) {  
                return;  
            }  
            if (options) {  
                element.numbox = new Numbox(element, options);  
            } else {  
                var optionsText = element.getAttribute('data-numbox-options');  
                var options = optionsText ? JSON.parse(optionsText) : {};  
                options.step = element.getAttribute('data-numbox-step') || options.step;  
                options.min = element.getAttribute('data-numbox-min') || options.min;  
                options.max = element.getAttribute('data-numbox-max') || options.max;  
                element.numbox = new Numbox(element, options);  
            }  
        });  
        return this[0] ? this[0].numbox : null;  
    }  

    //自动处理 class='mui-locker' 的 dom  
    $.ready(function() {  
        $('.' + holderClassName).numbox();  
    });  

}(mui));
收起阅读 »

个推中plus.push.getClientInfo()获取clientId为null的解决方法

1、android中删除所有关于小米推送的权限和配置。
2、删除个推中下面的服务,解决小米5手机中无法获取clientId的问题

 <service  
            android:name="com.igexin.download.DownloadService"  
            android:process=":pushservice"/>  
        <receiver android:name="com.igexin.download.DownloadReceiver">  
            <intent-filter>  
                <action android:name="android.net.conn.CONNECTIVITY_CHANGE"/>  
            </intent-filter>  
        </receiver>  
        <provider  
            android:name="com.igexin.download.DownloadProvider"  
            android:authorities="downloads.com.tengluo.zhxf"  
            android:exported="true"  
            android:process=":pushservice"/>  
        <receiver android:name="io.dcloud.feature.apsGt.GTNotificationReceiver">  
            <intent-filter>  
                <action android:name="android.intent.action.BOOT_COMPLETED"/>  
                <action android:name="com.tengluo.zfapp.__CREATE_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__REMOVE_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__CLEAR_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__CLILK_NOTIFICATION"/>  
            </intent-filter>  
        </receiver>
继续阅读 »

1、android中删除所有关于小米推送的权限和配置。
2、删除个推中下面的服务,解决小米5手机中无法获取clientId的问题

 <service  
            android:name="com.igexin.download.DownloadService"  
            android:process=":pushservice"/>  
        <receiver android:name="com.igexin.download.DownloadReceiver">  
            <intent-filter>  
                <action android:name="android.net.conn.CONNECTIVITY_CHANGE"/>  
            </intent-filter>  
        </receiver>  
        <provider  
            android:name="com.igexin.download.DownloadProvider"  
            android:authorities="downloads.com.tengluo.zhxf"  
            android:exported="true"  
            android:process=":pushservice"/>  
        <receiver android:name="io.dcloud.feature.apsGt.GTNotificationReceiver">  
            <intent-filter>  
                <action android:name="android.intent.action.BOOT_COMPLETED"/>  
                <action android:name="com.tengluo.zfapp.__CREATE_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__REMOVE_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__CLEAR_NOTIFICATION"/>  
                <action android:name="com.tengluo.zfapp.__CLILK_NOTIFICATION"/>  
            </intent-filter>  
        </receiver>
收起阅读 »

H5+ APP开发教程汇总(知识点+实战)

移动APP mui


《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »


《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

收起阅读 »

图片轮播动态跳转报错 Uncaught TypeError: Cannot read property '0' of undefined

通过手动点击,动态获取图片索引,并跳转到指定图片;
可以在执行mui('.mui-slider').slider().gotoItem(index);报错Uncaught TypeError: Cannot read property '0' of undefined;
经过测试发现gotoItem()参数必须为数字,要不然就会报错;
修改为:mui('.mui-slider').slider().gotoItem(parseInt(index)); 问题解决!

继续阅读 »

通过手动点击,动态获取图片索引,并跳转到指定图片;
可以在执行mui('.mui-slider').slider().gotoItem(index);报错Uncaught TypeError: Cannot read property '0' of undefined;
经过测试发现gotoItem()参数必须为数字,要不然就会报错;
修改为:mui('.mui-slider').slider().gotoItem(parseInt(index)); 问题解决!

收起阅读 »

头像裁剪的实现

头像裁剪

用法

分两个页面,一个页面头像页面,一个是裁剪页面。  
1、在头像页面可以用http://ask.dcloud.net.cn/article/12700这个获取图片地址,把图片地址传给裁剪页面。  
2、在裁剪页面先压缩图片,再用cropper插件进行裁剪操作

原码

第一步源码在上面的地址,  

第二步源码:  
    var $image = $('.port-img > img'); // 获取图片DOM  
    mui.plusReady(function() {  
        self = plus.webview.currentWebview();  
        var imgUrl = self.imgUrl; //获取上个页面传过来的图片地址  

        plus.zip.compressImage({ //压缩图片  
                src:imgUrl,  
                dst:"_doc/b.jpg",  
                overwrite:true,  
                width:"800px",  
                quality:20  
        },function(event) {  
                imgUrl = event.target;  
        },function(error) {  
                mui.toast("图片压缩错误")  
        });  
        $image.attr("src",imgUrl);  

        $image.cropper({ //生成裁剪框  
            aspectRatio: 1 / 1,   
            viewMode: 1, //裁剪框 只能在图片内移动  
            dragMode: "move", //背景移动  
            background: false, //关闭网络背景  
            minCanvasWidth: 100,  
            minCanvasHeight: 100  
        });  

        $("#infoSave").on("tap", function() { // 点击确定保存  
            getImg();  
        })  
    });  

    function getImg() {  
                // 把裁剪的图片转换为base64  
        var imgData64 = $image.cropper("getCroppedCanvas",{width:120,height:120}).toDataURL();  

        localStorage.setItem("CH_IMGDATA", imgData64);  // 我这里存放在本地,以便更新其他地方的头像  
        evalId("myInfo_modify.html", ['getImgData'])  
                mui.back(); // 最后关闭裁剪页面  
    }
继续阅读 »

用法

分两个页面,一个页面头像页面,一个是裁剪页面。  
1、在头像页面可以用http://ask.dcloud.net.cn/article/12700这个获取图片地址,把图片地址传给裁剪页面。  
2、在裁剪页面先压缩图片,再用cropper插件进行裁剪操作

原码

第一步源码在上面的地址,  

第二步源码:  
    var $image = $('.port-img > img'); // 获取图片DOM  
    mui.plusReady(function() {  
        self = plus.webview.currentWebview();  
        var imgUrl = self.imgUrl; //获取上个页面传过来的图片地址  

        plus.zip.compressImage({ //压缩图片  
                src:imgUrl,  
                dst:"_doc/b.jpg",  
                overwrite:true,  
                width:"800px",  
                quality:20  
        },function(event) {  
                imgUrl = event.target;  
        },function(error) {  
                mui.toast("图片压缩错误")  
        });  
        $image.attr("src",imgUrl);  

        $image.cropper({ //生成裁剪框  
            aspectRatio: 1 / 1,   
            viewMode: 1, //裁剪框 只能在图片内移动  
            dragMode: "move", //背景移动  
            background: false, //关闭网络背景  
            minCanvasWidth: 100,  
            minCanvasHeight: 100  
        });  

        $("#infoSave").on("tap", function() { // 点击确定保存  
            getImg();  
        })  
    });  

    function getImg() {  
                // 把裁剪的图片转换为base64  
        var imgData64 = $image.cropper("getCroppedCanvas",{width:120,height:120}).toDataURL();  

        localStorage.setItem("CH_IMGDATA", imgData64);  // 我这里存放在本地,以便更新其他地方的头像  
        evalId("myInfo_modify.html", ['getImgData'])  
                mui.back(); // 最后关闭裁剪页面  
    }
收起阅读 »

个推推送成功后手机通知栏下没有显示推送时间

个推SDK

个推推送成功后 安卓手机通知栏下没有显示推送时间。在那里可以设置修改样式的么?

个推推送成功后 安卓手机通知栏下没有显示推送时间。在那里可以设置修改样式的么?

关于textarea高度适应自增高

在引用mui的前提下,引用auto-textarea.js即可

当新增textarea节点时或者textarea回显数据时,手动刷新函数,或延迟执行(确保在文档渲染完毕之后执行)

在引用mui的前提下,引用auto-textarea.js即可

当新增textarea节点时或者textarea回显数据时,手动刷新函数,或延迟执行(确保在文档渲染完毕之后执行)

很欣赏这一套文件前置图标

如题,atom的这一套文件前置图标太赞了,不知道hbuilder有没有类似的图标重制计划?

鲜明的对比:

如题,atom的这一套文件前置图标太赞了,不知道hbuilder有没有类似的图标重制计划?

鲜明的对比:

安卓蓝牙通讯

蓝牙

摸索了一下,自己写了一个蓝牙串口连接接收数据的小示例。还是希望有大神告知如何开启多线程来接收数据。
如果要测试此代码需要自行引入vue.js。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title>webapp蓝牙连接</title>  
    </head>  

    <body>  
        <div id="app">  
            <input type="button" name="" id="" value="连接蓝牙" @click="turnOnBluetooth" />  
            <br>  
            <input type="button" name="" id="" value="断开蓝牙" @click="turnOffBluetooth" />  
            <br>  
            <input type="button" name="" id="" value="已配对的设备" @click="getConnetedDevices" />  
            <br>  
            <input type="button" name="" id="" value="搜索蓝牙" @click="findDevices" />  
            <br>  
            <br> 蓝牙状态:{{bluetoothStatusDesc}}<br> 已配对的设备:  

            <br>  
            <ul>  
                <li v-for="device in pairedDevices">  
                    名称:{{device.name}}<br> 地址:{{device.address}}  
                    <br>  
                    <input type="button" value="连接" @click="connDevice(device.address)" />  
                </li>  
            </ul>  
            发现的设备:<br>  
            <ul>  
                <li v-for="device in newDevices">  
                    名称:{{device.name}}<br> 地址:{{device.address}}<br>  
                    <input type="button" value="连接" @click="connDevice(device.address)" />  
                </li>  
            </ul>  
            接收的数据:  
            <div>  
                <span v-for="data in receiveDataArr">  
                    {{data}}&nbsp;  
                </span>  
            </div>  
        </div>  

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            // 监听plusready事件  
            document.addEventListener("plusready", function() {  
                var bluetoothTool = new BluetoothTool();  
                var mainActivity = plus.android.runtimeMainActivity();  
                var vm = new Vue({  
                    "el": "#app",  
                    data: {  
                        bluetoothStatus: false,  
                        pairedDevices: [],  
                        newDevices: [],  
                        receiveDataArr: []  
                    },  
                    methods: {  
                        getBluetoothStatus: function() {  
                            this.bluetoothStatus = bluetoothTool.getBluetoothStatus();  
                        },  
                        turnOnBluetooth: function() {  
                            var requestCode = 1;  
                            bluetoothTool.turnOnBluetooth(mainActivity, requestCode);  
                            var that = this;  
                            setTimeout(function() {  
                                that.getBluetoothStatus();  
                            }, 500);  
                        },  
                        turnOffBluetooth: function() {  
                            this.pairedDevices = [];  
                            this.newDevices = [];  
                            this.receiveDataArr = [];  
                            bluetoothTool.turnOffBluetooth();  
                            this.getBluetoothStatus();  
                        },  
                        getConnetedDevices: function() {  
                            this.pairedDevices = bluetoothTool.getConnetedDevices();  
                        },  
                        findDevices: function() {  
                            bluetoothTool.findDevices(mainActivity, this.newDevices);  
                        },  
                        connDevice: function(address) {  
                            var b = bluetoothTool.connDevice(mainActivity, address);  
                            if(b) {  
                                this.readData();  
                            }  
                        },  
                        readData: function() {  
                            bluetoothTool.readData(mainActivity, this.receiveDataCallback);  
                        },  
                        receiveDataCallback: function(data) {  
                            if(this.receiveDataArr.length >= 200) {  
                                this.receiveDataArr = [];  
                            }  
                            this.receiveDataArr.push(data);  
                        }  
                    },  
                    computed: {  
                        bluetoothStatusDesc: function() {  
                            return this.bluetoothStatus ? "已开启" : "已关闭";  
                        }  
                    }  
                });  
            }, false);  
        </script>  

        <script type="text/javascript">  
            var BluetoothTool = (function() {  
                function BluetoothTool() {  
                    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
                    this.mAdapter = BluetoothAdapter.getDefaultAdapter();  
                    this.BluetoothAdapter = BluetoothAdapter;  
                    this.BTSocket = null;  
                }  
                /**  
                 * 是否支持蓝牙  
                 * @return {boolean}  
                 */  
                BluetoothTool.prototype.isSupportBluetooth = function() {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null) {  
                        return true;  
                    }  
                    return false;  
                }  
                /**  
                 * 获取蓝牙的状态  
                 * @return {boolean} 是否已开启  
                 */  
                BluetoothTool.prototype.getBluetoothStatus = function() {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null) {  
                        return mAdapter.isEnabled();  
                    }  
                    return false;  
                }  

                /**  
                 * 打开蓝牙  
                 * @param activity  
                 * @param requestCode  
                 */  
                BluetoothTool.prototype.turnOnBluetooth = function(activity, requestCode) {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null && !mAdapter.isEnabled()) {  
                        var Intent = plus.android.importClass("android.content.Intent");  
                        var intent = new Intent(this.BluetoothAdapter.ACTION_REQUEST_ENABLE);  
                        activity.startActivityForResult(intent, requestCode);  
                    }  
                }  

                /**  
                 * 关闭蓝牙  
                 */  
                BluetoothTool.prototype.turnOffBluetooth = function() {  
                    if(this.mAdapter != null && this.mAdapter.isEnabled()) {  
                        this.mAdapter.disable();  
                        this.BTSocket = null;  
                    }  
                }  

                /**  
                 * 获取已经配对的设备  
                 * @return {Array} connetedDevices  
                 */  
                BluetoothTool.prototype.getConnetedDevices = function() {  
                    var mAdapter = this.mAdapter;  
                    var connetedDevices = [];  

                    //蓝牙连接android原生对象,是一个set集合  
                    var connetedDevicesAndroid = null;  
                    if(mAdapter != null && mAdapter.isEnabled()) {  
                        connetedDevicesAndroid = mAdapter.getBondedDevices();  
                    }  

                    if(!connetedDevicesAndroid) {  
                        return connetedDevices;  
                    }  

                    //遍历连接设备的set集合,转换为js数组  
                    var invoke = plus.android.invoke;  
                    var it = invoke(connetedDevicesAndroid, "iterator");  
                    while(plus.android.invoke(it, "hasNext")) {  
                        var device = plus.android.invoke(it, "next");  
                        connetedDevices.push({  
                            "name": plus.android.invoke(device, "getName"),  
                            "address": plus.android.invoke(device, "getAddress")  
                        });  
                    }  
                    return connetedDevices;  
                }  

                /**  
                 * 发现拉亚设备  
                 * @param {Object} activity 当前活动界面  
                 * @param {Object} newDevices 用于接收发现的设备  
                 */  
                BluetoothTool.prototype.findDevices = function(activity, newDevices) {  
                    var mAdapter = this.mAdapter;  

                    var IntentFilter = plus.android.importClass("android.content.IntentFilter");  
                    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
                    var filter = new IntentFilter();  
                    var BroadcastReceiver = plus.android.importClass("android.content.BroadcastReceiver");  

                    var BTReceiver = plus.android.implements("io.dcloud.android.content.BroadcastReceiver", {  
                        "onReceive": function(context, intent) {  
                            plus.android.importClass(context);  
                            plus.android.importClass(intent);  

                            var action = intent.getAction();  
                            //发现了设备  
                            if(BluetoothDevice.ACTION_FOUND == action) {  
                                //从Intent中获取设备的BluetoothDevice对象  
                                var device = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  
                                newDevices.push({  
                                    "name": plus.android.invoke(device, "getName"),  
                                    "address": plus.android.invoke(device, "getAddress")  
                                });  
                            }  
                        }  
                    });  

                    filter.addAction(BluetoothDevice.ACTION_FOUND);  
                    filter.addAction(this.BluetoothAdapter.ACTION_DISCOVERY_FINISHED);  
                    activity.registerReceiver(BTReceiver, filter);  
                    mAdapter.startDiscovery(); //开启搜索  
                }  

                /**  
                 * 根据蓝牙地址,连接设备  
                 * @param {Object} address  
                 * @return {Boolean}  
                 */  
                BluetoothTool.prototype.connDevice = function(activity, address) {  
                    var invoke = plus.android.invoke;  
                    var mAdapter = this.mAdapter;  
                    var device = invoke(mAdapter, "getRemoteDevice", address);  

                    var UUID = plus.android.importClass("java.util.UUID");  
                    var InputStream = plus.android.importClass("java.io.InputStream");  
                    var OutputStream = plus.android.importClass("java.io.OutputStream");  
                    var BluetoothSocket = plus.android.importClass("android.bluetooth.BluetoothSocket");  
                    var Toast = plus.android.importClass("android.widget.Toast");  

                    var MY_UUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");  
                    var BTSocket = null;  

                    try {  
                        BTSocket = invoke(device, "createRfcommSocketToServiceRecord", MY_UUID);  
                    } catch(e) {  
                        Toast.makeText(activity, "连接失败,获取Socket失败!", Toast.LENGTH_SHORT).show();  
                        return false;  
                    }  
                    try {  
                        invoke(BTSocket, "connect");  
                        Toast.makeText(activity, "连接成功", Toast.LENGTH_SHORT).show();  
                    } catch(e) {  
                        Toast.makeText(activity, "连接失败", Toast.LENGTH_SHORT).show();  
                        try {  
                            BTSocket.close();  
                            BTSocket = null;  
                        } catch(e1) {  

                        }  
                        return false;  
                    }  
                    this.BTSocket = BTSocket;  
                    return true;  
                }  

                /**  
                 * 读取数据  
                 * @param {Object} activity  
                 * @param {Function} callback  
                 * @return {Boolean}  
                 */  
                BluetoothTool.prototype.readData = function(activity, callback) {  
                    var invoke = plus.android.invoke;  
                    var BTInStream = null,  
                        BTOutStream = null,  
                        BTSocket = this.BTSocket;  
                    var Toast = plus.android.importClass("android.widget.Toast");  
                    if(!BTSocket) {  
                        Toast.makeText(activity, "请先连接蓝牙设备!", Toast.LENGTH_SHORT).show();  
                        return false;  
                    }  
                    try {  
                        BTInStream = invoke(BTSocket, "getInputStream");  
                        BTOutStream = invoke(BTSocket, "getOutputStream");  
                    } catch(e) {  
                        Toast.makeText(activity, "创建输入输出流失败!", Toast.LENGTH_SHORT).show();  
                        try {  
                            BTSocket.close();  
                            BTSocket = null;  
                        } catch(e1) {}  
                        return false;  
                    }  

                    var readThreadState = false;  
                    readData();  
                    return true;  

                    /**  
                     * 模拟java多线程读取数据  
                     */  
                    function readData() {  
                        if(readThreadState) {  
                            return;  
                        }  
                        var count = 0;  
                        while(invoke(BTInStream, "available") !== 0) {  
                            readThreadState = true;  
                            count++;  
                            var data = invoke(BTInStream, "read");  
                            callback && callback(data, count);  
                            if(count >= 100) {  
                                break;  
                            }  
                        }  
                        readThreadState = false;  
                        requestAnimationFrame(readData);  
                    }  
                }  

                return BluetoothTool;  
            })();  
        </script>  
    </body>  

</html>
继续阅读 »

摸索了一下,自己写了一个蓝牙串口连接接收数据的小示例。还是希望有大神告知如何开启多线程来接收数据。
如果要测试此代码需要自行引入vue.js。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title>webapp蓝牙连接</title>  
    </head>  

    <body>  
        <div id="app">  
            <input type="button" name="" id="" value="连接蓝牙" @click="turnOnBluetooth" />  
            <br>  
            <input type="button" name="" id="" value="断开蓝牙" @click="turnOffBluetooth" />  
            <br>  
            <input type="button" name="" id="" value="已配对的设备" @click="getConnetedDevices" />  
            <br>  
            <input type="button" name="" id="" value="搜索蓝牙" @click="findDevices" />  
            <br>  
            <br> 蓝牙状态:{{bluetoothStatusDesc}}<br> 已配对的设备:  

            <br>  
            <ul>  
                <li v-for="device in pairedDevices">  
                    名称:{{device.name}}<br> 地址:{{device.address}}  
                    <br>  
                    <input type="button" value="连接" @click="connDevice(device.address)" />  
                </li>  
            </ul>  
            发现的设备:<br>  
            <ul>  
                <li v-for="device in newDevices">  
                    名称:{{device.name}}<br> 地址:{{device.address}}<br>  
                    <input type="button" value="连接" @click="connDevice(device.address)" />  
                </li>  
            </ul>  
            接收的数据:  
            <div>  
                <span v-for="data in receiveDataArr">  
                    {{data}}&nbsp;  
                </span>  
            </div>  
        </div>  

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            // 监听plusready事件  
            document.addEventListener("plusready", function() {  
                var bluetoothTool = new BluetoothTool();  
                var mainActivity = plus.android.runtimeMainActivity();  
                var vm = new Vue({  
                    "el": "#app",  
                    data: {  
                        bluetoothStatus: false,  
                        pairedDevices: [],  
                        newDevices: [],  
                        receiveDataArr: []  
                    },  
                    methods: {  
                        getBluetoothStatus: function() {  
                            this.bluetoothStatus = bluetoothTool.getBluetoothStatus();  
                        },  
                        turnOnBluetooth: function() {  
                            var requestCode = 1;  
                            bluetoothTool.turnOnBluetooth(mainActivity, requestCode);  
                            var that = this;  
                            setTimeout(function() {  
                                that.getBluetoothStatus();  
                            }, 500);  
                        },  
                        turnOffBluetooth: function() {  
                            this.pairedDevices = [];  
                            this.newDevices = [];  
                            this.receiveDataArr = [];  
                            bluetoothTool.turnOffBluetooth();  
                            this.getBluetoothStatus();  
                        },  
                        getConnetedDevices: function() {  
                            this.pairedDevices = bluetoothTool.getConnetedDevices();  
                        },  
                        findDevices: function() {  
                            bluetoothTool.findDevices(mainActivity, this.newDevices);  
                        },  
                        connDevice: function(address) {  
                            var b = bluetoothTool.connDevice(mainActivity, address);  
                            if(b) {  
                                this.readData();  
                            }  
                        },  
                        readData: function() {  
                            bluetoothTool.readData(mainActivity, this.receiveDataCallback);  
                        },  
                        receiveDataCallback: function(data) {  
                            if(this.receiveDataArr.length >= 200) {  
                                this.receiveDataArr = [];  
                            }  
                            this.receiveDataArr.push(data);  
                        }  
                    },  
                    computed: {  
                        bluetoothStatusDesc: function() {  
                            return this.bluetoothStatus ? "已开启" : "已关闭";  
                        }  
                    }  
                });  
            }, false);  
        </script>  

        <script type="text/javascript">  
            var BluetoothTool = (function() {  
                function BluetoothTool() {  
                    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
                    this.mAdapter = BluetoothAdapter.getDefaultAdapter();  
                    this.BluetoothAdapter = BluetoothAdapter;  
                    this.BTSocket = null;  
                }  
                /**  
                 * 是否支持蓝牙  
                 * @return {boolean}  
                 */  
                BluetoothTool.prototype.isSupportBluetooth = function() {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null) {  
                        return true;  
                    }  
                    return false;  
                }  
                /**  
                 * 获取蓝牙的状态  
                 * @return {boolean} 是否已开启  
                 */  
                BluetoothTool.prototype.getBluetoothStatus = function() {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null) {  
                        return mAdapter.isEnabled();  
                    }  
                    return false;  
                }  

                /**  
                 * 打开蓝牙  
                 * @param activity  
                 * @param requestCode  
                 */  
                BluetoothTool.prototype.turnOnBluetooth = function(activity, requestCode) {  
                    var mAdapter = this.mAdapter;  
                    if(mAdapter != null && !mAdapter.isEnabled()) {  
                        var Intent = plus.android.importClass("android.content.Intent");  
                        var intent = new Intent(this.BluetoothAdapter.ACTION_REQUEST_ENABLE);  
                        activity.startActivityForResult(intent, requestCode);  
                    }  
                }  

                /**  
                 * 关闭蓝牙  
                 */  
                BluetoothTool.prototype.turnOffBluetooth = function() {  
                    if(this.mAdapter != null && this.mAdapter.isEnabled()) {  
                        this.mAdapter.disable();  
                        this.BTSocket = null;  
                    }  
                }  

                /**  
                 * 获取已经配对的设备  
                 * @return {Array} connetedDevices  
                 */  
                BluetoothTool.prototype.getConnetedDevices = function() {  
                    var mAdapter = this.mAdapter;  
                    var connetedDevices = [];  

                    //蓝牙连接android原生对象,是一个set集合  
                    var connetedDevicesAndroid = null;  
                    if(mAdapter != null && mAdapter.isEnabled()) {  
                        connetedDevicesAndroid = mAdapter.getBondedDevices();  
                    }  

                    if(!connetedDevicesAndroid) {  
                        return connetedDevices;  
                    }  

                    //遍历连接设备的set集合,转换为js数组  
                    var invoke = plus.android.invoke;  
                    var it = invoke(connetedDevicesAndroid, "iterator");  
                    while(plus.android.invoke(it, "hasNext")) {  
                        var device = plus.android.invoke(it, "next");  
                        connetedDevices.push({  
                            "name": plus.android.invoke(device, "getName"),  
                            "address": plus.android.invoke(device, "getAddress")  
                        });  
                    }  
                    return connetedDevices;  
                }  

                /**  
                 * 发现拉亚设备  
                 * @param {Object} activity 当前活动界面  
                 * @param {Object} newDevices 用于接收发现的设备  
                 */  
                BluetoothTool.prototype.findDevices = function(activity, newDevices) {  
                    var mAdapter = this.mAdapter;  

                    var IntentFilter = plus.android.importClass("android.content.IntentFilter");  
                    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
                    var filter = new IntentFilter();  
                    var BroadcastReceiver = plus.android.importClass("android.content.BroadcastReceiver");  

                    var BTReceiver = plus.android.implements("io.dcloud.android.content.BroadcastReceiver", {  
                        "onReceive": function(context, intent) {  
                            plus.android.importClass(context);  
                            plus.android.importClass(intent);  

                            var action = intent.getAction();  
                            //发现了设备  
                            if(BluetoothDevice.ACTION_FOUND == action) {  
                                //从Intent中获取设备的BluetoothDevice对象  
                                var device = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  
                                newDevices.push({  
                                    "name": plus.android.invoke(device, "getName"),  
                                    "address": plus.android.invoke(device, "getAddress")  
                                });  
                            }  
                        }  
                    });  

                    filter.addAction(BluetoothDevice.ACTION_FOUND);  
                    filter.addAction(this.BluetoothAdapter.ACTION_DISCOVERY_FINISHED);  
                    activity.registerReceiver(BTReceiver, filter);  
                    mAdapter.startDiscovery(); //开启搜索  
                }  

                /**  
                 * 根据蓝牙地址,连接设备  
                 * @param {Object} address  
                 * @return {Boolean}  
                 */  
                BluetoothTool.prototype.connDevice = function(activity, address) {  
                    var invoke = plus.android.invoke;  
                    var mAdapter = this.mAdapter;  
                    var device = invoke(mAdapter, "getRemoteDevice", address);  

                    var UUID = plus.android.importClass("java.util.UUID");  
                    var InputStream = plus.android.importClass("java.io.InputStream");  
                    var OutputStream = plus.android.importClass("java.io.OutputStream");  
                    var BluetoothSocket = plus.android.importClass("android.bluetooth.BluetoothSocket");  
                    var Toast = plus.android.importClass("android.widget.Toast");  

                    var MY_UUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");  
                    var BTSocket = null;  

                    try {  
                        BTSocket = invoke(device, "createRfcommSocketToServiceRecord", MY_UUID);  
                    } catch(e) {  
                        Toast.makeText(activity, "连接失败,获取Socket失败!", Toast.LENGTH_SHORT).show();  
                        return false;  
                    }  
                    try {  
                        invoke(BTSocket, "connect");  
                        Toast.makeText(activity, "连接成功", Toast.LENGTH_SHORT).show();  
                    } catch(e) {  
                        Toast.makeText(activity, "连接失败", Toast.LENGTH_SHORT).show();  
                        try {  
                            BTSocket.close();  
                            BTSocket = null;  
                        } catch(e1) {  

                        }  
                        return false;  
                    }  
                    this.BTSocket = BTSocket;  
                    return true;  
                }  

                /**  
                 * 读取数据  
                 * @param {Object} activity  
                 * @param {Function} callback  
                 * @return {Boolean}  
                 */  
                BluetoothTool.prototype.readData = function(activity, callback) {  
                    var invoke = plus.android.invoke;  
                    var BTInStream = null,  
                        BTOutStream = null,  
                        BTSocket = this.BTSocket;  
                    var Toast = plus.android.importClass("android.widget.Toast");  
                    if(!BTSocket) {  
                        Toast.makeText(activity, "请先连接蓝牙设备!", Toast.LENGTH_SHORT).show();  
                        return false;  
                    }  
                    try {  
                        BTInStream = invoke(BTSocket, "getInputStream");  
                        BTOutStream = invoke(BTSocket, "getOutputStream");  
                    } catch(e) {  
                        Toast.makeText(activity, "创建输入输出流失败!", Toast.LENGTH_SHORT).show();  
                        try {  
                            BTSocket.close();  
                            BTSocket = null;  
                        } catch(e1) {}  
                        return false;  
                    }  

                    var readThreadState = false;  
                    readData();  
                    return true;  

                    /**  
                     * 模拟java多线程读取数据  
                     */  
                    function readData() {  
                        if(readThreadState) {  
                            return;  
                        }  
                        var count = 0;  
                        while(invoke(BTInStream, "available") !== 0) {  
                            readThreadState = true;  
                            count++;  
                            var data = invoke(BTInStream, "read");  
                            callback && callback(data, count);  
                            if(count >= 100) {  
                                break;  
                            }  
                        }  
                        readThreadState = false;  
                        requestAnimationFrame(readData);  
                    }  
                }  

                return BluetoothTool;  
            })();  
        </script>  
    </body>  

</html>
收起阅读 »