文章 - DCloud问答

希望DCloud团队开发Linux版本的HBuilder

尊敬的DCloud团队，HBuilder是我见过的最强大的Web开发IDE，而且完全免费，真心非常喜欢。可惜没有Linux版本的HBuilder，希望强大的DCloud团队能够开发出Ubuntu版本的HBuilder。Please

<header class="mui-bar mui-bar-transparent bg-color" id="header">
<h1 class="mui-title">橙汁-2971611409</h1>
</header>

<div class="mui-content">
<div class="box">
<img src="img/logo1.jpg"/>
</div>
<div style="height: 1000px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
// 创建加载内容窗口
var topoffset='45px';
var header=document.getElementById("header");
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);
header.style.height=topoffset+'px';
header.style.paddingTop=(topoffset-45)+'px';
}
});
</script>
把这行代码放到json文件里面的代码视图

"ImmersedStatusbar": true,
</body></html>

继续阅读 »

动态加载 welcome 欢迎主页

index 页面  
<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
    mui.init();  
    mui.plusReady(function() {  
    //引导页面-0  
    var guide = plus.storage.getItem("guide");  
    if(guide) {  
    return;  
    } else {  
    mui.openWindow({  
    url: "guide.html",  
    id: "guide",  
    show: {  
    autoShow: true, //页面loaded事件发生后自动显示，默认为true    
    aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；    
    duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；    
    }  
    });  
    }  
    });  
    </script>  
    </body>  
</html>

guide 页面  
    <!DOCTYPE html>  
    <html>  

        <head>  
            <meta charset="utf-8">  
            <title></title>  
            <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
            <meta name="apple-mobile-web-app-capable" content="yes">  
            <meta name="apple-mobile-web-app-status-bar-style" content="black">  
            <link rel="stylesheet" href="css/mui.min.css">  
        </head>  
        <body>  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div class="mui-slider-group">  
                    <!-- 第一张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner.jpg);">  
                    </div>  
                    <!-- 第二张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner01.jpg);">  
                    </div>  
                    <!-- 第三张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner02.jpg);">  
                    </div>  
                    <!-- 第四张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner03.jpg);">  
                        <button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>  
                    </div>  
                </div>  
            </div>  
            <script src="js/mui.min.js"></script>  
            <script>  
            mui.init();  
                mui.init();  
        getPicture();  
        function getPicture() {  
        var template='';  
        var btn='';  
        var slider = mui("#slider");  
        var gallery=document.getElementById("slider-group")  
        mui.ajax('http://127.0.0.1/app/home/index.php?r=advertiese/get-home-ad',{  
            dataType:'json',//服务器返回json格式数据  
            type:'get',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                console.log(JSON.stringify(data));  
                var ret=data.response;  
                var result=data.result;  
                var website='http://10.2.5.76/app/home/';  
                if (ret==200) {  

                          mui.each(result,function(index,item){   
                                var para=document.createElement("div");  
                                 template='<div class="mui-slider-item" style="background-image: url('+website+item.content+');">'  
                                 +'</div>';  

                                 gallery.innerHTML+=template;  

                                });  
                                 btn='<button id="enter" class="mui-btn mui-btn-outlined">'  
                                 +"立即体验"  
                                 +'</button>';  
                                 gallery.innerHTML+=btn;  
                                 slider.slider({  
                                    interval: 5000  
                                });  
                                enter();  
                           }else{  
                            slider.slider({  
                            interval: 0  
                            });   
                            }  
                            },  
                            error:function(xhr,type,errorThrown){  

                            }  
                           });  
                            }  

        function enter () {  
            (function($,doc) {  
                    var enterButton = doc.querySelector('#enter');  
                    enterButton.addEventListener('tap', function(event) {  
                        plus.webview.currentWebview().close();  
                        plus.storage.setItem("guide", plus.runtime.version);  
                    }, false);  
                    $.plusReady(function() {  
                        plus.navigator.closeSplashscreen();  
                    });  
                }(mui, document));  
        }  
            </script>  
        </body>  
    </html>

继续阅读 »

index 页面  
<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
    mui.init();  
    mui.plusReady(function() {  
    //引导页面-0  
    var guide = plus.storage.getItem("guide");  
    if(guide) {  
    return;  
    } else {  
    mui.openWindow({  
    url: "guide.html",  
    id: "guide",  
    show: {  
    autoShow: true, //页面loaded事件发生后自动显示，默认为true    
    aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；    
    duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；    
    }  
    });  
    }  
    });  
    </script>  
    </body>  
