文章 - DCloud问答

问题描述

许多开发者使用mui.ajax()在浏览器中调试时，控制台总会出现这样的错误信息：
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
出现这种错误的原因在于浏览器的同源策略，使得本域脚本只能读写本域内的资源，而无法访问其它域的资源，造成了我们常说的“跨域”问题。

问题分析

Web跨域访问的实现

浅谈WEB跨域的实现（前端向）
Web应用跨域访问解决方案汇总
网上有许多关于跨域问题的解决方案，这里知识提供两篇文章供大家参考。

JSON和JSONP

提起跨域实现，其实最容易想到的就是JSONP。这种技术方案已经非常流行，网上也有大量的资料供我们学习和参考。
说说JSON和JSONP，也许你会豁然开朗
 jsonp详解
 JSONP 的工作原理是什么？
JSONP 教程

解决方案

mui.ajax()

查看源码我们会发现mui.ajax()会根据运行情景的不同，而创建不同的XMLHttpRequest。
扩展阅读：mui.ajax()方法中的XMLHttpRequest

在5+默认的UIWebview中被允许调用window的XHR进行跨域访问。
并且5+提供的XHR也是可以进行跨域访问的。
如何判断Runtime是否支持5+ API

mui.getJSONP()

mui同样提供了JSONP的插件（mui.jsonp.js见附件）来实现Web跨域，方法为mui.getJSONP()。
该方法有三个参数：

url——请求发送的目标地址（String）
data——发送到服务器的业务数据（Object）
callback——请求回调函数（Function）

请求方式默认并始终是GET方式，因为JSONP实际是在客户端动态添加了个<script></script>然后将url指向要请求的地址，script是没有同源策略的。

示例（后端为php）

php部分

<?php  
header('Content-type: application/json');  
//获取回调函数名  
$callbackName = $_GET["callback"];  
//json数据  
$json_data = '["customername1","customername2"]';  
//输出jsonp格式的数据  
echo $callbackName."(" . $json_data . ")";  
?>

JS部分

需要引入mui.js以及mui.jsonp.js

var data = {  
    name: 'xiaoming',  
    code: '200'  
};  
mui.getJSONP('http://192.168.12.74/jsonp.php', data, function(data) {  
    console.log(data);  
});

mui.getJSONP()方法传递给服务器的回调函数的请求参数名在callback的参数中。

源码

附上源码，测试的时候记得更换下IP地址。

继续阅读 »

问题描述

问题分析

Web跨域访问的实现

浅谈WEB跨域的实现（前端向）
Web应用跨域访问解决方案汇总
网上有许多关于跨域问题的解决方案，这里知识提供两篇文章供大家参考。

JSON和JSONP

解决方案

mui.ajax()

查看源码我们会发现mui.ajax()会根据运行情景的不同，而创建不同的XMLHttpRequest。
扩展阅读：mui.ajax()方法中的XMLHttpRequest

在5+默认的UIWebview中被允许调用window的XHR进行跨域访问。
并且5+提供的XHR也是可以进行跨域访问的。
如何判断Runtime是否支持5+ API

mui.getJSONP()

mui同样提供了JSONP的插件（mui.jsonp.js见附件）来实现Web跨域，方法为mui.getJSONP()。
该方法有三个参数：

url——请求发送的目标地址（String）
data——发送到服务器的业务数据（Object）
callback——请求回调函数（Function）

请求方式默认并始终是GET方式，因为JSONP实际是在客户端动态添加了个<script></script>然后将url指向要请求的地址，script是没有同源策略的。

示例（后端为php）

php部分

<?php  
header('Content-type: application/json');  
//获取回调函数名  
$callbackName = $_GET["callback"];  
//json数据  
$json_data = '["customername1","customername2"]';  
//输出jsonp格式的数据  
echo $callbackName."(" . $json_data . ")";  
?>

JS部分

需要引入mui.js以及mui.jsonp.js

var data = {  
    name: 'xiaoming',  
    code: '200'  
};  
mui.getJSONP('http://192.168.12.74/jsonp.php', data, function(data) {  
    console.log(data);  
});

mui.getJSONP()方法传递给服务器的回调函数的请求参数名在callback的参数中。

源码

附上源码，测试的时候记得更换下IP地址。

收起阅读 »

【重要】有想学MUI 5+的抓紧了！！

