HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

使用plus.gallery.pick打开本地相册

plus.gallery

使用plus.gallery.pick打开本地相册,必须在manifest.json里配置竖屏权限,不然打包后在ios里无法打开本地相册,会卡死,闪退

使用plus.gallery.pick打开本地相册,必须在manifest.json里配置竖屏权限,不然打包后在ios里无法打开本地相册,会卡死,闪退

hbuider plus app 用户退出登录逻辑-做贡献

退出 plus HTML5+ HBuilder

啥也不说直上代码,可能有逻辑不严谨的地方,如果有懂的朋友希望给指出。

$('#goOut')[0].addEventListener('tap', function(e) {  
    //清除用户数据  
    localStorage.setItem('$user', '{}');  
        //清除是否长登录  
    localStorage.setItem('$userLogin', '{}');  

    /**  
     * 关闭除了 login 外的所有窗口  
     * 因为原生 activity 活动(窗口)是以栈的形式存在,即,login 刚打开会被压入栈顶,之后打开的页面会压在它上面。  
     * 退出登录逻辑:  
     * 退出登录时只保留栈顶 login(入口页面及当前页面的 webview),其他的都页面 close ,如果当前的如果也被 close 的话,  
     * 那么本页面的 js 就不会执行了,循环就会终端,会出错。这时候只剩下 login 与 currentWebview ,这样还不行,还要等本  
     * 循环关闭 webview 的 js 代码执行完后再把 currentWebview 关闭,这样小只剩下 login(入口页面)了,自然而然,登录  
     * 页面就显示出来了。虽然显示出来了,但是只是加载了 html 与 css 的样式,js 并没有加载,所以还要做其他处理,具体看下面的  
     * 实施方法。  
     * 具体实施:  
     * 1、用 plus.webview.all() 方法获取所有窗口的 webview 对象。  
     * 2、获取当前 webview 对象。  
     * 3、用 webviewObj.reload()方法重新加载一下 login 页面,这样 js 也有了。  
     * 4、循环所有窗口对像的数组(这里奇怪了,数组的第1个居然是入口页面....,与栈不符,就是写死了,为了防止  
     * 以后的变化造成措手不及,还是手动去获取一下“入口页面”的 url 然后再跟数组里每一个窗口对象的 url 进行对比,相等就  
     * 跳过本次循环,避免入口页面也被关闭掉。)关闭不想干的窗口。  
     * 5、关闭当前 webview 页面(窗口)  
     */  
    // 获取所有Webview窗口  
    var all = plus.webview.all();  
    //获取当前页面  
    var currentWebview = plus.webview.currentWebview();  
    //获取入口页面的 url 地址  
    var entranceWebviewUrl = plus.webview.getWebviewById(plus.runtime.appid).getURL();  
    //重新加载 login 窗口  
    all[0].reload(true);  
    for(var i = 0; i < all.length; i++) {  
        if(entranceWebviewUrl == all[i].getURL()){  
            continue  
        }                     
        if(currentWebview.getURL() != all[i].getURL()) {  
            all[i].close('none')  
        }  
    }  
    currentWebview.close('none')  
})
继续阅读 »

啥也不说直上代码,可能有逻辑不严谨的地方,如果有懂的朋友希望给指出。