</html>

guide 页面  
    <!DOCTYPE html>  
    <html>  

        <head>  
            <meta charset="utf-8">  
            <title></title>  
            <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
            <meta name="apple-mobile-web-app-capable" content="yes">  
            <meta name="apple-mobile-web-app-status-bar-style" content="black">  
            <link rel="stylesheet" href="css/mui.min.css">  
        </head>  
        <body>  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div class="mui-slider-group">  
                    <!-- 第一张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner.jpg);">  
                    </div>  
                    <!-- 第二张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner01.jpg);">  
                    </div>  
                    <!-- 第三张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner02.jpg);">  
                    </div>  
                    <!-- 第四张 -->  
                    <div class="mui-slider-item" style="background-image: url(img/guide/banner03.jpg);">  
                        <button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>  
                    </div>  
                </div>  
            </div>  
            <script src="js/mui.min.js"></script>  
            <script>  
            mui.init();  
                mui.init();  
        getPicture();  
        function getPicture() {  
        var template='';  
        var btn='';  
        var slider = mui("#slider");  
        var gallery=document.getElementById("slider-group")  
        mui.ajax('http://127.0.0.1/app/home/index.php?r=advertiese/get-home-ad',{  
            dataType:'json',//服务器返回json格式数据  
            type:'get',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                console.log(JSON.stringify(data));  
                var ret=data.response;  
                var result=data.result;  
                var website='http://10.2.5.76/app/home/';  
                if (ret==200) {  

                          mui.each(result,function(index,item){   
                                var para=document.createElement("div");  
                                 template='<div class="mui-slider-item" style="background-image: url('+website+item.content+');">'  
                                 +'</div>';  

                                 gallery.innerHTML+=template;  

                                });  
                                 btn='<button id="enter" class="mui-btn mui-btn-outlined">'  
                                 +"立即体验"  
                                 +'</button>';  
                                 gallery.innerHTML+=btn;  
                                 slider.slider({  
                                    interval: 5000  
                                });  
                                enter();  
                           }else{  
                            slider.slider({  
                            interval: 0  
                            });   
                            }  
                            },  
                            error:function(xhr,type,errorThrown){  

                            }  
                           });  
                            }  

        function enter () {  
            (function($,doc) {  
                    var enterButton = doc.querySelector('#enter');  
                    enterButton.addEventListener('tap', function(event) {  
                        plus.webview.currentWebview().close();  
                        plus.storage.setItem("guide", plus.runtime.version);  
                    }, false);  
                    $.plusReady(function() {  
                        plus.navigator.closeSplashscreen();  
                    });  
                }(mui, document));  
        }  
            </script>  
        </body>  
    </html>

收起阅读 »

slider动态加载

html

    <div id="slider" class="mui-slider" style="height:220px;">  
                <div class="mui-slider-group mui-slider-loop" id="gallery">  

                </div>  
                <div class="mui-slider-indicator" id="indicator">  
                </div>  
            </div>