【重要】有想学MUI 5+的抓紧了！！腾讯课堂决定于2016年8月15日关闭腾讯课堂课程赠送能力，也就是15号之后就再也没有班级通业务了，东翌学院是html5中国产业联盟企业、Dcloud官方合作伙伴。有想要学习MUI 5+整套课程（基础+实战项目）还没报名的同学们抓紧时间报名了，一次报名终身学习。没有钱也没关系只要你想学，现支持0首付学习，12期免息，每月还款316.6元，报名Q：2547209832 微信：evan3398 tel:17090057032

继续阅读 »

有没有方法集成第三方浏览器内核展示weiview (官方有没有想集成第3方内核的想法)

打包内核

**有没有方法集成第三方浏览器内核展示weiview ,由于android默认自带性能太差了,,,例如局部滚动,,,虽然mui有提出双webview的方案
,但这样其实是开发起来还是很不爽的,也有各种问题,,,,写出来的应用在手机uc浏览器上其实局部滚动是没有什么问题的.我想类似在微信上有没哟
这些个问题,(微信就是嵌的自己内核)**

继续阅读 »

可拖动的悬浮球(增加屏幕边界判断)

技术分享 touchmove

实现了一个可以拖动的悬浮球的效果，代码如下：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style>  
            #touch {  
                width: 50px;  
                height: 50px;  
                position: absolute;  
                left: 100px;  
                top: 200px;  
                margin-left: -30px;  
                margin-top: -30px;  
                z-index: 999999;  
            }  

            #simple-menu {  
                cursor: move;  
            }  
        </style>  
    </head>  
<body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">可拖动悬浮小球</h1>  
        </header>  
        <div class="mui-content">  
            <div id="touch" style="width: 50px; height: 50px; position: absolute;">  
                <img id="simple-menu" src="images/search.png" style="width: 50px; height: 50px;" />  
            </div>  
        </div>  
        <script>  
            mui.init({  
                swipeBack: true //启用右滑关闭功能  
            });  
            var div = document.getElementById('touch');  
            var viewWidth = window.screen.width;  
            var viewHeight = window.screen.height;  
            var divWidth = parseInt(div.style.width);  
            var divHeight = parseInt(div.style.height);  
            div.addEventListener('touchmove', function(event) {  
                event.preventDefault(); //阻止其他事件  
                // 如果这个元素的位置内只有一个手指的话  
                if(event.targetTouches.length == 1) {  
                    var touch = event.targetTouches[0]; // 把元素放在手指所在的位置  
                    var tempWidth = touch.pageX;//存储x坐标  
                    var tempHeigth = touch.pageY;//存储Y坐标  
                    if((touch.pageX + divWidth) > viewWidth) {//超越右边界  
                        tempWidth = viewWidth - divWidth/2;  
                    }  
                    if((touch.pageY + divHeight) > viewHeight) {//超越下边界  
                        tempHeigth = viewHeight - divHeight;  
                    }  
                    if((touch.pageX - divWidth)<0){//超越左边界  
                        tempWidth=divWidth/2;  
                    }  
                    if((touch.pageY - divHeight)<0){//超越上边界  
                        tempHeigth=divHeight/2;  
                    }  
                    div.style.left = tempWidth + 'px';  
                    div.style.top = tempHeigth + 'px';  
                    div.style.background = "";  
                }  
            }, false);  
        </script>  
    </body>  

</html>

继续阅读 »

实现了一个可以拖动的悬浮球的效果，代码如下：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style>  
            #touch {  
                width: 50px;  
                height: 50px;  
                position: absolute;  
                left: 100px;  
                top: 200px;  
                margin-left: -30px;  
                margin-top: -30px;  
                z-index: 999999;  
            }  

            #simple-menu {  
                cursor: move;  
            }  
        </style>  
    </head>  