$('#goOut')[0].addEventListener('tap', function(e) {  
    //清除用户数据  
    localStorage.setItem('$user', '{}');  
        //清除是否长登录  
    localStorage.setItem('$userLogin', '{}');  

    /**  
     * 关闭除了 login 外的所有窗口  
     * 因为原生 activity 活动(窗口)是以栈的形式存在,即,login 刚打开会被压入栈顶,之后打开的页面会压在它上面。  
     * 退出登录逻辑:  
     * 退出登录时只保留栈顶 login(入口页面及当前页面的 webview),其他的都页面 close ,如果当前的如果也被 close 的话,  
     * 那么本页面的 js 就不会执行了,循环就会终端,会出错。这时候只剩下 login 与 currentWebview ,这样还不行,还要等本  
     * 循环关闭 webview 的 js 代码执行完后再把 currentWebview 关闭,这样小只剩下 login(入口页面)了,自然而然,登录  
     * 页面就显示出来了。虽然显示出来了,但是只是加载了 html 与 css 的样式,js 并没有加载,所以还要做其他处理,具体看下面的  
     * 实施方法。  
     * 具体实施:  
     * 1、用 plus.webview.all() 方法获取所有窗口的 webview 对象。  
     * 2、获取当前 webview 对象。  
     * 3、用 webviewObj.reload()方法重新加载一下 login 页面,这样 js 也有了。  
     * 4、循环所有窗口对像的数组(这里奇怪了,数组的第1个居然是入口页面....,与栈不符,就是写死了,为了防止  
     * 以后的变化造成措手不及,还是手动去获取一下“入口页面”的 url 然后再跟数组里每一个窗口对象的 url 进行对比,相等就  
     * 跳过本次循环,避免入口页面也被关闭掉。)关闭不想干的窗口。  
     * 5、关闭当前 webview 页面(窗口)  
     */  
    // 获取所有Webview窗口  
    var all = plus.webview.all();  
    //获取当前页面  
    var currentWebview = plus.webview.currentWebview();  
    //获取入口页面的 url 地址  
    var entranceWebviewUrl = plus.webview.getWebviewById(plus.runtime.appid).getURL();  
    //重新加载 login 窗口  
    all[0].reload(true);  
    for(var i = 0; i < all.length; i++) {  
        if(entranceWebviewUrl == all[i].getURL()){  
            continue  
        }                     
        if(currentWebview.getURL() != all[i].getURL()) {  
            all[i].close('none')  
        }  
    }  
    currentWebview.close('none')  
})
收起阅读 »

mui关闭页面出现卡白屏或闪页面的情况

白屏 闪屏
从a跳到b   如果想close a窗口首先在打开b的时候 creat:true一下然后在b页面获取所有窗口对象再判断如果是a窗口就close  

这样做可能会出现闪屏现象,因此先隐藏a然后再关闭它。代码如下希望大家少跳坑
var all = plus.webview.all();
var current = plus.webview.currentWebview().id;
for(var i=0,len=all.length;i<len;i++){
if(all[i].id ==a.id){
all[i].hide();
all[i].close();
}
}

继续阅读 »
从a跳到b   如果想close a窗口首先在打开b的时候 creat:true一下然后在b页面获取所有窗口对象再判断如果是a窗口就close  

这样做可能会出现闪屏现象,因此先隐藏a然后再关闭它。代码如下希望大家少跳坑
var all = plus.webview.all();
var current = plus.webview.currentWebview().id;
for(var i=0,len=all.length;i<len;i++){
if(all[i].id ==a.id){
all[i].hide();
all[i].close();
}
}

收起阅读 »

Native.JS监听手机锁屏,解锁,开屏

Native.JS
var receiver;  
mui.plusReady(function() {  
    main = plus.android.runtimeMainActivity(); //获取activity  
    // 广播接收  
    var ALARM_RECEIVER = "alarm_receiver";  
    receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
        onReceive: function(context, intent) { //实现onReceiver回调函数  
            var Intent = plus.android.importClass('android.content.Intent');  
            console.log(intent.getAction());  
            //action = intent.getAction();  
            if(intent.getAction() == Intent.ACTION_SCREEN_ON) {  
                console.log('开屏')  

            } else if(intent.getAction() == Intent.ACTION_SCREEN_OFF) {  
                console.log('锁屏')  

            } else if(intent.getAction() == Intent.ACTION_USER_PRESENT) {  
                console.log('解锁')  
                        }  
            result.textContent += '\nAction :' + intent.getAction();  
            main.unregisterReceiver(receiver);  
        }  
    });  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    var Intent = plus.android.importClass('android.content.Intent');  
    var filter = new IntentFilter();  
    filter.addAction(Intent.ACTION_SCREEN_ON);  
    filter.addAction(Intent.ACTION_SCREEN_OFF);  
    filter.addAction(Intent.ACTION_USER_PRESENT);  
    main.registerReceiver(receiver, filter); //注册监听  

})

代码已测试过了ctrl+c直接使用

