文章 - DCloud问答

Hbuilder使用genymotion模拟器进行调试

真机联调模拟器 genymotion

最近在研究移动app，想使用genymotion在做联调，结果发现Hbuilder不能自动检测到genymotion模拟器。
环境：
1.Hbuilder 8.1.1
2.genymotion 2.9
3.virtual box 5.18
4.android sdk （android 6.0）
配置好genymotion，使用android studio已经可以正常连接了，genymotion设置中，使用了android sdk 的platform-tools下的adb

打开hbuilder，却死活连不上这个genymotion模拟器。

经过百度，发现是因为hbuilder使用的是自己tools目录下的adb，而genymotion使用的也是自己tools目录下的adb（或者可以设置为android sdk下platform-tools目录下的adb），造成两个adb之间冲突。经过测试，可以自己编一个bat或者ps1文件，把genymotion的adb先kill掉，然后用hbuilder的adb去连接模拟器就可以了。

流程如下：
1.进入genymotion的adb目录，用命令.\adb devices查看当前连接地址（如：192.168.173.101:5555）

PS D:\Applications\Android\SDK\platform-tools> .\adb devices  
List of devices attached  
192.168.173.101:5555    device

使用命令taskkill /f /im adb.exe杀掉所有的adb进程（在此之前可能需要先重命名adb.exe文件，不然它还会自动启动）

PS D:\Applications\Android\SDK\platform-tools>ren adb.exe adb1.exe  
PS D:\Applications\Android\SDK\platform-tools>taskkill /f /im adb.exe  
成功: 已终止进程 "adb.exe"，其 PID 为 11512。  
成功: 已终止进程 "adb.exe"，其 PID 为 5732。  
成功: 已终止进程 "adb.exe"，其 PID 为 6768。

进入hbuilder的tools目录，执行命令.\adb connect 192.168.173.101:5555(ip:port就是上面通过adb devices查看到的)

PS D:\Applications\Android\SDK\platform-tools>pushd D:\Applications\HBuilder\tools  
PS D:\Applications\HBuilder\tools> .\adb connect 192.168.173.101:5555

重启hbuilder应该就能看到连接上模拟器了。（记得把genymotion的adb名字改回去，不然下回不能用了）

PS D:\Applications\HBuilder\tools> pushd D:\Applications\Android\SDK\platform-tools  
PS D:\Applications\Android\SDK\platform-tools>ren adb1.exe adb.exe

经过测试，成功连接到genymotion模拟器，所以，总结上面的命令，写了个简单ps1命令，用powershell（或者存为bat文件，双击运行即可）运行就可以了（里面文件目录、模拟器地址等要根据实际情况作调整）

pushd D:\Applications\Android\SDK\platform-tools  
.\adb devices  
ren adb.exe adb1.exe  
pushd D:\Applications\HBuilder\tools  
taskkill /f /im adb.exe  
.\adb connect 192.168.173.101:5555  
pushd D:\Applications\Android\SDK\platform-tools  
ren adb1.exe adb.exe  

pause

继续阅读 »

最近在研究移动app，想使用genymotion在做联调，结果发现Hbuilder不能自动检测到genymotion模拟器。
环境：
1.Hbuilder 8.1.1
2.genymotion 2.9
3.virtual box 5.18
4.android sdk （android 6.0）
配置好genymotion，使用android studio已经可以正常连接了，genymotion设置中，使用了android sdk 的platform-tools下的adb

打开hbuilder，却死活连不上这个genymotion模拟器。

经过百度，发现是因为hbuilder使用的是自己tools目录下的adb，而genymotion使用的也是自己tools目录下的adb（或者可以设置为android sdk下platform-tools目录下的adb），造成两个adb之间冲突。经过测试，可以自己编一个bat或者ps1文件，把genymotion的adb先kill掉，然后用hbuilder的adb去连接模拟器就可以了。

流程如下：
1.进入genymotion的adb目录，用命令.\adb devices查看当前连接地址（如：192.168.173.101:5555）

PS D:\Applications\Android\SDK\platform-tools> .\adb devices  
List of devices attached  
192.168.173.101:5555    device

使用命令taskkill /f /im adb.exe杀掉所有的adb进程（在此之前可能需要先重命名adb.exe文件，不然它还会自动启动）

PS D:\Applications\Android\SDK\platform-tools>ren adb.exe adb1.exe  
PS D:\Applications\Android\SDK\platform-tools>taskkill /f /im adb.exe  
成功: 已终止进程 "adb.exe"，其 PID 为 11512。  
成功: 已终止进程 "adb.exe"，其 PID 为 5732。  
成功: 已终止进程 "adb.exe"，其 PID 为 6768。

进入hbuilder的tools目录，执行命令.\adb connect 192.168.173.101:5555(ip:port就是上面通过adb devices查看到的)