js

    function Home_slider() {  
        var first='';  
        var last='';  
        var middle='';  
        var gallerys=document.getElementById("gallery");  
        var elements=document.getElementById("indicator");  
        var slider = mui("#slider");  
        mui.ajax('http://127.0.0.1/app/home/index.php?r=ad/get-home-ad',{  
            dataType:'json',//服务器返回json格式数据  
            type:'get',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                console.log(JSON.stringify(data));  
                var ret=data.response;  
                var result=data.result;  
                var website='http://127.0.0.1/app/home/';  
                if (ret==200) {  
                  while(gallerys.hasChildNodes())   
                          {  
                          gallerys.removeChild(gallerys.firstChild);  
                          }  
                          var i=0;  
                          mui.each(result,function(index,item){   
                                i++;  
                                var para=document.createElement("div");  
                                if (i==1) {  
                                 para.className='mui-indicator mui-active';   
                                 elements.appendChild(para);  
                                 first='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }else{  
                                 para.className='mui-indicator';  
                                 elements.appendChild(para);  
                                 if (i==4) {  
                                 last='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                 }  
                                  middle='<div class="mui-slider-item">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }  
                                 gallerys.innerHTML+=first;  
                                 gallerys.innerHTML+=middle;  
                                 gallerys.innerHTML+=last;  
                                });  
                                slider.slider({  
                                    interval: 5000  
                                });  
                            }else{  
                            slider.slider({  
                            interval: 0  
                            });   
                            }  
                            },  
                            error:function(xhr,type,errorThrown){  

                            }  
                           });  
                            }

继续阅读 »

html

    <div id="slider" class="mui-slider" style="height:220px;">  
                <div class="mui-slider-group mui-slider-loop" id="gallery">  

                </div>  
                <div class="mui-slider-indicator" id="indicator">  
                </div>  
            </div>

js

    function Home_slider() {  
        var first='';  
        var last='';  
        var middle='';  
        var gallerys=document.getElementById("gallery");  
        var elements=document.getElementById("indicator");  
        var slider = mui("#slider");  
        mui.ajax('http://127.0.0.1/app/home/index.php?r=ad/get-home-ad',{  
            dataType:'json',//服务器返回json格式数据  
            type:'get',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                console.log(JSON.stringify(data));  
                var ret=data.response;  
                var result=data.result;  
                var website='http://127.0.0.1/app/home/';  
                if (ret==200) {  
                  while(gallerys.hasChildNodes())   
                          {  
                          gallerys.removeChild(gallerys.firstChild);  
                          }  
                          var i=0;  
                          mui.each(result,function(index,item){   
                                i++;  
                                var para=document.createElement("div");  
                                if (i==1) {  
                                 para.className='mui-indicator mui-active';   
                                 elements.appendChild(para);  
                                 first='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }else{  
                                 para.className='mui-indicator';  
                                 elements.appendChild(para);  
                                 if (i==4) {  
                                 last='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                 }  
                                  middle='<div class="mui-slider-item">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }  
                                 gallerys.innerHTML+=first;  
                                 gallerys.innerHTML+=middle;  
                                 gallerys.innerHTML+=last;  
                                });  
                                slider.slider({  
                                    interval: 5000  
                                });  
                            }else{  
                            slider.slider({  
                            interval: 0  
                            });   
                            }  
                            },  
                            error:function(xhr,type,errorThrown){  

                            }  
                           });  
                            }

收起阅读 »

关于html5+定位的有关经验

定位

搞了两天,终于把ios跟android端的定位搞明白了,直接看代码
//定位的代码要写在plusReady()里面,而且不能用mui自带的mui.plusReady(){}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}

function plusReady(){
/
android端跟ios端定位的代码是不一样的,要不然获取的地址会不准
/
if(plus.os.name == 'Android'){
var mapObj = new plus.maps.Map('allmap');

    var getGPS = mapObj.getUserLocation( function ( state, point ){  
        if( 0 == state ){  

            plus.maps.Map.reverseGeocode(point1,{},function(event){  
                var address = event.address;  // 转换后的地理位置  

                console.log("Address:"+address);  
                $('#location').text(address);  

            })  
            clientPoint.longitude = point.longitude;  
            clientPoint.latitude = point.latitude;  
        }else{  

        }  
    } );  
}  
else{  
    plus.geolocation.getCurrentPosition(function(position){  
    var point1 = new plus.maps.Point(position.coords.longitude,position.coords.latitude);  
    clientPoint.longitude = position.coords.longitude;  
    clientPoint.latitude = position.coords.latitude;  
    plus.maps.Map.reverseGeocode(point1,{},function(event){  
            var address = event.address;  // 转换后的地理位置  
            var point = event.coord;  // 转换后的坐标信息  
            var coordType = event.coordType;    // 转换后的坐标系类型  
            console.log("Address:"+address);  
            $('#location').text(address);  
            console.log(JSON.stringify(event));  
        })  
    }, function ( e ) {  

    }, {geocode:false} );  
}

}

继续阅读 »

搞了两天,终于把ios跟android端的定位搞明白了,直接看代码
//定位的代码要写在plusReady()里面,而且不能用mui自带的mui.plusReady(){}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}

function plusReady(){
/
android端跟ios端定位的代码是不一样的,要不然获取的地址会不准
/
if(plus.os.name == 'Android'){
var mapObj = new plus.maps.Map('allmap');

    var getGPS = mapObj.getUserLocation( function ( state, point ){  
        if( 0 == state ){  

            plus.maps.Map.reverseGeocode(point1,{},function(event){  
                var address = event.address;  // 转换后的地理位置  

                console.log("Address:"+address);  
                $('#location').text(address);  

            })  
            clientPoint.longitude = point.longitude;  
            clientPoint.latitude = point.latitude;  
        }else{  

        }  
    } );  
}  
else{  
    plus.geolocation.getCurrentPosition(function(position){  
    var point1 = new plus.maps.Point(position.coords.longitude,position.coords.latitude);  
    clientPoint.longitude = position.coords.longitude;  
    clientPoint.latitude = position.coords.latitude;  
    plus.maps.Map.reverseGeocode(point1,{},function(event){  
            var address = event.address;  // 转换后的地理位置  
            var point = event.coord;  // 转换后的坐标信息  
            var coordType = event.coordType;    // 转换后的坐标系类型  
            console.log("Address:"+address);  
            $('#location').text(address);  
            console.log(JSON.stringify(event));  
        })  
    }, function ( e ) {  

    }, {geocode:false} );  
}

}

收起阅读 »

N.JS BLE设备蓝牙4.0 扫描分享

复制后稍微改一改就能用功能是绝对好用的代码也都加了错误判断不是单单实现一个demo功能而已
里面有几个坑的地方我都填好了不希望你门在花时间去踩坑

代码贴在这里会出现""双引号乱码和 <> 尖括号乱码所以发附件自己下载查看

继续阅读 »

mui的tap事件封装成anguar指令

tap

ngModule.directive('ngTap', ['$parse',function($parse) {
return {
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr["ngTap"]);
return function ngEventHandler(scope, elem) {
elem[0].addEventListener("tap",function(e){
var callback = function(e) {
fn(scope, {$event:e});
};
scope.$apply(callback);
});

            };  
        }  
    };  
}]);