<body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">可拖动悬浮小球</h1>  
        </header>  
        <div class="mui-content">  
            <div id="touch" style="width: 50px; height: 50px; position: absolute;">  
                <img id="simple-menu" src="images/search.png" style="width: 50px; height: 50px;" />  
            </div>  
        </div>  
        <script>  
            mui.init({  
                swipeBack: true //启用右滑关闭功能  
            });  
            var div = document.getElementById('touch');  
            var viewWidth = window.screen.width;  
            var viewHeight = window.screen.height;  
            var divWidth = parseInt(div.style.width);  
            var divHeight = parseInt(div.style.height);  
            div.addEventListener('touchmove', function(event) {  
                event.preventDefault(); //阻止其他事件  
                // 如果这个元素的位置内只有一个手指的话  
                if(event.targetTouches.length == 1) {  
                    var touch = event.targetTouches[0]; // 把元素放在手指所在的位置  
                    var tempWidth = touch.pageX;//存储x坐标  
                    var tempHeigth = touch.pageY;//存储Y坐标  
                    if((touch.pageX + divWidth) > viewWidth) {//超越右边界  
                        tempWidth = viewWidth - divWidth/2;  
                    }  
                    if((touch.pageY + divHeight) > viewHeight) {//超越下边界  
                        tempHeigth = viewHeight - divHeight;  
                    }  
                    if((touch.pageX - divWidth)<0){//超越左边界  
                        tempWidth=divWidth/2;  
                    }  
                    if((touch.pageY - divHeight)<0){//超越上边界  
                        tempHeigth=divHeight/2;  
                    }  
                    div.style.left = tempWidth + 'px';  
                    div.style.top = tempHeigth + 'px';  
                    div.style.background = "";  
                }  
            }, false);  
        </script>  
    </body>  

</html>

收起阅读 »

picker插件里遍历的写法问题

mui.picker.min.js里面用了大量 for(var i in array)的写法，如果自定义了Array的属性扩展，就会引起问题。
比如我在自定义了Array的一个方法
Array.prototype.contains = function(elem) {
for (var i = 0; i < this.length; i++) {
if (this[i] == elem) {
return true;
}
}
return false;
}

使用 for(var i in array)就会遍历到contains这个方法，导致程序出错。错误信息：
getSelectedItem is not a function
我修改
for(var i in array) 为
for(var i=0; i< array.length;i++)
后运行正常

继续阅读 »

微信分享报错-100 ，-6解决方案

经过官方的文章配置后。测试app分享时还是会报-6错误

由于申请微信分享时，随便写了个 “签名”，导致在测试的时候，微信记录了这些值

折腾几个小时，仔细检查app配置肯定没有问题后，

然后百度了下，说微信记录了app的签名，所以把微信删除，重新装了一个，分享成功！

继续阅读 »

在手机上打开pdf文件的方法

pdf

1.ios上使用safari打开，Android上下载到本地打开；http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openFile
具体代码如下：
function launchApp() {
if ( plus.os.name == "Android" ) {
plus.runtime.launchApplication( {pname:"com.android.browser"
,extra:{url:""}}, function ( e ) {
alert( "Open system default browser failed: " + e.message );
} );
} else if ( plus.os.name == "iOS" ) {
plus.runtime.launchApplication( {action:""}, function ( e ) {
alert( "Open system default browser failed: " + e.message );
} );
}
}
2.前端有成熟的库可以用，使用js打开pdf，比如pdf.js。
ios在webview里可以直接打开。
Android下有个pdf.js的开源框架可以直接解析pdf文档。

继续阅读 »

怎么从零基础学习h5混合app开发、HBuilder、MUI的课程？

HBuilder mui

零基础的你在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。从零基础到实战！学习跨平台app开发就在这里>>>跨平台app开发全套课程

Dcloud官方合作培训机构-国内首推跨平台app开发培训-东翌学院咨询课程老师QQ2971611409，小班直播教学+课后辅导+全套课程视频+源码，从零基础到实战，30天学会跨平台App开发！Tel：17090057793

继续阅读 »

分享Hbuilder sass scss 的libsass高效编译程序和配置

众所周知，使用Ruby编译sass和scss文件的效率非常慢，而libsass是使用c及c++语言编写实现的sass scss编译方式，本人通过git下载源码编译成exe，经过实测，sass和scss的编译全部做到秒编，本着好东西要分享的精神，放上来方便有这方面需求的coder。
配置方法：
工具》预编译器设置》选择.sass,.scss，如果没有该选项，点新建，配置方式如图

另外压缩包里是编译程序，推荐放置到Hbuilder目录下

截图中的几行配置代码，方便Ctrl+C Ctrl+V 伸手党

.sass,.scss
D:\Program Files\HBuilder\sassc\sassc.exe --你本地的sassc.exe路径
-t compressed %FileName% ../css/%FileBaseName%.css --compressed代表压缩方式，其他有nested,expanded,compact表示的css的格式，可自行测试。

如果提示编译失败，有可能是缺少vc运行时环境，请自行百度下载，本人的vc11运行无误。

继续阅读 »

