HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

Webview侧滑菜单

Webview 侧滑菜单

之前看了下mui的侧滑菜单,发现只有div模式的。然后在社区里找到了webview模式的侧滑菜单,但是不太完美,只可以点击无法拖动。
所以找时间自己完善了一下。稍微测试了一下没有问题,拿过来给大伙分享一波,毕竟经常过来摘果子是时候自己也种一波了! ps:欢迎大家提出宝贵意见,有问题请指出。

                       //初始化侧滑菜单页  
            function initMenuPage() {  
                //设置遮罩避免滑动时被点击  
                menu = mui.preload({  
                    url: "side.html",  
                    id: "side",  
                    styles: {  
                        left: '100%',  
                        width: "80%",  
                        mask: 'rgba(0,0,0,0)'  
                    },  
                    show: {  
                        aniShow: "none"  
                    }  
                });  
                menu.show("none");  
            }  
                        //右滑开启侧滑菜单事件  
            function right_drag_event() {  
                //右滑事件  
                main.drag({  
                    callbackStep: 10,  
                    direction: 'right',  
                    moveMode: 'silent'  
                }, {  
                    view: menu,  
                    moveMode: 'follow'  
                }, function(e, s) {  
                    console.log('right drag event: ' + JSON.stringify(e));  
                    console.log(e.progress);  
                    main.setStyle({  
                        mask: "rgba(0,0,0,0.4)"  
                    });  
                    //                  if(e.type === "start") {  
                    //                        
                    //                  }  
                    if(e.type === "end" && e.progress === "0") {  
                        main.setStyle({  
                            mask: 'none'  
                        });  
                    }  
                    if(e.type === "end" && e.progress === "100") {  
                        menu.setStyle({  
                            mask: 'none'  
                        });  
                        left_drag_event();  
                        //显示关闭侧滑菜单  
                        showMenu = true;  
                    }  
                });  
            }  
                        //左滑隐藏侧滑菜单  
            function left_drag_event() {  
                //打开侧滑菜单后,开启左滑关闭事件  
                main.drag({  
                    direction: 'left',  
                    moveMode: 'followFinger'  
                }, {  
                    view: menu,  
                    moveMode: 'follow'  
                }, function(e) {  
                    console.log('left drag event: ' + JSON.stringify(e));  
                    if(e.type === "end") {  
                        main.setStyle({  
                            mask: "none"  
                        });  
                    }  
                    if(e.type === "end" && e.progress === "100") {  
                        //侧滑菜单关闭后,开启右滑打开事件  
                        close_wmenu(false);  
                        //显示关闭侧滑菜单  
                        showMenu = false;  
                        return;  
                    }  
                });  
                //左滑事件开启时,关闭右滑事件(目前不清楚,禁用右滑的方法)  
                main.drag({  
                    direction: 'right',  
                    moveMode: 'silent'  
                }, {  
                    view: 'newdrag',  
                    moveMode: 'follow'  
                }, function(e) {  
                    console.log('left drag event: ' + JSON.stringify(e));  
                });  
            }

上面的代码就是,webview侧滑菜单的核心部分。其它代码我就不多上传,有需要了解请下载附件。

ps:本文章为作者原创,转载时请著名出处!

继续阅读 »

之前看了下mui的侧滑菜单,发现只有div模式的。然后在社区里找到了webview模式的侧滑菜单,但是不太完美,只可以点击无法拖动。
所以找时间自己完善了一下。稍微测试了一下没有问题,拿过来给大伙分享一波,毕竟经常过来摘果子是时候自己也种一波了! ps:欢迎大家提出宝贵意见,有问题请指出。

                       //初始化侧滑菜单页  
            function initMenuPage() {  
                //设置遮罩避免滑动时被点击  
                menu = mui.preload({  
                    url: "side.html",  
                    id: "side",  
                    styles: {  
                        left: '100%',  
                        width: "80%",  
                        mask: 'rgba(0,0,0,0)'  
                    },  
                    show: {  
                        aniShow: "none"  
                    }  
                });  
                menu.show("none");  
            }  
                        //右滑开启侧滑菜单事件  
            function right_drag_event() {  
                //右滑事件  
                main.drag({  
                    callbackStep: 10,  
                    direction: 'right',  
                    moveMode: 'silent'  
                }, {  
                    view: menu,  
                    moveMode: 'follow'  
                }, function(e, s) {  
                    console.log('right drag event: ' + JSON.stringify(e));  
                    console.log(e.progress);  
                    main.setStyle({  
                        mask: "rgba(0,0,0,0.4)"  
                    });  
                    //                  if(e.type === "start") {  
                    //                        
                    //                  }  
                    if(e.type === "end" && e.progress === "0") {  
                        main.setStyle({  
                            mask: 'none'  
                        });  
                    }  
                    if(e.type === "end" && e.progress === "100") {  
                        menu.setStyle({  
                            mask: 'none'  
                        });  
                        left_drag_event();  
                        //显示关闭侧滑菜单  
                        showMenu = true;  
                    }  
                });  
            }  
                        //左滑隐藏侧滑菜单  
            function left_drag_event() {  
                //打开侧滑菜单后,开启左滑关闭事件  
                main.drag({  
                    direction: 'left',  
                    moveMode: 'followFinger'  
                }, {  
                    view: menu,  
                    moveMode: 'follow'  
                }, function(e) {  
                    console.log('left drag event: ' + JSON.stringify(e));  
                    if(e.type === "end") {  
                        main.setStyle({  
                            mask: "none"  
                        });  
                    }  
                    if(e.type === "end" && e.progress === "100") {  
                        //侧滑菜单关闭后,开启右滑打开事件  
                        close_wmenu(false);  
                        //显示关闭侧滑菜单  
                        showMenu = false;  
                        return;  
                    }  
                });  
                //左滑事件开启时,关闭右滑事件(目前不清楚,禁用右滑的方法)  
                main.drag({  
                    direction: 'right',  
                    moveMode: 'silent'  
                }, {  
                    view: 'newdrag',  
                    moveMode: 'follow'  
                }, function(e) {  
                    console.log('left drag event: ' + JSON.stringify(e));  
                });  
            }

上面的代码就是,webview侧滑菜单的核心部分。其它代码我就不多上传,有需要了解请下载附件。

ps:本文章为作者原创,转载时请著名出处!

收起阅读 »

android 系统裁剪功能如何有效的实现

有时候编译android 镜像会用到一些不需要的app 和 系统服务,我们尝试将其裁剪出去,那么具体的做法该如何来实现呢?下面跟大家介绍一下。

源码目录

