HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于 Ajax请求跨域问题

技巧 AJAX跨域

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

继续阅读 »

这个问题困扰我很久以致我一直没办法调试。分享一下解决过程。
首先:这里有个相对完美的总结 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;

  1. 完成

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

  1. 完成

独家系统全套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

继续阅读 »

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地址中包含中文的问题
继续阅读 »

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权限去掉!

继续阅读 »


做升级升级时候的问题,一开始是认为项目的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

继续阅读 »

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 改为你想要的颜色即可。

继续阅读 »

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

收起阅读 »

更多加载AJAX方法

   var page=1; /*延期加载专用*/  
   var status=false; /*冲突加载专用*/  
    function loadMore(url,total){  
        if(status){  
            return false;  
        }  
        setTimeout(function(){  
            page++; /*分页专用*/  
            $.ajax({  
                //提交数据的类型 POST GET  
                type:"POST",  
                //提交的网址  
                url:url,  
                //提交的数据  
                data:"json=home&page="+page,  
                //返回数据的格式  
                datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".  
                //在请求之前调用的函数  
                beforeSend:function(){  
                    status=true;  
                    $("#loading").show().html('加载中,请稍候');  
                },  
                //成功返回之后调用的函数  
                success:function(result){  
                    /*console.info(result);*/  
                    status=false;  
                    $("#loading").hide();  
                    $.each(result, function(key,value){  

                    });  
                    if(total>result.length){  
                        $("#loading").show().html('没了,还加载啥');  
                        status=true;  
                    }  
                },  
                //调用出错执行的函数  
                error: function(){  
                   status=true;  
                    $("#loading").show().html('网络异常');  
                }  
            });  
        }, 500);  
    }  

    $(function(){  
        $(window).scroll(function() {  
            //当内容滚动到底部时加载新的内容  
            if ($(this).scrollTop() + $(window).height() + 30 >= $(document).height() && $(this).scrollTop() > 30) {  
                //当前要加载的页码  
                loadMore(url,20);  
            }  
        });  
    });
继续阅读 »
   var page=1; /*延期加载专用*/  
   var status=false; /*冲突加载专用*/  
    function loadMore(url,total){  
        if(status){  
            return false;  
        }  
        setTimeout(function(){  
            page++; /*分页专用*/  
            $.ajax({  
                //提交数据的类型 POST GET  
                type:"POST",  
                //提交的网址  
                url:url,  
                //提交的数据  
                data:"json=home&page="+page,  
                //返回数据的格式  
                datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".  
                //在请求之前调用的函数  
                beforeSend:function(){  
                    status=true;  
                    $("#loading").show().html('加载中,请稍候');  
                },  
                //成功返回之后调用的函数  
                success:function(result){  
                    /*console.info(result);*/  
                    status=false;  
                    $("#loading").hide();  
                    $.each(result, function(key,value){  

                    });  
                    if(total>result.length){  
                        $("#loading").show().html('没了,还加载啥');  
                        status=true;  
                    }  
                },  
                //调用出错执行的函数  
                error: function(){  
                   status=true;  
                    $("#loading").show().html('网络异常');  
                }  
            });  
        }, 500);  
    }  

    $(function(){  
        $(window).scroll(function() {  
            //当内容滚动到底部时加载新的内容  
            if ($(this).scrollTop() + $(window).height() + 30 >= $(document).height() && $(this).scrollTop() > 30) {  
                //当前要加载的页码  
                loadMore(url,20);  
            }  
        });  
    });
收起阅读 »

App 开发实战教程 -《有道词典》、《今日头条》!更多免费视频教程(mui、h5+、h.js)等教程汇总

mui

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布!