怎么从零基础学习h5混合app开发、HBuilder、MUI的课程？

mui HBuilder

继续阅读 »

运用HBuilder实现简单的DIV+CSS布局的静态页面


<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title>order1</title>  
        <link rel="stylesheet" type="text/css" href="css/doject.css" />  
    </head>  

    <body>  
        <div id="container">  
            <div id="mainbox">  
                <div id="left">  
                    <div class="lt">  
                        <span>  
                        <h4>知识加油站</h4></span>  
                    </div>  
                    <img src="img/1.jpg" />  
                    <h6>IT界中的女性精英们</h6>  
                    <p>IT界中的女性精英们 女性在在新经济的浪潮中做得丝毫不比男性差。在《财富》500强公司中你也可以找到她们的影子，500强公司中就有许多在令人敬畏的IT公司，而且她们是在权威的地位上。</p>  
                    <img src="img/2.jpg" />  
                    <h6>迈克尔·布朗</h6>  
                    <p>Michael BrownQuantum 公司前任董事会主席兼首席执行官2005 年 7 月赛门铁克与维尔软件公司合并后，Michael Brown 加入赛门铁克的董事会。自 2003 年开始，Brow</p>  
                </div>  
                <div id="middle">  
                    <div class="lt">  
                        <span>  
                        <h4>独家专栏</h4></span>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">新媒体的硬件环境----三谈网络媒体</a></h6>  
                        </div>  
                        <p>新媒体不是谁发明的，而是随着互联网的发展和市场的需求应运而生，被专家们归纳中介出来的。新媒体的发展其中一个非常重要的前提条件就是要有足够好，足够便宜，足够方便的用户使用终端系列上市。  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">中国移动推oPhone，让诺基亚面对难题</a></h6>  
                        </div>  
                        <p>今天中国移动正式发布oPhone，这是一件对于通信业影响深远的大事，意味了电信运营商干预操作系统的时代到来，也对手机制造商和操作系统开发商提出了一个大问题，未来的路何去何从。  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">windows7盗版很严重，微软很生气</a></h6>  
                        </div>  
                        <p>微软能不惜重金研发出革命性的Win7，就必然有能力从技术或法律层面维护自身的利益。等到微软真正发怒了，那些不废吹灰之力自认为可以坐享其成者将如何收场呢？  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">网谣从何处造起？散布网谣者应严惩</a></h6>  
                        </div>  
                        <p>熊忠俊这种炒作恰恰的对当事人家长进行了心灵上的严重摧残，胡斌父亲感觉已被逼上绝路。同时对司法机构进行公然的挑衅，引发网民猜疑，误导公众舆论，扰乱公共秩序。如果不实行有力的制裁，社会就不可能稳定，正当权益就不可能维护  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  
                </div>  
                <div id="right">  
                    <div class="lt">  
                        <span>  
                        <h4>知识加油站</h4></span>  
                    </div>  
                    <img src="img/4.jpg" width="89" height="89" />  
                    <h6>周以真</h6>  
                    <p>周以真（英文名Jeannette M. Wing），美国计算机科学家。卡内基-梅隆大学教授。美国国家自然基金会计算与信息科学工程部助理部长。ACM和IEEE会士。</p>  
                    <img src="img/5.gif" width="116" height="107" />  
                    <h6>理查德·史蒂文斯</h6>  
                    <p>理查德·史蒂文斯理查德·史蒂文斯（William Richard (Rich) Stevens，1951年2月5日－1999年9月1日），美国计算机科学家，是众多的畅销UNIX、TCP/IP书籍的作者。</p>  
                </div>  
            </div>  
        </div>  
        <div id="footer">  
            <div id="websitename">  
                HBuilder_mz出版，盗版必究  
            </div>  
            <div id="siteright">  
                &copy;2016-2017  
            </div>  
        </div>  
        </div>  
    </body>  

</html>

继续阅读 »