继续阅读 »

ngModule.directive('ngTap', ['$parse',function($parse) {
return {
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr["ngTap"]);
return function ngEventHandler(scope, elem) {
elem[0].addEventListener("tap",function(e){
var callback = function(e) {
fn(scope, {$event:e});
};
scope.$apply(callback);
});

            };  
        }  
    };  
}]);

收起阅读 »

angualr+mui对<input type="file" />图片上传的onchange事件的封装

angular+mui点击事件无法触发脏检查的问题，通过angular指令对原生js的onchange事件的封装解决这个问题
ngModule.directive('fileInput', ['$parse',function($parse) {
return {
restrict: "EA",
template: "<input type='file'/>",
replace: true,
link: function (scope, element, attrs) {
var modelGet = $parse(attrs.fileInput);
var modelSet = modelGet.assign;
var onChange = $parse(attrs.onChange);
var updateModel = function () {
scope.$apply(function () {
modelSet(scope, element[0].files[0]);
onChange(scope);
});
};
element.bind('change', updateModel);
}
};
}])

继续阅读 »

【示例】内置浏览器titleNView版

icon titleNView 内置浏览器浏览器 Webview HTML5+

需求简述

在手机应用内，可以访问外部的网站信息。通常用于推广信息以及商城的活动页等。

实现思路

浏览器

WebView是基于手机webkit内核浏览器封装的一个组件，无论是本地的还是网络的html都可以加载，可以将其视作一个浏览器。
html5plus封装了Webview模块，那么基本的浏览器就有了。

基本操作

浏览器的使用，最基本的操作，大致如下：

前进
后退
刷新
关闭

在html5plus环境下，操作的就是WebviewObject。现有的API，完全可以满足这些基本操作。
Webview窗口对象

菜单栏

titleNView是HBuilder8.8更新发布时，html5plus新增的一个与Webview关联的原生组件。
该组件提供了更多的配置，方便进行按钮的布局，并且可以配置进度条等，那么菜单栏就有了。

布局

因为不是真的开发一款浏览器，布局直接从简。功能按钮排布在顶部的titleNView上，剩下的Webview区域用于展示页面内容。

具体实现

创建浏览器

创建Webview直接调用相关API即可，这里就不再详细说明了，关键在于titleNView的配置。

给菜单栏添加按钮

阅读titleNView中标题栏上的自定义按钮相关的API说明，按钮的文本是可以使用unicode字符的。
推荐上Iconfont-阿里巴巴矢量图标库下载所需的矢量图，并将字体文件放在工程目录下。

注意：这里配置icon时，有个需要注意的地方。比如后退箭头，从浏览器中获取的unicode码是"\e603"，但是配置的时候，需要填写为"\ue603"才能被原生层正确解析。