总计10节:
1、入口页面布局子页面布局(含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式
腾讯课堂:
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!

交流qq群
1群 335126794(已满), 2群 340610532

hcoder 一直致力于奉献高质量 教程,官网上 mui h5+ 等免费教程播放量已经达到5万,收点费用为了做的更好,希望大家理解。
免费教程地址
http://www.hcoder.net/course

继续阅读 »

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布!


总计10节:
1、入口页面布局子页面布局(含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式
腾讯课堂:
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!

交流qq群
1群 335126794(已满), 2群 340610532

hcoder 一直致力于奉献高质量 教程,官网上 mui h5+ 等免费教程播放量已经达到5万,收点费用为了做的更好,希望大家理解。
免费教程地址
http://www.hcoder.net/course

收起阅读 »

关于Hbuilder无法检测Genymotion模拟器的解决办法

genymotion

随便说两句

这两天因为安卓测试机无法使用,开始捣腾起模拟器,先是用了 Android SDK,但是不好用,而且步骤繁琐,后来用了Genymotion,下载很方便,在这里我就不讲怎么下载和安装,直接讲我是怎么解决Hbuilder无法识别的问题。

废话不多说

产生这个问题的原因一般是 adb 冲突,因为Hbuilder和Genymotion都有各自的adb,我们先找到它们各自的文件所在目录路径。
以我自己的路径为例:
D:\Genymotion\tools
D:\Hbuilder\tools

然后跟着我的步骤做

首先运行你的Genymotion模拟器

(1) 按快捷键 “WIN R” 并输入 cmd,回车

(2) 输入命令 进入你的Genymotion文件中中tools目录下

(3) 输入命令 .\adb devices
你会看到一个IP和端口(如我的是:192.168.194.101:5555),记下来,后面要用

(4)在计算机Genymotion文件夹tools目录下,找到adb.exe,将它重命名(随意),方便我们kill进程

(5) 同时也打开Hbuilder,然后启动任务管理器,将所有的adb.exe进程都结束掉

(6) 再回到cmd,进到Hbuilder目录下的tools目录下,输入 .\adb connect 192.168.194.101:5555 这里的IP和端口替换第3步你的那个

(7)再看看你的Hbuilder(点一下这个小箭头),会看到已经连接到你的设备

(8)大功告成,最后记得把Genymotion的adb.exe文件改回来,不然下次运行模拟器就会有问题(默认名字是 adb.exe)

但是!我想大家也发现了,我们每次连接模拟器难道都要做这些吗,好麻烦(懒癌犯了),所以我写了一个简单的批处理。
可以新建一个txt文件,然后复制下面这段进去(相应的路径根据自己的两个adb文件路径替换,相信兄弟们都是很有灵性的)

d:

rename \Genymotion\tools\adb.exe adb_t.exe

taskkill /f /fi "STATUS ne Running" /im adb.exe

cd \Hbuilder\tools

.\adb connect 192.168.194.101:5555

rename \Genymotion\tools\adb_t.exe adb.exe

pause

然后另存为一个后缀为.bat的批处理文件(另存为的时候记得选所以文件,编码不要去修改)

好了,以后每次只要先打开Hbuilder和Genymotion,然后双击点开我们的批处理文件,搞定

赶紧去试一试!

继续阅读 »

随便说两句

这两天因为安卓测试机无法使用,开始捣腾起模拟器,先是用了 Android SDK,但是不好用,而且步骤繁琐,后来用了Genymotion,下载很方便,在这里我就不讲怎么下载和安装,直接讲我是怎么解决Hbuilder无法识别的问题。

废话不多说

产生这个问题的原因一般是 adb 冲突,因为Hbuilder和Genymotion都有各自的adb,我们先找到它们各自的文件所在目录路径。
以我自己的路径为例:
D:\Genymotion\tools
D:\Hbuilder\tools

然后跟着我的步骤做

首先运行你的Genymotion模拟器

(1) 按快捷键 “WIN R” 并输入 cmd,回车

(2) 输入命令 进入你的Genymotion文件中中tools目录下

(3) 输入命令 .\adb devices
你会看到一个IP和端口(如我的是:192.168.194.101:5555),记下来,后面要用

(4)在计算机Genymotion文件夹tools目录下,找到adb.exe,将它重命名(随意),方便我们kill进程

(5) 同时也打开Hbuilder,然后启动任务管理器,将所有的adb.exe进程都结束掉

(6) 再回到cmd,进到Hbuilder目录下的tools目录下,输入 .\adb connect 192.168.194.101:5555 这里的IP和端口替换第3步你的那个

(7)再看看你的Hbuilder(点一下这个小箭头),会看到已经连接到你的设备

(8)大功告成,最后记得把Genymotion的adb.exe文件改回来,不然下次运行模拟器就会有问题(默认名字是 adb.exe)

但是!我想大家也发现了,我们每次连接模拟器难道都要做这些吗,好麻烦(懒癌犯了),所以我写了一个简单的批处理。
可以新建一个txt文件,然后复制下面这段进去(相应的路径根据自己的两个adb文件路径替换,相信兄弟们都是很有灵性的)

d:

rename \Genymotion\tools\adb.exe adb_t.exe

taskkill /f /fi "STATUS ne Running" /im adb.exe

cd \Hbuilder\tools

.\adb connect 192.168.194.101:5555

rename \Genymotion\tools\adb_t.exe adb.exe

pause

然后另存为一个后缀为.bat的批处理文件(另存为的时候记得选所以文件,编码不要去修改)

好了,以后每次只要先打开Hbuilder和Genymotion,然后双击点开我们的批处理文件,搞定

赶紧去试一试!

收起阅读 »