<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title>order1</title>  
        <link rel="stylesheet" type="text/css" href="css/doject.css" />  
    </head>  

    <body>  
        <div id="container">  
            <div id="mainbox">  
                <div id="left">  
                    <div class="lt">  
                        <span>  
                        <h4>知识加油站</h4></span>  
                    </div>  
                    <img src="img/1.jpg" />  
                    <h6>IT界中的女性精英们</h6>  
                    <p>IT界中的女性精英们 女性在在新经济的浪潮中做得丝毫不比男性差。在《财富》500强公司中你也可以找到她们的影子，500强公司中就有许多在令人敬畏的IT公司，而且她们是在权威的地位上。</p>  
                    <img src="img/2.jpg" />  
                    <h6>迈克尔·布朗</h6>  
                    <p>Michael BrownQuantum 公司前任董事会主席兼首席执行官2005 年 7 月赛门铁克与维尔软件公司合并后，Michael Brown 加入赛门铁克的董事会。自 2003 年开始，Brow</p>  
                </div>  
                <div id="middle">  
                    <div class="lt">  
                        <span>  
                        <h4>独家专栏</h4></span>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">新媒体的硬件环境----三谈网络媒体</a></h6>  
                        </div>  
                        <p>新媒体不是谁发明的，而是随着互联网的发展和市场的需求应运而生，被专家们归纳中介出来的。新媒体的发展其中一个非常重要的前提条件就是要有足够好，足够便宜，足够方便的用户使用终端系列上市。  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">中国移动推oPhone，让诺基亚面对难题</a></h6>  
                        </div>  
                        <p>今天中国移动正式发布oPhone，这是一件对于通信业影响深远的大事，意味了电信运营商干预操作系统的时代到来，也对手机制造商和操作系统开发商提出了一个大问题，未来的路何去何从。  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">windows7盗版很严重，微软很生气</a></h6>  
                        </div>  
                        <p>微软能不惜重金研发出革命性的Win7，就必然有能力从技术或法律层面维护自身的利益。等到微软真正发怒了，那些不废吹灰之力自认为可以坐享其成者将如何收场呢？  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  

                    <div id="news_block">  
                        <div id="title">  
                            <h6><a href="#" target="_blank">网谣从何处造起？散布网谣者应严惩</a></h6>  
                        </div>  
                        <p>熊忠俊这种炒作恰恰的对当事人家长进行了心灵上的严重摧残，胡斌父亲感觉已被逼上绝路。同时对司法机构进行公然的挑衅，引发网民猜疑，误导公众舆论，扰乱公共秩序。如果不实行有力的制裁，社会就不可能稳定，正当权益就不可能维护  
                            <a href="#" target="_blank">[查看原文]</a>  
                        </p>  
                    </div>  
                </div>  
                <div id="right">  
                    <div class="lt">  
                        <span>  
                        <h4>知识加油站</h4></span>  
                    </div>  
                    <img src="img/4.jpg" width="89" height="89" />  
                    <h6>周以真</h6>  
                    <p>周以真（英文名Jeannette M. Wing），美国计算机科学家。卡内基-梅隆大学教授。美国国家自然基金会计算与信息科学工程部助理部长。ACM和IEEE会士。</p>  
                    <img src="img/5.gif" width="116" height="107" />  
                    <h6>理查德·史蒂文斯</h6>  
                    <p>理查德·史蒂文斯理查德·史蒂文斯（William Richard (Rich) Stevens，1951年2月5日－1999年9月1日），美国计算机科学家，是众多的畅销UNIX、TCP/IP书籍的作者。</p>  
                </div>  
            </div>  
        </div>  
        <div id="footer">  
            <div id="websitename">  
                HBuilder_mz出版，盗版必究  
            </div>  
            <div id="siteright">  
                &copy;2016-2017  
            </div>  
        </div>  
        </div>  
    </body>  

</html>

收起阅读 »

微信公众号文章页面代码

【示例】mui.getJSONP()实现Web跨域

问题描述

问题分析

Web跨域访问的实现

JSON和JSONP

解决方案

mui.ajax()

mui.getJSONP()

示例（后端为php）

php部分

JS部分

源码

问题描述

问题分析

Web跨域访问的实现

JSON和JSONP

解决方案

mui.ajax()

mui.getJSONP()

示例（后端为php）

php部分

JS部分

源码

【重要】有想学MUI 5+的抓紧了！！

有没有方法集成第三方浏览器内核展示weiview (官方有没有想集成第3方内核的想法)

可拖动的悬浮球(增加屏幕边界判断)

picker插件里遍历的写法问题

微信分享报错-100 ，-6解决方案

在手机上打开pdf文件的方法

怎么从零基础学习h5混合app开发、HBuilder、MUI的课程？

分享Hbuilder sass scss 的libsass高效编译程序和配置

怎么从零基础学习h5混合app开发、HBuilder、MUI的课程？

运用HBuilder实现简单的DIV+CSS布局的静态页面

热门文章