继续阅读 »
var receiver;  
mui.plusReady(function() {  
    main = plus.android.runtimeMainActivity(); //获取activity  
    // 广播接收  
    var ALARM_RECEIVER = "alarm_receiver";  
    receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
        onReceive: function(context, intent) { //实现onReceiver回调函数  
            var Intent = plus.android.importClass('android.content.Intent');  
            console.log(intent.getAction());  
            //action = intent.getAction();  
            if(intent.getAction() == Intent.ACTION_SCREEN_ON) {  
                console.log('开屏')  

            } else if(intent.getAction() == Intent.ACTION_SCREEN_OFF) {  
                console.log('锁屏')  

            } else if(intent.getAction() == Intent.ACTION_USER_PRESENT) {  
                console.log('解锁')  
                        }  
            result.textContent += '\nAction :' + intent.getAction();  
            main.unregisterReceiver(receiver);  
        }  
    });  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    var Intent = plus.android.importClass('android.content.Intent');  
    var filter = new IntentFilter();  
    filter.addAction(Intent.ACTION_SCREEN_ON);  
    filter.addAction(Intent.ACTION_SCREEN_OFF);  
    filter.addAction(Intent.ACTION_USER_PRESENT);  
    main.registerReceiver(receiver, filter); //注册监听  

})

代码已测试过了ctrl+c直接使用

收起阅读 »

webpack构建h5plus多页面移动app

h5+ mui Vue

fast-h5plus

https://github.com/CC4J/fast-h5plus

说明

  • 使用webpack构建多页面移动APP开发的快速框架
  • 使用scss预处理器提高app样式开发效率
  • 使用h5plus库调用移动端底层接口
  • 使用vue提高开发效率,远离dom操作的繁琐
  • 使用移动端布局终极解决方案hotcss让移动端布局开发更加容易
  • 框架默认使用750px的设计稿,开发过程中在样式文件里直接书写像素px单位,webpack编译后会自动转换成对应的rem值
  • 支持es6,es7语法,打包编译自动转es5,让你感受丝滑一般的开发畅快

使用

获取fast-h5plus

git clone git@github.com:CC4J/fast-h5plus.git

安装依赖

npm install

若安装缓慢可切换淘宝源

npm install --registry=https://registry.npm.taobao.org

开发

新建页面

新建一个页面我们需要做两步操作。

第一步是在 src/pages/ 目录下新建每个页面的入口js文件以及入口vue文件,如我们新建一个登陆页,我们需要在src/pages/下新建src/pages/login/login.js与src/pages/login/login.vue。

第二步需要在根目录下的config目录中修改page.config.js文件,如:

exports.pageSet = [  
  {title: '登陆页', filename: 'login'}  
]

页面调试

新建完页面之后,我们需要在手机或pc浏览器中调试页面,需要进行三步操作。

第一步:修改根目录下的config目录中修改page.config.js文件,如:

exports.devPage = 'login';

在这里大家要注意,调试哪一个页面,就需要将devPage的值修改成对应页面的文件名。

第二步:修改src/config/ 目录下的api.js文件,如

var devMode = true;

将devMode的值改为true,作用有两处,一是开发阶段将使用webpack-dev-server的反向代理功能进行跨域请求。二是启动vconsole模块,方便在手机端调试时查看控制台的输出信息。这一步操作在整个开发过程中只进行一次。

第三步:在命令行运行npm start指令,启动webpack-dev-server服务。控制台会打印当前服务器的ip地址与端口后,我们只需要在Hbuilder中修改manifest中的入口为此ip地址与端口号则可启动进行真机调试。

注意:每次新建一个页面之后需要先停掉webpack-dev-server服务,按上面步骤操作之后再重新运行npm start命令即可。Hbuilder启动一次之后不需要再重新启动,你甚至可以停掉Hbuilder项目,手机中的调试基座仍会进行自动刷新。

打包

整个开发结束之后,我们需要对项目进行打包成apk或者ipk。打包之前需要进行以下操作:

第一步:修改src/config/ 目录下的api.js文件,如

var devMode = false;

将devMode的值改为false将关闭页面vconsole控制台,关闭webpack-dev-server反向代理进行跨域功能。

第二步:修改Hbuilder中manifest.json文件的入口,如我们app的入口页是登陆页面,则入口修改为dist/login.html.

第三步:使用Hbuilder打包时需要将除dist以外的文件或目录添加到un'pa'ckage非打包清单中,减少我们app的体积。

结束

求个star,嘿嘿

继续阅读 »