buttons: [{ //后退按钮  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue603',  
    onclick: _self.back.bind(_self) //指定函数的上下文为browser，否则是当前这个对象；  
}, { //前进箭头  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue602',  
    onclick: _self.forward.bind(_self)  
}, { //关闭按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue601',  
    onclick: _self.close.bind(_self)  
}, { //刷新按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue600',  
    onclick: _self.reload.bind(_self)  
}]

实现按钮功能

打开浏览器

// 显示浏览器  
browser.show = function(url) {  
    url = url || 'http://www.dcloud.io/'; //默认使用DCloud官网  
    this.webview.loadURL(url);  
    this.webview.show('slide-in-right');  
};

这里采用预加载方案，打开浏览器时，加载目标地址。

前进

// 前进  
browser.forward = function() {  
    var _self = this;  
    _self.webview.canForward(function(event) {  
        if(event.canForward) {  
            _self.webview.forward();  
        } else {  
            plus.nativeUI.toast('没有可前进的地址');  
        }  
    });  
};

首先要检测，是否可以前进。不能前进，就做出相应的提示。

后退

// 后退  
browser.back = function() {  
    var _self = this;  
    _self.webview.canBack(function(event) {  
        console.log('event:', event)  
        if(event.canBack) {  
            _self.webview.back();  
        } else {  
            _self.close();  
        }  
    });  
};

与前进同理，先检查是否可以后退，然后再执行相关的逻辑。

刷新

// 刷新  
browser.reload = function() {  
    this.webview.reload(true);  
};

刷新就很简单了，直接调用相关API即可。

关闭

// 关闭  
browser.close = function() {  
    this.webview.hide('slide-out-right');  
    this.webview.clear();  
};

关闭操作中，由于是使用预加载方案，所以选择隐藏了Webview，然后清空了Webview中加载的内容。
实际开发中，根据实际业务需求进行调整即可。

效果图及源码

下载附件中的文件，直接解压真机运行即可体验。

继续阅读 »

需求简述

在手机应用内，可以访问外部的网站信息。通常用于推广信息以及商城的活动页等。

实现思路

浏览器

WebView是基于手机webkit内核浏览器封装的一个组件，无论是本地的还是网络的html都可以加载，可以将其视作一个浏览器。
html5plus封装了Webview模块，那么基本的浏览器就有了。

基本操作

浏览器的使用，最基本的操作，大致如下：

前进
后退
刷新
关闭

在html5plus环境下，操作的就是WebviewObject。现有的API，完全可以满足这些基本操作。
Webview窗口对象

菜单栏

titleNView是HBuilder8.8更新发布时，html5plus新增的一个与Webview关联的原生组件。
该组件提供了更多的配置，方便进行按钮的布局，并且可以配置进度条等，那么菜单栏就有了。

布局

因为不是真的开发一款浏览器，布局直接从简。功能按钮排布在顶部的titleNView上，剩下的Webview区域用于展示页面内容。

具体实现

创建浏览器

创建Webview直接调用相关API即可，这里就不再详细说明了，关键在于titleNView的配置。

给菜单栏添加按钮

阅读titleNView中标题栏上的自定义按钮相关的API说明，按钮的文本是可以使用unicode字符的。
推荐上Iconfont-阿里巴巴矢量图标库下载所需的矢量图，并将字体文件放在工程目录下。

注意：这里配置icon时，有个需要注意的地方。比如后退箭头，从浏览器中获取的unicode码是"\e603"，但是配置的时候，需要填写为"\ue603"才能被原生层正确解析。

buttons: [{ //后退按钮  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue603',  
    onclick: _self.back.bind(_self) //指定函数的上下文为browser，否则是当前这个对象；  
}, { //前进箭头  
    'float': 'left',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue602',  
    onclick: _self.forward.bind(_self)  
}, { //关闭按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue601',  
    onclick: _self.close.bind(_self)  
}, { //刷新按钮  
    'float': 'right',  
    fontSrc: '_www/font/browser.ttf',  
    text: '\ue600',  
    onclick: _self.reload.bind(_self)  
}]

实现按钮功能

打开浏览器

// 显示浏览器  
browser.show = function(url) {  
    url = url || 'http://www.dcloud.io/'; //默认使用DCloud官网  
    this.webview.loadURL(url);  
    this.webview.show('slide-in-right');  
};