PS D:\Applications\Android\SDK\platform-tools>pushd D:\Applications\HBuilder\tools  
PS D:\Applications\HBuilder\tools> .\adb connect 192.168.173.101:5555

重启hbuilder应该就能看到连接上模拟器了。（记得把genymotion的adb名字改回去，不然下回不能用了）

PS D:\Applications\HBuilder\tools> pushd D:\Applications\Android\SDK\platform-tools  
PS D:\Applications\Android\SDK\platform-tools>ren adb1.exe adb.exe

经过测试，成功连接到genymotion模拟器，所以，总结上面的命令，写了个简单ps1命令，用powershell（或者存为bat文件，双击运行即可）运行就可以了（里面文件目录、模拟器地址等要根据实际情况作调整）

pushd D:\Applications\Android\SDK\platform-tools  
.\adb devices  
ren adb.exe adb1.exe  
pushd D:\Applications\HBuilder\tools  
taskkill /f /im adb.exe  
.\adb connect 192.168.173.101:5555  
pushd D:\Applications\Android\SDK\platform-tools  
ren adb1.exe adb.exe  

pause

收起阅读 »

h5+免费教程、mui免费教程、各类app开发实战教程更新中，一起努力共同进步！！

mui

hcoder 一直致力于奉献高质量的视频教程，官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点： JavaScript 快速提高视频教程
实战： MUI、H5 APP 实战教程 - 仿《有道词典》
知识点： HBuilder 8.0.1 APP开发 - 新功能全接触
知识点： APP开发教程 - 启动动画
知识点： APP开发实例教程 - 窗口切换
知识点：移动端图片剪裁、上传视频教程
知识点： app开发教程-用户注册、登录
实战： APP开发实战 - 新闻客户端
知识点： HTML 5 开发教程
知识点： mui 全套教程

免费教程地址
http://www.hcoder.net/course/index/cate/4

继续阅读 »

h5+免费教程、mui免费教程、各类app开发实战教程更新中，一起努力共同进步！！

mui

hcoder 一直致力于奉献高质量的视频教程，官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点： JavaScript 快速提高视频教程
实战： MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点： HBuilder 8.0.1 APP开发 - 新功能全接触
知识点： APP开发教程 - 启动动画
知识点： APP开发实例教程 - 窗口切换
知识点：移动端图片剪裁、上传视频教程
知识点： app开发教程-用户注册、登录
实战： APP开发实战 - 新闻客户端
知识点： HTML 5 + 开发教程
知识点： mui 全套教程

免费教程地址
http://www.hcoder.net/course/index/cate/4

继续阅读 »

关于 Ajax请求跨域问题

技巧 AJAX跨域

这个问题困扰我很久以致我一直没办法调试。分享一下解决过程。
首先：这里有个相对完美的总结 ajax跨域，这应该是最全的解决方案了。
基本原理：mui执行ajax请求在浏览器中，默认跨域，然后需要遵循一个 cors的协议。预先进行一次options请求的嗅探。
以判断服务器是否支持对应请求。
那么对于这个嗅探的options请求服务端需要作出响应。参看文前那篇文章，在chrome中看到需要给options响应设置响应头。
那么我的后端是用python实现的。
关键是 Access-Control-Allow-Headers:content-type, x-requested-with
我漏写了 content-type。

继续阅读 »

IOS离线高德地图切换

IOS离线高德地图切换：
1、按照官方一一配置OK；
2.、删除百度地图库libbmapimp.a；

完成

独家系统全套mui，h5+教程，500节课程，文档，资料，20套app源码等

HelloH5 hellomui Hello HBuilder mui

HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui，h5+ APP开发实战功能 app开发{仿支付宝，仿微信，仿e袋洗，仿驾考宝典，仿微店，仿教室帮，仿饿了么，仿糗事百科，仿猫眼电影，仿天猫，仿今日头条，东翌同城约，东翌课堂，全套实战开发，让大家快速学习APP开发全体课程只需要499啦想学习的点击链接咨询& 十点直播课程点击进入群：239503027

继续阅读 »

HBuilder 8.1.1-alpha版发布，解决若干5+App问题

HBuilder 升级更新 Runtime

HBuilder 8.1.1.201704142048-alpha版发布，解决若干5+App问题

下载地址：http://pan.baidu.com/s/1hs0O4eS

更新日志：

IDE

优化启动速度
解决流应用发布有时无法打开更新模式选择框的问题

App

Android平台修复图片压缩可能引起程序崩溃的问题
Android平台修复设置手动关闭Splash界面也可能会在首页加载完成后自动关闭的问题
Android平台修复在小米手机上二维码中调用开启闪光灯可能失效的问题
Android平台修复Webview子窗口隐藏(hide)后再添加到父窗口后第一次调用show方法可能无法显示的问题
iOS平台修复父子Webview嵌套时软键盘在adjustResize模式弹出时显示不正确的问题
iOS平台修复原生View控件添加到Webview窗口后未跟随窗口的关闭而销毁的问题
iOS平台修复Webview窗口无法加载URL地址中包含中文的问题

继续阅读 »

安装wgtu失败：HTML5+Runtime缺少升级包manifest.json中配置的模块：maps

差量升级

做升级升级时候的问题，一开始是认为项目的Maps权限不对，后面才发现是升级配置的MGTU里面的mainfest.json里面有Maps权限而原版本没有

。
这里面的manifest.json如果没配置Maps的SDK要把Maps权限去掉!

继续阅读 »

花小钱赚大钱的机会来啦，你还在顾虑什么呢，快速学习mui h5+ 开发自己的项目或者工作哦全体的mui h5+ 课程

HBuilder mui

HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui，h5+ APP开发实战功能 app开发{仿支付宝，仿微信，仿e袋洗，仿驾考宝典，仿微店，仿教室帮，仿饿了么，仿糗事百科，仿猫眼电影，仿天猫，仿今日头条，东翌同城约，东翌课堂，全套实战开发，让大家快速学习APP开发全体课程只需要499啦想学习的点击链接咨询三点直播课程点击进入群：239503027

继续阅读 »

安卓也可以侧滑返回webview窗口

侧滑返回

给需要侧滑返回的页面加这些

<!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" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  

            function plusReady() {  
                //获取当前窗口  
                var ws = plus.webview.currentWebview();  
                //监听当前侧滑窗口的右滑  
                ws.drag({  
                    direction: 'right',  
                    moveMode: 'followFinger'  
                }, {  
                    view: plus.runtime.appid,  
                    moveMode: 'silent'  
                }, function(e) {  
                //滑动到end执行mui.back()事件  
                    if(e.type == 'end' && e.result) {  
                        mui.back();  
                    }  
                });  
            }  
            if(window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">窗口侧滑关闭</h1>  
        </header>  
    </body>  

</html>

继续阅读 »

给需要侧滑返回的页面加这些

<!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" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  

            function plusReady() {  
                //获取当前窗口  
                var ws = plus.webview.currentWebview();  
                //监听当前侧滑窗口的右滑  
                ws.drag({  
                    direction: 'right',  
                    moveMode: 'followFinger'  
                }, {  
                    view: plus.runtime.appid,  
                    moveMode: 'silent'  
                }, function(e) {  
                //滑动到end执行mui.back()事件  
                    if(e.type == 'end' && e.result) {  
                        mui.back();  
                    }  
                });  
            }  
            if(window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">窗口侧滑关闭</h1>  
        </header>  
    </body>  

</html>

收起阅读 »

其实安卓也可以侧滑返回webview窗口

侧滑返回

给要侧滑返回的窗口加这个代码

<!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" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  

            function plusReady() {  
                //获取当前窗口  
                var ws = plus.webview.currentWebview();  
                //监听当前侧滑窗口的右滑  
                ws.drag({  
                    direction: 'right',  
                    moveMode: 'followFinger'  
                }, {  
                    view: plus.runtime.appid,  
                    moveMode: 'silent'  
                }, function(e) {  
                //滑动到end执行mui.back()事件  
                    if(e.type == 'end' && e.result) {  
                        mui.back();  
                    }  
                });  
            }  
            if(window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">窗口侧滑关闭</h1>  
        </header>  
    </body>  

</html>

继续阅读 »

给要侧滑返回的窗口加这个代码

<!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" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  

            function plusReady() {  
                //获取当前窗口  
                var ws = plus.webview.currentWebview();  
                //监听当前侧滑窗口的右滑  
                ws.drag({  
                    direction: 'right',  
                    moveMode: 'followFinger'  
                }, {  
                    view: plus.runtime.appid,  
                    moveMode: 'silent'  
                }, function(e) {  
                //滑动到end执行mui.back()事件  
                    if(e.type == 'end' && e.result) {  
                        mui.back();  
                    }  
                });  
            }  
            if(window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">窗口侧滑关闭</h1>  
        </header>  
    </body>  

</html>

收起阅读 »

背景变灰解决分享

这个问题也是困扰了我1天，按照逐个找MUI.MIN.CSS文件的结构发现body{font-family:sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#efeff4; 是控制BODY部分的灰色背景图，如果以后有遇到的码友将其更改就#fff或者#ffffff就行了。
如果是别的地方变灰逐个查找相应的COLOR 改为你想要的颜色即可。

继续阅读 »

更新日志：

IDE

App

更新日志：

IDE

App

热门文章