fast-h5plus

https://github.com/CC4J/fast-h5plus

说明

  • 使用webpack构建多页面移动APP开发的快速框架
  • 使用scss预处理器提高app样式开发效率
  • 使用h5plus库调用移动端底层接口
  • 使用vue提高开发效率,远离dom操作的繁琐
  • 使用移动端布局终极解决方案hotcss让移动端布局开发更加容易
  • 框架默认使用750px的设计稿,开发过程中在样式文件里直接书写像素px单位,webpack编译后会自动转换成对应的rem值
  • 支持es6,es7语法,打包编译自动转es5,让你感受丝滑一般的开发畅快

使用

获取fast-h5plus

git clone git@github.com:CC4J/fast-h5plus.git

安装依赖

npm install

若安装缓慢可切换淘宝源

npm install --registry=https://registry.npm.taobao.org

开发

新建页面

新建一个页面我们需要做两步操作。

第一步是在 src/pages/ 目录下新建每个页面的入口js文件以及入口vue文件,如我们新建一个登陆页,我们需要在src/pages/下新建src/pages/login/login.js与src/pages/login/login.vue。

第二步需要在根目录下的config目录中修改page.config.js文件,如:

exports.pageSet = [  
  {title: '登陆页', filename: 'login'}  
]

页面调试

新建完页面之后,我们需要在手机或pc浏览器中调试页面,需要进行三步操作。

第一步:修改根目录下的config目录中修改page.config.js文件,如:

exports.devPage = 'login';

在这里大家要注意,调试哪一个页面,就需要将devPage的值修改成对应页面的文件名。

第二步:修改src/config/ 目录下的api.js文件,如

var devMode = true;

将devMode的值改为true,作用有两处,一是开发阶段将使用webpack-dev-server的反向代理功能进行跨域请求。二是启动vconsole模块,方便在手机端调试时查看控制台的输出信息。这一步操作在整个开发过程中只进行一次。

第三步:在命令行运行npm start指令,启动webpack-dev-server服务。控制台会打印当前服务器的ip地址与端口后,我们只需要在Hbuilder中修改manifest中的入口为此ip地址与端口号则可启动进行真机调试。

注意:每次新建一个页面之后需要先停掉webpack-dev-server服务,按上面步骤操作之后再重新运行npm start命令即可。Hbuilder启动一次之后不需要再重新启动,你甚至可以停掉Hbuilder项目,手机中的调试基座仍会进行自动刷新。

打包

整个开发结束之后,我们需要对项目进行打包成apk或者ipk。打包之前需要进行以下操作:

第一步:修改src/config/ 目录下的api.js文件,如

var devMode = false;

将devMode的值改为false将关闭页面vconsole控制台,关闭webpack-dev-server反向代理进行跨域功能。

第二步:修改Hbuilder中manifest.json文件的入口,如我们app的入口页是登陆页面,则入口修改为dist/login.html.

第三步:使用Hbuilder打包时需要将除dist以外的文件或目录添加到un'pa'ckage非打包清单中,减少我们app的体积。

结束

求个star,嘿嘿

收起阅读 »

【分享】uni-app 原生导航 titleNView 搜索框

贴子为以前的,官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus

经测试官方已修复安卓的BUG

以下是苹果的


以下是安卓的

操作方法,先配置是下page.json

        {  
            "path": "你的页面",  
            "style": {  
                "backgroundColorTop": "#ebebeb",  
                "backgroundColorBottom": "#ebebeb",  
                "app-plus": {  
                    "scrollIndicator": "none",  
                    "titleNView": {  
                        "titleText":"",//不要设置标题  
                        "buttons": [{  
                            "text": "取消",  
                            "fontSize": "14"  
                        }]  
                    }  
                }  
            }  
        }

不要设置标题,不然在安卓上就会显示出来,画的盖不住

以下操作在您要画搜索框的页面

在onload引用startcreatview就可以了