build/target/product/*

在此下面有不少*.mk 文件,这一找到相应的app 进行规避修改:

diff --git a/target/product/core.mk b/target/product/core.mk
index afae7c0..7b1dae7 100644
--- a/target/product/core.mk
+++ b/target/product/core.mk
@@ -27,17 +27,12 @@ PRODUCT_PACKAGES += \
org.simalliance.openmobileapi.xml \
BasicDreams \
BlockedNumberProvider \

  • BookmarkProvider \
  • Browser2 \
  • Calendar \
    CalendarProvider \
    CaptivePortalLogin \
    CertInstaller \
  • Contacts \
    DeskClock \
    DocumentsUI \
    DownloadProviderUi \
  • Email \
    ExactCalculator \
    ExternalStorageProvider \
    FusedLocation \
    @@ -54,7 +49,6 @@ PRODUCT_PACKAGES += \
    PrintSpooler \
    PrintRecommendationService \
    ProxyHandler \
  • QuickSearchBox \
    Settings \
    SharedStorageBackup \
    Telecom \
    diff --git a/target/product/full_base.mk b/target/product/full_base.mk
    index 65bdf0f..da6eb4f 100644
    --- a/target/product/full_base.mk
    +++ b/target/product/full_base.mk
    @@ -29,10 +29,6 @@ PRODUCT_PACKAGES := \

    PRODUCT_PACKAGES += \
    Galaxy4 \

  • HoloSpiralWallpaper \
  • LiveWallpapers \
  • LiveWallpapersPicker \
  • MagicSmokeWallpapers \
    NoiseField \
    PhaseBeam \
    PhotoTable
    diff --git a/target/product/generic_no_telephony.mk b/target/product/generic_no_telephony.mk
    index 5c48358..4f9b27a 100644
    --- a/target/product/generic_no_telephony.mk
    +++ b/target/product/generic_no_telephony.mk
    @@ -20,10 +20,6 @@
    PRODUCT_PACKAGES := \
    Bluetooth \
    BluetoothMidiService \
  • Camera2 \
  • Gallery2 \
  • Music \
  • MusicFX \
    OneTimeInitializer \
    Provision \
    SystemUI \
    diff --git a/target/product/sdk_base.mk b/target/product/sdk_base.mk
    index fa257ae..13997ad 100644
    --- a/target/product/sdk_base.mk
    +++ b/target/product/sdk_base.mk
    @@ -18,23 +18,16 @@ PRODUCT_PROPERTY_OVERRIDES :=

    PRODUCT_PACKAGES := \
    ApiDemos \

  • CubeLiveWallpapers \
    CustomLocale \
    Development \
  • Dialer \
    EmulatorSmokeTests \
    Fallback \
  • Gallery \
    GestureBuilder \
    Launcher3 \
  • LegacyCamera \
    librs_jni \
    libwnndict \
    libWnnEngDic \
    libWnnJpnDic \
  • LiveWallpapersPicker \
  • Mms \
  • Music \
    OpenWnn \
    Protips \
    rild \
    diff --git a/target/product/telephony.mk b/target/product/telephony.mk
    index e840ba1..5c05fa1 100644
    --- a/target/product/telephony.mk
    +++ b/target/product/telephony.mk
    @@ -19,7 +19,6 @@

    PRODUCT_PACKAGES := \
    CarrierConfig \

  • Dialer \
    CallLogBackup \
    CellBroadcastReceiver \
    EmergencyInfo \
    对于一些服务 可以修改 frameworks/base/services/java/com/android/server/SystemServer.java

将里面的相关的 systemserver.java 去掉就可以了,本文由专业的app开发报价燚轩科技整理发布,如需转载请注明原文作者及出处!

继续阅读 »

有时候编译android 镜像会用到一些不需要的app 和 系统服务,我们尝试将其裁剪出去,那么具体的做法该如何来实现呢?下面跟大家介绍一下。

源码目录

build/target/product/*

在此下面有不少*.mk 文件,这一找到相应的app 进行规避修改:

diff --git a/target/product/core.mk b/target/product/core.mk
index afae7c0..7b1dae7 100644
--- a/target/product/core.mk
+++ b/target/product/core.mk
@@ -27,17 +27,12 @@ PRODUCT_PACKAGES += \
org.simalliance.openmobileapi.xml \
BasicDreams \
BlockedNumberProvider \

  • BookmarkProvider \
  • Browser2 \
  • Calendar \
    CalendarProvider \
    CaptivePortalLogin \
    CertInstaller \
  • Contacts \
    DeskClock \
    DocumentsUI \
    DownloadProviderUi \
  • Email \
    ExactCalculator \
    ExternalStorageProvider \
    FusedLocation \
    @@ -54,7 +49,6 @@ PRODUCT_PACKAGES += \
    PrintSpooler \
    PrintRecommendationService \
    ProxyHandler \
  • QuickSearchBox \
    Settings \
    SharedStorageBackup \
    Telecom \
    diff --git a/target/product/full_base.mk b/target/product/full_base.mk
    index 65bdf0f..da6eb4f 100644
    --- a/target/product/full_base.mk
    +++ b/target/product/full_base.mk
    @@ -29,10 +29,6 @@ PRODUCT_PACKAGES := \

    PRODUCT_PACKAGES += \
    Galaxy4 \

  • HoloSpiralWallpaper \
  • LiveWallpapers \
  • LiveWallpapersPicker \
  • MagicSmokeWallpapers \
    NoiseField \
    PhaseBeam \
    PhotoTable
    diff --git a/target/product/generic_no_telephony.mk b/target/product/generic_no_telephony.mk
    index 5c48358..4f9b27a 100644
    --- a/target/product/generic_no_telephony.mk
    +++ b/target/product/generic_no_telephony.mk
    @@ -20,10 +20,6 @@
    PRODUCT_PACKAGES := \
    Bluetooth \
    BluetoothMidiService \
  • Camera2 \
  • Gallery2 \
  • Music \
  • MusicFX \
    OneTimeInitializer \
    Provision \
    SystemUI \
    diff --git a/target/product/sdk_base.mk b/target/product/sdk_base.mk
    index fa257ae..13997ad 100644
    --- a/target/product/sdk_base.mk
    +++ b/target/product/sdk_base.mk
    @@ -18,23 +18,16 @@ PRODUCT_PROPERTY_OVERRIDES :=

    PRODUCT_PACKAGES := \
    ApiDemos \

  • CubeLiveWallpapers \
    CustomLocale \
    Development \
  • Dialer \
    EmulatorSmokeTests \
    Fallback \
  • Gallery \
    GestureBuilder \
    Launcher3 \
  • LegacyCamera \
    librs_jni \
    libwnndict \
    libWnnEngDic \
    libWnnJpnDic \
  • LiveWallpapersPicker \
  • Mms \
  • Music \
    OpenWnn \
    Protips \
    rild \
    diff --git a/target/product/telephony.mk b/target/product/telephony.mk
    index e840ba1..5c05fa1 100644
    --- a/target/product/telephony.mk
    +++ b/target/product/telephony.mk
    @@ -19,7 +19,6 @@

    PRODUCT_PACKAGES := \
    CarrierConfig \

  • Dialer \
    CallLogBackup \
    CellBroadcastReceiver \
    EmergencyInfo \
    对于一些服务 可以修改 frameworks/base/services/java/com/android/server/SystemServer.java

将里面的相关的 systemserver.java 去掉就可以了,本文由专业的app开发报价燚轩科技整理发布,如需转载请注明原文作者及出处!

收起阅读 »

php编程之如何输入地址自动转换为经纬度

  对于一些地图或地理位置的显示,通常要用到经纬度来表示,也就是用户输入地址之后,系统能够根据用户输入的位置信息进行经纬度的转换,那么这在技术上该如何实现呢?下面就来为大家简单介绍一下重点部分的代码实现,不过仅限腾讯地图。
//输入地址获取经纬度(腾讯地图)
function getAddress($address) {
header("Content-type:text/html;charset=utf-8");
$ak = 'YOUR-KEY';//你腾讯地图的k值
$address = $address;

$url = "http://apis.map.qq.com/ws/geocoder/v1/?address={$address}&key={$ak}";

$json = file_get_contents($url);
$data = json_decode($json,TRUE);
return $data['result']['location'];//获取地址的 经纬度
["lng"] => float(113.6401)//经度
["lat"] => float(34.72468)//纬度

}

/**

  • 只保留字符串首尾字符,隐藏中间用*代替(两个字符时只显示第一个)
  • @param string $user_name 姓名
  • @return string 格式化后的姓名
    /function substr_cut($user_name){
    $strlen = mb_strlen($user_name, 'utf-8');
    $firstStr = mb_substr($user_name, 0, 1, 'utf-8');
    $lastStr = mb_substr($user_name, -1, 1, 'utf-8');
    return $strlen == 2 ? $firstStr . str_repeat('
    ', mb_strlen($user_name, 'utf-8') - 1) : $firstStr . str_repeat("*", $strlen - 2) . $lastStr;
    }

  那么关于php编程中如何输入地址自动转换为经纬度就为大家介绍到这里了,如果还存在有疑问的技术开发者可以在下方留言讨论。本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

继续阅读 »

  对于一些地图或地理位置的显示,通常要用到经纬度来表示,也就是用户输入地址之后,系统能够根据用户输入的位置信息进行经纬度的转换,那么这在技术上该如何实现呢?下面就来为大家简单介绍一下重点部分的代码实现,不过仅限腾讯地图。
//输入地址获取经纬度(腾讯地图)
function getAddress($address) {
header("Content-type:text/html;charset=utf-8");
$ak = 'YOUR-KEY';//你腾讯地图的k值
$address = $address;

$url = "http://apis.map.qq.com/ws/geocoder/v1/?address={$address}&key={$ak}";

$json = file_get_contents($url);
$data = json_decode($json,TRUE);
return $data['result']['location'];//获取地址的 经纬度
["lng"] => float(113.6401)//经度
["lat"] => float(34.72468)//纬度

}

/**

  • 只保留字符串首尾字符,隐藏中间用*代替(两个字符时只显示第一个)
  • @param string $user_name 姓名
  • @return string 格式化后的姓名
    /function substr_cut($user_name){
    $strlen = mb_strlen($user_name, 'utf-8');
    $firstStr = mb_substr($user_name, 0, 1, 'utf-8');
    $lastStr = mb_substr($user_name, -1, 1, 'utf-8');
    return $strlen == 2 ? $firstStr . str_repeat('
    ', mb_strlen($user_name, 'utf-8') - 1) : $firstStr . str_repeat("*", $strlen - 2) . $lastStr;
    }

  那么关于php编程中如何输入地址自动转换为经纬度就为大家介绍到这里了,如果还存在有疑问的技术开发者可以在下方留言讨论。本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

收起阅读 »

如何正确高效地在社区提问

分享 常见问题 提问

提问之前

可以从以下几个渠道尝试获取解决办法:

  • 文档
  • FAQ
  • 社区搜索
  • 百度/Google
  • 直接问身边的同事等

如果上述途径,都没有得到答案的话,还需要一些准备工作:

  • 明确一下要实现什么功能
  • 实现过程中卡在哪里了
  • 一个可以重现问题的 demo

重现问题的 demo,一定要简单且完整,保证别人拿到之后就可以运行起来重现问题。如果你提供了一个缺少相关资源的 demo,只会给别人带来困扰,浪费不必要的时间。

发起问题

正确地发起一个问题,必须包含以下基本内容:

  • 在实现xx功能的过程中,报了xx错误,或者是结果与文档描述不符。必要的时候,配图或者短视频来展示。
  • 重现问题的详细步骤,尽可能详细一些。
  • 一个可以重现问题的 demo,这个 demo 必须是拿到之后能够顺利运行起来的。
  • 出现问题的设备信息,手机->设置->关于手机,最好直接附上截图。

为了更加快速有效地定位问题,根据问题的分类,还需要提供一些额外的信息:

  • 5+App 开发,一定要提供所使用的 HBuilder 版本信息,最好还可以附上所使用的手机设备详细信息。
  • 流应用的问题,请提供 HBuilder 信息以及流基座的版本信息。
  • 云端打包的问题,同样需要 HBuilder 信息,以及 manifest.json 中的 appid。
  • 本地(离线)打包,一定要提供 SDK 的相关信息。
  • wap2app 项目,需要将应用提交到测试流应用,并且上传测试二维码。
  • 如果需要登录的话,一定要提供测试账号和密码。最好是在例子里面,暂时写死逻辑不需要登录或者默认是某个账号的信息。

不要小看这些信息,有了它们可以节省许多时间,大大提高定位问题的效率。不要偷懒或者觉得没有必要,造成你的问题被忽视或者因为反复需要补充信息而导致花费更多的时间。

注意事项

  • 请认真读完此文章,尽可能提供多的信息和文件,不要想当然认为只要发帖子就行了。
  • 如果你的问题得到了解决,请在问题中补充相关的解决方案。
  • 不要问应当自己解决的问题,例如:“xx不会写”。
  • 搞清楚问题的分类,可以更好的定位问题,尽量避免不正确的问题分类。
  • 保持谦虚,否则只会让别人对你的问题失去兴趣。

交流学习

社区的发展,需要大家的参与。官方的开发人员,需要将有限的时间和精力投入到新功能的开发以及 bug 的修复中。一些实际业务场景中应用的问题,更多地需要开发者之间互相交流学习。

如果你希望分享自己的经验,可以发起“分享经验”。以文章的形式,分享自己的心得体会。欢迎更多的小伙伴在社区分享,无论是 DCloud 产品相关或是其它技术相关的都可以发布。

技术服务

总结

请务必认真阅读完此篇文章,按照文中提到的要求,在问题中描述或提供必要的信息。如果问题只有一两句话或者一张图,基本无从下手。缺少一些必要的信息,同样无法定位问题。不要嫌麻烦,如果问题中的信息不全,来回提醒补全,也只会降低效率。

继续阅读 »

提问之前

可以从以下几个渠道尝试获取解决办法:

  • 文档
  • FAQ
  • 社区搜索
  • 百度/Google
  • 直接问身边的同事等

如果上述途径,都没有得到答案的话,还需要一些准备工作:

  • 明确一下要实现什么功能
  • 实现过程中卡在哪里了
  • 一个可以重现问题的 demo

重现问题的 demo,一定要简单且完整,保证别人拿到之后就可以运行起来重现问题。如果你提供了一个缺少相关资源的 demo,只会给别人带来困扰,浪费不必要的时间。

发起问题

正确地发起一个问题,必须包含以下基本内容:

  • 在实现xx功能的过程中,报了xx错误,或者是结果与文档描述不符。必要的时候,配图或者短视频来展示。
  • 重现问题的详细步骤,尽可能详细一些。
  • 一个可以重现问题的 demo,这个 demo 必须是拿到之后能够顺利运行起来的。
  • 出现问题的设备信息,手机->设置->关于手机,最好直接附上截图。

为了更加快速有效地定位问题,根据问题的分类,还需要提供一些额外的信息:

  • 5+App 开发,一定要提供所使用的 HBuilder 版本信息,最好还可以附上所使用的手机设备详细信息。
  • 流应用的问题,请提供 HBuilder 信息以及流基座的版本信息。
  • 云端打包的问题,同样需要 HBuilder 信息,以及 manifest.json 中的 appid。
  • 本地(离线)打包,一定要提供 SDK 的相关信息。
  • wap2app 项目,需要将应用提交到测试流应用,并且上传测试二维码。
  • 如果需要登录的话,一定要提供测试账号和密码。最好是在例子里面,暂时写死逻辑不需要登录或者默认是某个账号的信息。

不要小看这些信息,有了它们可以节省许多时间,大大提高定位问题的效率。不要偷懒或者觉得没有必要,造成你的问题被忽视或者因为反复需要补充信息而导致花费更多的时间。

注意事项

  • 请认真读完此文章,尽可能提供多的信息和文件,不要想当然认为只要发帖子就行了。
  • 如果你的问题得到了解决,请在问题中补充相关的解决方案。
  • 不要问应当自己解决的问题,例如:“xx不会写”。
  • 搞清楚问题的分类,可以更好的定位问题,尽量避免不正确的问题分类。
  • 保持谦虚,否则只会让别人对你的问题失去兴趣。

交流学习

社区的发展,需要大家的参与。官方的开发人员,需要将有限的时间和精力投入到新功能的开发以及 bug 的修复中。一些实际业务场景中应用的问题,更多地需要开发者之间互相交流学习。

如果你希望分享自己的经验,可以发起“分享经验”。以文章的形式,分享自己的心得体会。欢迎更多的小伙伴在社区分享,无论是 DCloud 产品相关或是其它技术相关的都可以发布。

技术服务

总结

请务必认真阅读完此篇文章,按照文中提到的要求,在问题中描述或提供必要的信息。如果问题只有一两句话或者一张图,基本无从下手。缺少一些必要的信息,同样无法定位问题。不要嫌麻烦,如果问题中的信息不全,来回提醒补全,也只会降低效率。

收起阅读 »

在Android Studio创建Hello World离线打包工程

我这里打字和复制图片太累了,我就从我博客中链接过来好了,好的话就点赞,关注吧,有什么问题可以在下面评论探讨。
下面是我离线打包教程链接
https://blog.csdn.net/baidu_21919557/article/details/80074429

我这里打字和复制图片太累了,我就从我博客中链接过来好了,好的话就点赞,关注吧,有什么问题可以在下面评论探讨。
下面是我离线打包教程链接
https://blog.csdn.net/baidu_21919557/article/details/80074429

前端编程之页面放大镜功能的实现

  淘过宝的都知道,有些网站需要对商品进行放大镜功能,也就是当鼠标移动到商品上面时,会在旁边出现细节的放大效果,这对于一些商城类网站来说,是一定需要具备的,那么页面放大镜功能是如何来实现的呢?下面就跟大家分享一下。

  实现代码:
<style>
html,body{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 100px auto 0;
display: flex;
}
.box{
width: 400px;
height: 500px;
position: relative;
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 5px;
}
.box_top{
width: 400px;
height: 400px;
display: flex;

        position: relative;  
        border: 1px solid green;  
    }  
    .box_top_left{  
        width: 400px;  
        height: 400px;  
        position: relative;  
    }  
    .box_top_left_999{  
        width: 100%;  
        height: 100%;  
        position: absolute;  
        z-index: 999;  
    }  
    .box_top_left_99{  
        width: 200px;  
        height: 200px;  
        position: absolute;  
        z-index: 99;  
        background-color: rgb(81, 223, 255);  
        opacity: 0.5;  
        display: none;  
    }  
    .box_top_left img{  
        width: 100%;  
        height: 100%;  
    }  

    .box_top_right{  
        width: 400px;  
        height: 400px;  
        overflow: hidden;  
        position: absolute;  
        left: 500px;  
        border: 1px solid red;  
        display: none;  
    }  
    .box_top_right img{  
        width: 800px;  
        height: 800px;  
        position: relative;  
        display: block;  
    }  

    .box_bottom{  
        width: 400px;  
        height: 80px;  
        display: flex;  
        align-items: center;  
        border: 1px solid blue;  
        padding: 1% 0;  
    }  
    .box_bottom img{  
        width: 23%;  
        height: 100%;  
        margin: 0 1%;  
    }  
</style>  

</head>
<body>
<main>
<div class="main">
<div class="box">
<div class="box_top">
<div class="box_top_left">
<div class="box_top_left_999"></div>
<div class="box_top_left_99"></div>
<img src="imgs/timg.jpg" alt="">
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" alt="">
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" alt="">
<img src="imgs/b.jpg" alt="">
<img src="imgs/c.jpg" alt="">
<img src="imgs/d.jpg" alt="">
</div>
</div>
</div>
</main>
<script>
$(".box_bottom img").each(function(){
$(this).mouseover(function(){
$(".box_top_left img").attr("src",$(this).attr("src"))
$(".box_top_right img").attr("src",$(this).attr("src"))
})
})
$(".box_top_left_999").mousemove(function(e){
var top = e.pageY;
var left = e.pageX;

        $(".box_top_left_99").css("display","block")  
        $(".box_top_right").css("display","block")  

        var new_left_x = $(this).offset().left+100;  
        var new_left_d = $(this).offset().left+300;  

        var img_left = left - new_left_x  
        img_left = -img_left  
        img_left = img_left*2  

        if( left > new_left_x){  
            if(left < new_left_d){  
                $(".box_top_left_99").css("left",left - new_left_x)  
                $(".box_top_right img").css("left",img_left)  
            }else{  
                $(".box_top_left_99").css("left",200)  
                $(".box_top_right img").css("left",-400)  
            }  
        }else{  
            $(".box_top_left_99").css("left",0)  
            $(".box_top_right img").css("left",0)  
        }  

        var new_top_x = $(this).offset().top+100;  
        var new_top_d = $(this).offset().top+300;  
        var img_top = top - new_top_x  
        img_top = -img_top  
        img_top = img_top*2  

        if(new_top_x < top){  
            if(new_top_d>top){  
                $(".box_top_left_99").css("top",top - new_top_x)  
                $(".box_top_right img").css("top",img_top)  
            }else{  
                $(".box_top_left_99").css("top",200)  
                $(".box_top_right img").css("top",-400)  
            }  
        }else{  
            $(".box_top_left_99").css("top",0)  
            $(".box_top_right img").css("top",0)  
        }  

    }).mouseout(function(){  
        $(".box_top_left_99").css("display","none")  
        $(".box_top_right").css("display","none")  
    })  
</script>  

  好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以在下方留言询问,或者跟其他人互动来解决都是可以的。

  本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

继续阅读 »

  淘过宝的都知道,有些网站需要对商品进行放大镜功能,也就是当鼠标移动到商品上面时,会在旁边出现细节的放大效果,这对于一些商城类网站来说,是一定需要具备的,那么页面放大镜功能是如何来实现的呢?下面就跟大家分享一下。

  实现代码:
<style>
html,body{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 100px auto 0;
display: flex;
}
.box{
width: 400px;
height: 500px;
position: relative;
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 5px;
}
.box_top{
width: 400px;
height: 400px;
display: flex;

        position: relative;  
        border: 1px solid green;  
    }  
    .box_top_left{  
        width: 400px;  
        height: 400px;  
        position: relative;  
    }  
    .box_top_left_999{  
        width: 100%;  
        height: 100%;  
        position: absolute;  
        z-index: 999;  
    }  
    .box_top_left_99{  
        width: 200px;  
        height: 200px;  
        position: absolute;  
        z-index: 99;  
        background-color: rgb(81, 223, 255);  
        opacity: 0.5;  
        display: none;  
    }  
    .box_top_left img{  
        width: 100%;  
        height: 100%;  
    }  

    .box_top_right{  
        width: 400px;  
        height: 400px;  
        overflow: hidden;  
        position: absolute;  
        left: 500px;  
        border: 1px solid red;  
        display: none;  
    }  
    .box_top_right img{  
        width: 800px;  
        height: 800px;  
        position: relative;  
        display: block;  
    }  

    .box_bottom{  
        width: 400px;  
        height: 80px;  
        display: flex;  
        align-items: center;  
        border: 1px solid blue;  
        padding: 1% 0;  
    }  
    .box_bottom img{  
        width: 23%;  
        height: 100%;  
        margin: 0 1%;  
    }  
</style>  

</head>
<body>
<main>
<div class="main">
<div class="box">
<div class="box_top">
<div class="box_top_left">
<div class="box_top_left_999"></div>
<div class="box_top_left_99"></div>
<img src="imgs/timg.jpg" alt="">
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" alt="">
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" alt="">
<img src="imgs/b.jpg" alt="">
<img src="imgs/c.jpg" alt="">
<img src="imgs/d.jpg" alt="">
</div>
</div>
</div>
</main>
<script>
$(".box_bottom img").each(function(){
$(this).mouseover(function(){
$(".box_top_left img").attr("src",$(this).attr("src"))
$(".box_top_right img").attr("src",$(this).attr("src"))
})
})
$(".box_top_left_999").mousemove(function(e){
var top = e.pageY;
var left = e.pageX;

        $(".box_top_left_99").css("display","block")  
        $(".box_top_right").css("display","block")  

        var new_left_x = $(this).offset().left+100;  
        var new_left_d = $(this).offset().left+300;  

        var img_left = left - new_left_x  
        img_left = -img_left  
        img_left = img_left*2  

        if( left > new_left_x){  
            if(left < new_left_d){  
                $(".box_top_left_99").css("left",left - new_left_x)  
                $(".box_top_right img").css("left",img_left)  
            }else{  
                $(".box_top_left_99").css("left",200)  
                $(".box_top_right img").css("left",-400)  
            }  
        }else{  
            $(".box_top_left_99").css("left",0)  
            $(".box_top_right img").css("left",0)  
        }  

        var new_top_x = $(this).offset().top+100;  
        var new_top_d = $(this).offset().top+300;  
        var img_top = top - new_top_x  
        img_top = -img_top  
        img_top = img_top*2  

        if(new_top_x < top){  
            if(new_top_d>top){  
                $(".box_top_left_99").css("top",top - new_top_x)  
                $(".box_top_right img").css("top",img_top)  
            }else{  
                $(".box_top_left_99").css("top",200)  
                $(".box_top_right img").css("top",-400)  
            }  
        }else{  
            $(".box_top_left_99").css("top",0)  
            $(".box_top_right img").css("top",0)  
        }  

    }).mouseout(function(){  
        $(".box_top_left_99").css("display","none")  
        $(".box_top_right").css("display","none")  
    })  
</script>  

  好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以在下方留言询问,或者跟其他人互动来解决都是可以的。

  本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

收起阅读 »

新手分享屏蔽全站原生导航条,点back就返回上一页

wap2app

W2A默认首页没导航条,其他一律新窗体打开页面,下面方法配置下sitemap即可

"pages": [
{
"webviewId": "W2Awwwwwwww",//首页
"matchUrls": [
{
"href": "http://wwwwwwww"
}, {
"href": "http://wwwwwwww/"
}, {
"pathname": "W:/*" //匹配所有页面
}
],
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色,
//首页不使用原生导航条,颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条,则建议将首页的statusbar配置为false,这样状态条可以和原生导航条背景色保持一致;
"background": "#f7f7f7"
}
},
"easyConfig":{
"back":{
"history":true //屏蔽了原生导航条允许执行history.back,则返回前一个页面
}
}

继续阅读 »

W2A默认首页没导航条,其他一律新窗体打开页面,下面方法配置下sitemap即可

"pages": [
{
"webviewId": "W2Awwwwwwww",//首页
"matchUrls": [
{
"href": "http://wwwwwwww"
}, {
"href": "http://wwwwwwww/"
}, {
"pathname": "W:/*" //匹配所有页面
}
],
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色,
//首页不使用原生导航条,颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条,则建议将首页的statusbar配置为false,这样状态条可以和原生导航条背景色保持一致;
"background": "#f7f7f7"
}
},
"easyConfig":{
"back":{
"history":true //屏蔽了原生导航条允许执行history.back,则返回前一个页面
}
}

收起阅读 »

a标签跳转链接问题

在做项目的时候使用a标签,想要跳转到<a href="www.douban.com"></a>,并没有跳转到百度,而是在本页内跳转,找到的原因如下:
href的格式:
1.xxx 相对路径跳转(前面没有/) 跳转到当前目录下的xxx, 如当前URL为xxx.com/aaa/bbb ,则跳转到xxx.com/aaa/xxx

  1. /xxx 绝对路径跳转(最前面一条/) 跳转到跟目录的xxx,如当前URL为xxx.com/aaa/bbb ,则跳转到xxx.com/xxx
  2. schema://host/uri 全路径跳转(协议://开头) 跳转到特定的url,host必须有,后面的/uri可以为空
    格式不符合全路径跳转的格式,默认就按照第一种处理了
    补充一下评论里的情况

//host/uri 的方式(两条杠开头),相当于省略协议,采用同本页面相同的协议
补充一点如果你不想写协议,*可以在路径前写上//*****,如//www.douban.com 这个采用的是与你的网站相同的协议发送请求。

继续阅读 »

在做项目的时候使用a标签,想要跳转到<a href="www.douban.com"></a>,并没有跳转到百度,而是在本页内跳转,找到的原因如下:
href的格式:
1.xxx 相对路径跳转(前面没有/) 跳转到当前目录下的xxx, 如当前URL为xxx.com/aaa/bbb ,则跳转到xxx.com/aaa/xxx

  1. /xxx 绝对路径跳转(最前面一条/) 跳转到跟目录的xxx,如当前URL为xxx.com/aaa/bbb ,则跳转到xxx.com/xxx
  2. schema://host/uri 全路径跳转(协议://开头) 跳转到特定的url,host必须有,后面的/uri可以为空
    格式不符合全路径跳转的格式,默认就按照第一种处理了
    补充一下评论里的情况

//host/uri 的方式(两条杠开头),相当于省略协议,采用同本页面相同的协议
补充一点如果你不想写协议,*可以在路径前写上//*****,如//www.douban.com 这个采用的是与你的网站相同的协议发送请求。

收起阅读 »

如何有效实现前端压缩图片并上传功能

压缩图片

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么燚轩科技下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器。

  以上传单张图片为例,多张图片同理,多嵌套一层循环即可。代码实现如下:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片压缩上传</title>
<link href="css/uploadSingleImg.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet"><!--自己书写input样式-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
</head>
<body>
<form>

<!--文件选择input-->  
<h3>文件选择:</h3>  
<input class="btn btn-default" type="file" id="upFile" multiple="multiple" />  

<h3>传给后台</h3>  
<input class="btn btn-default" type="button" id="upTo" value="提交"/>  

<!--后台所要获取的文件base64-->  
<h3>后台获取base64文件数据:(一个隐藏域)</h3>  
<input id="imgOne" name="imgOne" type="hidden"/>  

<!--所选文件压缩前预览-->  
<h3>压缩前预览:</h3>  
<img src="" id="preview"/>  
<div id="yulan1"></div>  
<!--所选文件压缩后预览-->  
<h3>压缩后预览:</h3>  
<img src="" id="nextview"/>  
<div id="yulan"></div>  

</form>
</body>
</html>

Js:
$(function(){
var _upFile=document.getElementById("upFile");

_upFile.addEventListener("change",function(){  

if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }    

for(var i=0;i<_upFile.files.length;i++){  
    var oFile = _upFile.files[i];   

    if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){    
        alert("照片上传:文件类型必须是JPG、JPEG、PNG");    
        return;    
    }  

    var reader = new FileReader();    
    reader.onload = function(e) {    
        var base64Img= e.target.result;  
        //压缩前预览  
        //$("#preview").attr("src",base64Img);    
        var str1 = '<img src="'+base64Img+'">';  
        $('#yulan1').append(str1);  
        //--执行resize。    
        var _ir=ImageResizer({    
                resizeMode:"auto"    
                ,dataSource:base64Img    
                ,dataSourceType:"base64"    
                ,maxWidth:1200 //允许的最大宽度    
                ,maxHeight:600 //允许的最大高度。    
                ,onTmpImgGenerate:function(img){    

                }    
                ,success:function(resizeImgBase64,canvas){  
                    //压缩后预览  
                    //$("#nextview").attr("src",resizeImgBase64);   
                    var str = '<img src="'+resizeImgBase64+'">';  
                    $('#yulan').append(str);  
                    //赋值到隐藏域传给后台  
                    $('#imgOne').val($('#imgOne').val()+';'+resizeImgBase64.substr(22));  

                }    
                ,debug:true    
        });    

    };    
    reader.readAsDataURL(oFile);   
}  

},false);    

$('#upTo').on('click',function(){  
    if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }  

    $.ajax({  
        url:'server.php',  
        type:'POST',  
        dataType:'json',  
        data:{  
            imgOne:$('#imgOne').val()  
        },  
        success:function(data){  
            alert(data.msg);  
        }  
    });  
});  

});

php处理:
<?php
$img=trim($_POST['imgOne'],';');
$imgarr=explode(';', $img);
foreach($imgarr as $k=>$v){
//解码
$tmp = base64_decode($v);
//写文件
$filename=time().$k.'.jpg';
$path='./upload/';
file_put_contents($path.$filename, $tmp);
}
$res['msg']='上传成功!';
echo json_encode($res);

  该方法实现了PC端文件多选,在手机端可以多次选择上传多张图片的效果,现在已经理解的程序员可以尝试一下了,如果还存在不理解的地方,可以在下方留言讨论。

  本文由专业的app开发公司燚轩科技整理发布,如需转载请注明原文作者及出处!

继续阅读 »

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么燚轩科技下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器。

  以上传单张图片为例,多张图片同理,多嵌套一层循环即可。代码实现如下:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片压缩上传</title>
<link href="css/uploadSingleImg.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet"><!--自己书写input样式-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
</head>
<body>
<form>

<!--文件选择input-->  
<h3>文件选择:</h3>  
<input class="btn btn-default" type="file" id="upFile" multiple="multiple" />  

<h3>传给后台</h3>  
<input class="btn btn-default" type="button" id="upTo" value="提交"/>  

<!--后台所要获取的文件base64-->  
<h3>后台获取base64文件数据:(一个隐藏域)</h3>  
<input id="imgOne" name="imgOne" type="hidden"/>  

<!--所选文件压缩前预览-->  
<h3>压缩前预览:</h3>  
<img src="" id="preview"/>  
<div id="yulan1"></div>  
<!--所选文件压缩后预览-->  
<h3>压缩后预览:</h3>  
<img src="" id="nextview"/>  
<div id="yulan"></div>  

</form>
</body>
</html>

Js:
$(function(){
var _upFile=document.getElementById("upFile");

_upFile.addEventListener("change",function(){  

if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }    

for(var i=0;i<_upFile.files.length;i++){  
    var oFile = _upFile.files[i];   

    if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){    
        alert("照片上传:文件类型必须是JPG、JPEG、PNG");    
        return;    
    }  

    var reader = new FileReader();    
    reader.onload = function(e) {    
        var base64Img= e.target.result;  
        //压缩前预览  
        //$("#preview").attr("src",base64Img);    
        var str1 = '<img src="'+base64Img+'">';  
        $('#yulan1').append(str1);  
        //--执行resize。    
        var _ir=ImageResizer({    
                resizeMode:"auto"    
                ,dataSource:base64Img    
                ,dataSourceType:"base64"    
                ,maxWidth:1200 //允许的最大宽度    
                ,maxHeight:600 //允许的最大高度。    
                ,onTmpImgGenerate:function(img){    

                }    
                ,success:function(resizeImgBase64,canvas){  
                    //压缩后预览  
                    //$("#nextview").attr("src",resizeImgBase64);   
                    var str = '<img src="'+resizeImgBase64+'">';  
                    $('#yulan').append(str);  
                    //赋值到隐藏域传给后台  
                    $('#imgOne').val($('#imgOne').val()+';'+resizeImgBase64.substr(22));  

                }    
                ,debug:true    
        });    

    };    
    reader.readAsDataURL(oFile);   
}  

},false);    

$('#upTo').on('click',function(){  
    if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }  

    $.ajax({  
        url:'server.php',  
        type:'POST',  
        dataType:'json',  
        data:{  
            imgOne:$('#imgOne').val()  
        },  
        success:function(data){  
            alert(data.msg);  
        }  
    });  
});  

});

php处理:
<?php
$img=trim($_POST['imgOne'],';');
$imgarr=explode(';', $img);
foreach($imgarr as $k=>$v){
//解码
$tmp = base64_decode($v);
//写文件
$filename=time().$k.'.jpg';
$path='./upload/';
file_put_contents($path.$filename, $tmp);
}
$res['msg']='上传成功!';
echo json_encode($res);

  该方法实现了PC端文件多选,在手机端可以多次选择上传多张图片的效果,现在已经理解的程序员可以尝试一下了,如果还存在不理解的地方,可以在下方留言讨论。

  本文由专业的app开发公司燚轩科技整理发布,如需转载请注明原文作者及出处!

收起阅读 »

从这些天的广告联盟收入看

广告

心真的凉凉的.....

加油啊,其实展示跟点击都不错的,官方有认真去谈价格吗

心真的凉凉的.....

加油啊,其实展示跟点击都不错的,官方有认真去谈价格吗

百度地图接口快速调用,一键生成百度地图

百度地图

对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何的编程语言,所以有兴趣的编程开发者可以保存一下。

body之间源代码如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

<div id="map" class="map_cont" style="width:600px;height:400px"></div>

<script type="text/javascript">  
    //创建和初始化地图函数:  
    function initMap() {  
        createMap();//创建地图  
        setMapEvent();//设置地图事件  
        addMapControl();//向地图添加控件  
        addMarker();//向地图中添加marker  
    }  

    //创建地图函数:  
    function createMap() {  
        var map = new BMap.Map("map");//在百度地图容器中创建一个地图  
        var point = new BMap.Point(113.610508, 34.766151);//定义一个中心点坐标  
        map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中  
        window.map = map;//将map变量存储在全局  
    }  

    //地图事件设置函数:  
    function setMapEvent() {  
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)  
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小  
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)  
        map.enableKeyboard();//启用键盘上下左右键移动地图  
    }  

    //地图控件添加函数:  
    function addMapControl() {  
        //向地图中添加缩放控件  
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });  
        map.addControl(ctrl_nav);  
        //向地图中添加缩略图控件  
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });  
        map.addControl(ctrl_ove);  
        //向地图中添加比例尺控件  
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });  
        map.addControl(ctrl_sca);  
    }  
    //标注点数组  
    var markerArr = [{  
        title: "公司或地点名称",  
        content: "地址:详细的地址<br/>电话:公司的联系方式",  
        point: "113.610508|34.766151",  
        // point: "118.762938|32.069151",   
        isOpen: 0,  
        icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 }  
    }  
    ];  
    //创建marker  
    function addMarker() {  
        for (var i = 0; i < markerArr.length; i++) {  
            var json = markerArr[i];  
            var p0 = json.point.split("|")[0];  
            var p1 = json.point.split("|")[1];  
            var point = new BMap.Point(p0, p1);  
            var iconImg = createIcon(json.icon);  
            var marker = new BMap.Marker(point, { icon: iconImg });  
            var iw = createInfoWindow(i);  
            var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });  
            marker.setLabel(label);  
            map.addOverlay(marker);  
            label.setStyle({  
                borderColor: "#808080",  
                color: "#333",  
                cursor: "pointer"  
            });  

            (function () {  
                var index = i;  
                var _iw = createInfoWindow(i);  
                var _marker = marker;  
                _marker.addEventListener("click", function () {  
                    this.openInfoWindow(_iw);  
                });  
                _iw.addEventListener("open", function () {  
                    _marker.getLabel().hide();  
                })  
                _iw.addEventListener("close", function () {  
                    _marker.getLabel().show();  
                })  
                label.addEventListener("click", function () {  
                    _marker.openInfoWindow(_iw);  
                })  
                if (!!json.isOpen) {  
                    label.hide();  
                    _marker.openInfoWindow(_iw);  
                }  
            })()  
        }  
    }  
    //创建InfoWindow  
    function createInfoWindow(i) {  
        var json = markerArr[i];  
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.jpg", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })  
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");  
        return iw;  
    }  
    //创建一个Icon  
    function createIcon(json) {  
    }  
    initMap();//创建和初始化地图  

</script>  

相信尝试过之后,各位编程技术人员已经看到效果了,如果有什么好的想法,可以在下方评论区留言,我们互相共同进步。

原文来源app开发燚轩科技官网(http://www.appsaa.com),如需转载请注明原文作者及出处!

继续阅读 »

对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何的编程语言,所以有兴趣的编程开发者可以保存一下。

body之间源代码如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

<div id="map" class="map_cont" style="width:600px;height:400px"></div>

<script type="text/javascript">  
    //创建和初始化地图函数:  
    function initMap() {  
        createMap();//创建地图  
        setMapEvent();//设置地图事件  
        addMapControl();//向地图添加控件  
        addMarker();//向地图中添加marker  
    }  

    //创建地图函数:  
    function createMap() {  
        var map = new BMap.Map("map");//在百度地图容器中创建一个地图  
        var point = new BMap.Point(113.610508, 34.766151);//定义一个中心点坐标  
        map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中  
        window.map = map;//将map变量存储在全局  
    }  

    //地图事件设置函数:  
    function setMapEvent() {  
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)  
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小  
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)  
        map.enableKeyboard();//启用键盘上下左右键移动地图  
    }  

    //地图控件添加函数:  
    function addMapControl() {  
        //向地图中添加缩放控件  
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });  
        map.addControl(ctrl_nav);  
        //向地图中添加缩略图控件  
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });  
        map.addControl(ctrl_ove);  
        //向地图中添加比例尺控件  
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });  
        map.addControl(ctrl_sca);  
    }  
    //标注点数组  
    var markerArr = [{  
        title: "公司或地点名称",  
        content: "地址:详细的地址<br/>电话:公司的联系方式",  
        point: "113.610508|34.766151",  
        // point: "118.762938|32.069151",   
        isOpen: 0,  
        icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 }  
    }  
    ];  
    //创建marker  
    function addMarker() {  
        for (var i = 0; i < markerArr.length; i++) {  
            var json = markerArr[i];  
            var p0 = json.point.split("|")[0];  
            var p1 = json.point.split("|")[1];  
            var point = new BMap.Point(p0, p1);  
            var iconImg = createIcon(json.icon);  
            var marker = new BMap.Marker(point, { icon: iconImg });  
            var iw = createInfoWindow(i);  
            var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });  
            marker.setLabel(label);  
            map.addOverlay(marker);  
            label.setStyle({  
                borderColor: "#808080",  
                color: "#333",  
                cursor: "pointer"  
            });  

            (function () {  
                var index = i;  
                var _iw = createInfoWindow(i);  
                var _marker = marker;  
                _marker.addEventListener("click", function () {  
                    this.openInfoWindow(_iw);  
                });  
                _iw.addEventListener("open", function () {  
                    _marker.getLabel().hide();  
                })  
                _iw.addEventListener("close", function () {  
                    _marker.getLabel().show();  
                })  
                label.addEventListener("click", function () {  
                    _marker.openInfoWindow(_iw);  
                })  
                if (!!json.isOpen) {  
                    label.hide();  
                    _marker.openInfoWindow(_iw);  
                }  
            })()  
        }  
    }  
    //创建InfoWindow  
    function createInfoWindow(i) {  
        var json = markerArr[i];  
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.jpg", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })  
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");  
        return iw;  
    }  
    //创建一个Icon  
    function createIcon(json) {  
    }  
    initMap();//创建和初始化地图  

</script>  

相信尝试过之后,各位编程技术人员已经看到效果了,如果有什么好的想法,可以在下方评论区留言,我们互相共同进步。

原文来源app开发燚轩科技官网(http://www.appsaa.com),如需转载请注明原文作者及出处!

收起阅读 »

关于微信支付的那点事

微信支付

用了一天多时间才把微信支付调起来,中间有一些弯路,把经验分享出来以免后来人浪费时间。
统一下单生成prepayid我就不赘述了,这是最基本的。
在h5调用支付时,最最关键的参数 官方没说明白 微信官方也没说明白。
这是相关的参数。
prepayid(统一下单里返回的标识符),
partnerid(商户号),
appid,
package(微信要求必须有,内容是“Sign=WXPay”),
noncestr(随机数,不适用微信统一下单时返回的,是重新生成一个 关键!!!!),
timestamp(时间戳,十位,注意统一下单里的时间是完整的时间,这里是时间戳,是重新生成一个 关键!!!!),
sign(签名,将上述字段重新签名,而不是用统一下单返回的sign 关键!!!!)。
请注意括号里关键!!!!的内容。
总的说就是调起支付接口需要重新签名。不要使用统一下单里返回的相关内容。

最后说是一下dcloud的文档,老生常谈了比较差。还有论坛里的文档,我看也有调起支付的还有图,但为什么就是不说明白签名
这一步呢,还传上了调起支付的截图。我表示怀疑是否真的成功调起来了。

最后感谢一下https://blog.csdn.net/the_knife/article/details/70141203

继续阅读 »

用了一天多时间才把微信支付调起来,中间有一些弯路,把经验分享出来以免后来人浪费时间。
统一下单生成prepayid我就不赘述了,这是最基本的。
在h5调用支付时,最最关键的参数 官方没说明白 微信官方也没说明白。
这是相关的参数。
prepayid(统一下单里返回的标识符),
partnerid(商户号),
appid,
package(微信要求必须有,内容是“Sign=WXPay”),
noncestr(随机数,不适用微信统一下单时返回的,是重新生成一个 关键!!!!),
timestamp(时间戳,十位,注意统一下单里的时间是完整的时间,这里是时间戳,是重新生成一个 关键!!!!),
sign(签名,将上述字段重新签名,而不是用统一下单返回的sign 关键!!!!)。
请注意括号里关键!!!!的内容。
总的说就是调起支付接口需要重新签名。不要使用统一下单里返回的相关内容。

最后说是一下dcloud的文档,老生常谈了比较差。还有论坛里的文档,我看也有调起支付的还有图,但为什么就是不说明白签名
这一步呢,还传上了调起支付的截图。我表示怀疑是否真的成功调起来了。

最后感谢一下https://blog.csdn.net/the_knife/article/details/70141203

收起阅读 »