这里采用预加载方案，打开浏览器时，加载目标地址。

前进

// 前进  
browser.forward = function() {  
    var _self = this;  
    _self.webview.canForward(function(event) {  
        if(event.canForward) {  
            _self.webview.forward();  
        } else {  
            plus.nativeUI.toast('没有可前进的地址');  
        }  
    });  
};

首先要检测，是否可以前进。不能前进，就做出相应的提示。

后退

// 后退  
browser.back = function() {  
    var _self = this;  
    _self.webview.canBack(function(event) {  
        console.log('event:', event)  
        if(event.canBack) {  
            _self.webview.back();  
        } else {  
            _self.close();  
        }  
    });  
};

与前进同理，先检查是否可以后退，然后再执行相关的逻辑。

刷新

// 刷新  
browser.reload = function() {  
    this.webview.reload(true);  
};

刷新就很简单了，直接调用相关API即可。

关闭

// 关闭  
browser.close = function() {  
    this.webview.hide('slide-out-right');  
    this.webview.clear();  
};

关闭操作中，由于是使用预加载方案，所以选择隐藏了Webview，然后清空了Webview中加载的内容。
实际开发中，根据实际业务需求进行调整即可。

效果图及源码

下载附件中的文件，直接解压真机运行即可体验。

收起阅读 »

解决软键盘弹起，挤压webview的问题；

mui Webview 弹出软键盘

解决弹出软键盘，webview被挤压的问题
http://blog.csdn.net/kk_yanwu/article/details/73332704

HBuilder8.8.0中vue.js代码提示功能介绍

HBuilder Vue

> 本文为老HBuilder的介绍。新版HBuilderX自带超强vue支持，详见：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/19601

如何引入

框架语法提示引入方式有两种：

如果项目中存在vue.xxx.js文件或者html中script标签引用了vue，则会自动挂载vue语法提示。
如果（1）中的条件不满足，则需要手动挂载（在项目上点右键选择【引入框架语法提示】，在框架列表中勾选上vue）

功能介绍

vue基本API的提示

构造vue实例时的配置项参数提示

vue指令提示

vue自定义组件标签在html中的提示

el以及template属性内智能提示

继续阅读 »

微信支付，调用返回-1

微信支付

1.在后台生成的签名，必须是生成预支付id后再次生成的签名
2.APP内json配置支付appid必须与商户内生成的id一致

必须用自己的证书打包后，才能正常调用
4.调用微信支付的时候参数顺序

appid: resObj.data.appid,  
noncestr: resObj.data.noncestr,  
package: resObj.data.package,  
partnerid: resObj.data.partnerid,  
prepayid: resObj.data.prepayid,  
timestamp: resObj.data.timestamp,  
sign: resObj.data.sign

5.timestamp 类型为number

继续阅读 »

1.在后台生成的签名，必须是生成预支付id后再次生成的签名
2.APP内json配置支付appid必须与商户内生成的id一致

必须用自己的证书打包后，才能正常调用
4.调用微信支付的时候参数顺序

appid: resObj.data.appid,  
noncestr: resObj.data.noncestr,  
package: resObj.data.package,  
partnerid: resObj.data.partnerid,  
prepayid: resObj.data.prepayid,  
timestamp: resObj.data.timestamp,  
sign: resObj.data.sign

5.timestamp 类型为number

收起阅读 »

希望DCloud团队开发Linux版本的HBuilder

MUI-沉浸式导航代码如下

动态加载 welcome 欢迎主页

slider动态加载

关于html5+定位的有关经验

N.JS BLE设备蓝牙4.0 扫描分享

mui的tap事件封装成anguar指令

angualr+mui对<input type="file" />图片上传的onchange事件的封装

【示例】内置浏览器titleNView版

需求简述

实现思路

浏览器

基本操作

菜单栏

布局

具体实现

创建浏览器

给菜单栏添加按钮

实现按钮功能

效果图及源码

需求简述

实现思路

浏览器

基本操作

菜单栏

布局

具体实现

创建浏览器

给菜单栏添加按钮

实现按钮功能

效果图及源码

解决软键盘弹起，挤压webview的问题；

HBuilder8.8.0中vue.js代码提示功能介绍

如何引入

功能介绍

如何引入

功能介绍

微信支付，调用返回-1

热门文章