设置延迟,不做延迟会出现错误

            startcreatview(){  
                var s = this;  
                s.TitleTimer = setTimeout(function() {  
                    s.createView();  
                }, 100);//具体缓迟时间可以按需设置  
            },

            createView() {  
                clearTimeout(this.TitleTimer);  
                var s = this;  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                var currentWebview = page.$getAppWebview();  
                var nTitle = currentWebview.getTitleNView();  
                    nTitle.draw(  
                        [{  
                                "tag": "rect",  
                                "id": "rect",  
                                "color": "#999",  
                                "position": {  
                                    "left": "50px",  
                                    "right": "50px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "rectStyles": {  
                                    "color": "#f6f6f6",  
                                    "radius": "30px",  
                                    "borderColor": "#999"  
                                }  
                            },  
                            {  
                                "tag": "font",  
                                "id": "font",  
                                "text": "\ue466",  
                                "position": {  
                                    "left": "55px",  
                                    "width": "30px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "textStyles": {  
                                    "size": "13px",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999"  
                                }  
                            },  
                            {  
                                "tag": "input",  
                                "id": "input",  
                                "position": {  
                                    "left": "80px",  
                                    "right": "70px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "inputStyles": {  
                                    "placeholder": "关键字搜索",  
                                    "borderRadius": "30px",  
                                    "borderWidth": "0px",  
                                    "fontSize": "13px",  
                                    "type": "search",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999",  
                                    onComplete: function(e) {  
                                        console.log('点击搜索执行' + e.text)  
                                    },  
                                    onFocus: function(e) {  
                                        console.log('获得焦点')  
                                    },  
                                    onBlur: function(e) {  
                                        console.log('失去焦点')  
                                    }  
                                }  
                            }  
                        ]  
                    );  
            },  

如果只需要一个假搜索框,把上面代码的inputStyles部份替换为
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
同时添加监听假搜索框的点击事件nTitle.addEventListener('click', '点击事件', false);

继续阅读 »

贴子为以前的,官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus

经测试官方已修复安卓的BUG

以下是苹果的


以下是安卓的

操作方法,先配置是下page.json

        {  
            "path": "你的页面",  
            "style": {  
                "backgroundColorTop": "#ebebeb",  
                "backgroundColorBottom": "#ebebeb",  
                "app-plus": {  
                    "scrollIndicator": "none",  
                    "titleNView": {  
                        "titleText":"",//不要设置标题  
                        "buttons": [{  
                            "text": "取消",  
                            "fontSize": "14"  
                        }]  
                    }  
                }  
            }  
        }

不要设置标题,不然在安卓上就会显示出来,画的盖不住

以下操作在您要画搜索框的页面

在onload引用startcreatview就可以了

设置延迟,不做延迟会出现错误

            startcreatview(){  
                var s = this;  
                s.TitleTimer = setTimeout(function() {  
                    s.createView();  
                }, 100);//具体缓迟时间可以按需设置  
            },

            createView() {  
                clearTimeout(this.TitleTimer);  
                var s = this;  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                var currentWebview = page.$getAppWebview();  
                var nTitle = currentWebview.getTitleNView();  
                    nTitle.draw(  
                        [{  
                                "tag": "rect",  
                                "id": "rect",  
                                "color": "#999",  
                                "position": {  
                                    "left": "50px",  
                                    "right": "50px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "rectStyles": {  
                                    "color": "#f6f6f6",  
                                    "radius": "30px",  
                                    "borderColor": "#999"  
                                }  
                            },  
                            {  
                                "tag": "font",  
                                "id": "font",  
                                "text": "\ue466",  
                                "position": {  
                                    "left": "55px",  
                                    "width": "30px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "textStyles": {  
                                    "size": "13px",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999"  
                                }  
                            },  
                            {  
                                "tag": "input",  
                                "id": "input",  
                                "position": {  
                                    "left": "80px",  
                                    "right": "70px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "inputStyles": {  
                                    "placeholder": "关键字搜索",  
                                    "borderRadius": "30px",  
                                    "borderWidth": "0px",  
                                    "fontSize": "13px",  
                                    "type": "search",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999",  
                                    onComplete: function(e) {  
                                        console.log('点击搜索执行' + e.text)  
                                    },  
                                    onFocus: function(e) {  
                                        console.log('获得焦点')  
                                    },  
                                    onBlur: function(e) {  
                                        console.log('失去焦点')  
                                    }  
                                }  
                            }  
                        ]  
                    );  
            },  

如果只需要一个假搜索框,把上面代码的inputStyles部份替换为
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
同时添加监听假搜索框的点击事件nTitle.addEventListener('click', '点击事件', false);

收起阅读 »

【IOS】官方20180929版本SDK中Swift的Demo

Mac 10.14
Xcode 10.1

1、第一步下载https://github.com/devdawei/libstdc-,并执行install.sh

2、若如下错误

 "OBJC_CLASS$_QLPreviewController", referenced from: objc-class-ref in liblibWidget.a(PGRuntime.o) 

添加QuickLook.framework

3、若报如下错误


"OBJC_CLASS$_SKStoreProductViewController", referenced from:  

objc-class-ref in liblibPDRCore.a(DCH5ScreenAdvertising.o)  

"_SKStoreProductParameterITunesItemIdentifier", referenced from:  

-[DCH5ScreenAdvertising touchesEnded:withEvent:] in liblibPDRCore.a(DCH5ScreenAdvertising.o)  

ld: symbol(s) not found for architecture x86_64  

clang: error: linker command failed with exit code 1 (use -v to see invocation)  

添加 libIAPPay.a liblibPayment.a 两个文件

继续阅读 »

Mac 10.14
Xcode 10.1

1、第一步下载https://github.com/devdawei/libstdc-,并执行install.sh

2、若如下错误

 "OBJC_CLASS$_QLPreviewController", referenced from: objc-class-ref in liblibWidget.a(PGRuntime.o) 

添加QuickLook.framework

3、若报如下错误


"OBJC_CLASS$_SKStoreProductViewController", referenced from:  

objc-class-ref in liblibPDRCore.a(DCH5ScreenAdvertising.o)  

"_SKStoreProductParameterITunesItemIdentifier", referenced from:  

-[DCH5ScreenAdvertising touchesEnded:withEvent:] in liblibPDRCore.a(DCH5ScreenAdvertising.o)  

ld: symbol(s) not found for architecture x86_64  

clang: error: linker command failed with exit code 1 (use -v to see invocation)  

添加 libIAPPay.a liblibPayment.a 两个文件

收起阅读 »

热力图如何在前端实现

关于热力图的实现原理:
一般可大致归纳为以下几个步骤:
1.为每个数据点设置一个从中心向外灰度渐变的圆;
2.利用灰度可以叠加的原理,计算每个像素点数据交叉叠加得到的灰度值;
3.根据每个像素计算得到的灰度值,在一条彩色色带中进行颜色映射,最后对图像进行着色,得到热力图。
当热力图基于前端技术的具体实现时,又可分为以下四个步骤,接下来为大家详细解析:
1.准备热力图数据格式
由于热力图使用场景一般为地图,所以,数据源需要提供经纬度作为位置信息,以及count作为数据点的权重值。

2.在地图上填充数据
基于canvas绘制热力图时,热力图中每个数据点的半径大小会直接影响到热力图的展现效果,所以一般要结合使用地图的缩放级别以及数据精度来进行设置。

3.叠加显示,权重(密度)算法
上面的绘制结果中,因为没有使用到权重值,所以每个数据点圆的中心点灰度值都是1,不能直接用于颜色映射,需要根据离散点缓冲区的叠加来确定热力分布密度。每一个热点都有一个位置和权重,权重越大,则该点越显著,也就代表其渐变的一个衰变因素,此时,我们需要根据不同的count设置出不同的alpha值。本文主要根据count最小值对应alpha0,最大值对应1的映射计算方式,求得每个数据点,从而绘制出alpha:

4.颜色映射
根据画布上每个像素点累计得到的灰度值,可以从彩色映射色带中得到对应位置的颜色。
那么如何得到画布上每个像素点的信息呢?可以使用canvas提供的getImageData()方法,返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。需要注意的是,ImageData对象中的每个像素,都包含RGBA四项信息:

继续阅读 »

关于热力图的实现原理:
一般可大致归纳为以下几个步骤:
1.为每个数据点设置一个从中心向外灰度渐变的圆;
2.利用灰度可以叠加的原理,计算每个像素点数据交叉叠加得到的灰度值;
3.根据每个像素计算得到的灰度值,在一条彩色色带中进行颜色映射,最后对图像进行着色,得到热力图。
当热力图基于前端技术的具体实现时,又可分为以下四个步骤,接下来为大家详细解析:
1.准备热力图数据格式
由于热力图使用场景一般为地图,所以,数据源需要提供经纬度作为位置信息,以及count作为数据点的权重值。

2.在地图上填充数据
基于canvas绘制热力图时,热力图中每个数据点的半径大小会直接影响到热力图的展现效果,所以一般要结合使用地图的缩放级别以及数据精度来进行设置。

3.叠加显示,权重(密度)算法
上面的绘制结果中,因为没有使用到权重值,所以每个数据点圆的中心点灰度值都是1,不能直接用于颜色映射,需要根据离散点缓冲区的叠加来确定热力分布密度。每一个热点都有一个位置和权重,权重越大,则该点越显著,也就代表其渐变的一个衰变因素,此时,我们需要根据不同的count设置出不同的alpha值。本文主要根据count最小值对应alpha0,最大值对应1的映射计算方式,求得每个数据点,从而绘制出alpha:

4.颜色映射
根据画布上每个像素点累计得到的灰度值,可以从彩色映射色带中得到对应位置的颜色。
那么如何得到画布上每个像素点的信息呢?可以使用canvas提供的getImageData()方法,返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。需要注意的是,ImageData对象中的每个像素,都包含RGBA四项信息:

收起阅读 »

mui框架做的粉红风格服装包包商城网站模板

mui

mui框架做的粉红风格服装包包商城网站模板
这个风格时尚美观,比较适合卖女性商品
喜欢的朋友可以下载研究研究
下载地址:http://www.sucaihuo.com/templates/4490.html

继续阅读 »

mui框架做的粉红风格服装包包商城网站模板
这个风格时尚美观,比较适合卖女性商品
喜欢的朋友可以下载研究研究
下载地址:http://www.sucaihuo.com/templates/4490.html

收起阅读 »

关于JAVA开发HBuillder的微信支付(获取预支付订单后调起微信支付),经验分享

微信支付

本项目主要是集成微信支付,android APP请求java服务器获取预支付订单后调起微信支付。代码简单,亲测可用!
源码demo下载地址:
微信支付java服务端demo

主要是用于替换HBuillder H5+模板中的plus/payment.html文件中如下代码

var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';

继续阅读 »

本项目主要是集成微信支付,android APP请求java服务器获取预支付订单后调起微信支付。代码简单,亲测可用!
源码demo下载地址:
微信支付java服务端demo

主要是用于替换HBuillder H5+模板中的plus/payment.html文件中如下代码

var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';

收起阅读 »

uni-app 升级检测,客户端实现更新下载App自动安装

升级 升级更新

稍后整理描述后更新!

稍后整理描述后更新!

解决mui下拉刷新使用mui(querySelector).pullRefresh().setStopped(false);禁止和恢复的问题

共用模板,下拉刷新 下拉刷新

把你们的mui.min.js的源码部分修改如下

修改前


disablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.bottomPocket.className = "mui-pull-bottom-pocket "   e, window.removeEventListener("dragup", this)  
                        },  
                        enablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.bottomPocket.classList.remove(e), this.pullCaption.className = g   " "   h, this.pullCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)  
                        }  

修改后


disablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.topPocket.className = "mui-pull-bottom-pocket "   e, window.removeEventListener("dragup", this)  
                        },  
                        enablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.topPocket.classList.remove(e), this.topCaption.className = g   " "   h, this.topCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)  
                        }  

第一次发帖,有点激动。

继续阅读 »

把你们的mui.min.js的源码部分修改如下

修改前


disablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.bottomPocket.className = "mui-pull-bottom-pocket "   e, window.removeEventListener("dragup", this)  
                        },  
                        enablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.bottomPocket.classList.remove(e), this.pullCaption.className = g   " "   h, this.pullCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)  
                        }  

修改后


disablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.topPocket.className = "mui-pull-bottom-pocket "   e, window.removeEventListener("dragup", this)  
                        },  
                        enablePullupToRefresh: function() {  
                            this._initPullupRefresh(), this.topPocket.classList.remove(e), this.topCaption.className = g   " "   h, this.topCaption.innerHTML = this.options.up.contentdown, b.addEventListener("plusscrollbottom", this), window.addEventListener("dragup", this)  
                        }  

第一次发帖,有点激动。

收起阅读 »