HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【示例】iOS中使用video标签播放视频,禁止自动全屏的方案

video iOS

iOS中,使用video播放视频默认为全屏。可以通过以下配置,调整为非全屏。

解决方案

前端

video标签中添加playsinline属性

<video controls="controls" playsinline preload="auto">  
</video>

native层

Obj-C中,需要添加配置webview.allowsInlineMediaPlayback = YES;
Swift请查找相关API进行配置。

开发5+App,需要在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。

"plus":{  
    "allowsInlineMediaPlayback": true  
}

开发及发布

有此需求的开发者,可下载HBuilder.ipa进行调试,并且使用最新的alpha版HBuilder打包。
alpha版HBuilder下载地址:https://pan.baidu.com/s/1hs0O4eS#list/path=%2F

正式版HBuilder更新后,即可正常使用。

参考

更多相关信息,请参考网上的相关解决办法。
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
https://www.zhihu.com/question/21094425
http://www.jb51.net/article/72732.htm

继续阅读 »

iOS中,使用video播放视频默认为全屏。可以通过以下配置,调整为非全屏。

解决方案

前端

video标签中添加playsinline属性

<video controls="controls" playsinline preload="auto">  
</video>

native层

Obj-C中,需要添加配置webview.allowsInlineMediaPlayback = YES;
Swift请查找相关API进行配置。

开发5+App,需要在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。

"plus":{  
    "allowsInlineMediaPlayback": true  
}

开发及发布

有此需求的开发者,可下载HBuilder.ipa进行调试,并且使用最新的alpha版HBuilder打包。
alpha版HBuilder下载地址:https://pan.baidu.com/s/1hs0O4eS#list/path=%2F

正式版HBuilder更新后,即可正常使用。

参考

更多相关信息,请参考网上的相关解决办法。
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
https://www.zhihu.com/question/21094425
http://www.jb51.net/article/72732.htm

收起阅读 »

解决plus.zip.compressImage 图片循环压缩无法都压缩完的问题

图片压缩

用for循环 来处理图片压缩 的问题,原因是 plus.zip.compressImage 方法 是异步执行的,for循环很快, 同时手机可执行的压缩方法有限制:应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。

继续阅读 »

用for循环 来处理图片压缩 的问题,原因是 plus.zip.compressImage 方法 是异步执行的,for循环很快, 同时手机可执行的压缩方法有限制:应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。

收起阅读 »

微信小程序跟流应用感觉好像啊

流应用

有没有这种感觉啊

有没有这种感觉啊

webview底部选项卡

可以参考下这篇文章:http://ask.dcloud.net.cn/article/629
希望可以帮到大家

可以参考下这篇文章:http://ask.dcloud.net.cn/article/629
希望可以帮到大家

大半夜的谈谈苹果ATS,刚刚看到审核通过

应用发布

ATS要求出来后鸡飞狗跳,
服务器是阿里云的,阿里云提供免费的证书可用,搞上去
tomcat貌似阿里云官方给的证书部署解决方案有误还是这边问题不清楚,反正后面用tomcat8才搞定,67都没成功。
项目请求地址改为https开头的。
后来在别的论坛看到IPV6什么的苹果也卡,不清楚了,反正提交上去了。
刚刚查的时候发现状态已变为“可供销售”,前天大半夜提交的,前后不到48小时吧。

有这方面顾虑的童鞋放心上吧,一步通过。
hbuilder不错,赞

继续阅读 »

ATS要求出来后鸡飞狗跳,
服务器是阿里云的,阿里云提供免费的证书可用,搞上去
tomcat貌似阿里云官方给的证书部署解决方案有误还是这边问题不清楚,反正后面用tomcat8才搞定,67都没成功。
项目请求地址改为https开头的。
后来在别的论坛看到IPV6什么的苹果也卡,不清楚了,反正提交上去了。
刚刚查的时候发现状态已变为“可供销售”,前天大半夜提交的,前后不到48小时吧。

有这方面顾虑的童鞋放心上吧,一步通过。
hbuilder不错,赞

收起阅读 »

老帖子已经关闭

App mui

老帖子已经关闭

老帖子已经关闭

Huilder这次更新以后map模块闪退

map

之前的代码用new plus.maps.Map好好的,不知道是不是这次修改了百度地图https相关的东西把这个玩意给改坏了,但是自己感觉不可能啊,那怎么解释我这么长时间没动的代码突然就闪退了呢?gps权限也开着,好好的就突然闪退了,能给个解释吗?

之前的代码用new plus.maps.Map好好的,不知道是不是这次修改了百度地图https相关的东西把这个玩意给改坏了,但是自己感觉不可能啊,那怎么解释我这么长时间没动的代码突然就闪退了呢?gps权限也开着,好好的就突然闪退了,能给个解释吗?

html5 plus 调用相机、相机显示图片。分享图片上传压缩demo,部分android手机IOS上传拍照片旋转90度问题

代码整合神农》功能实现以及方案:
H5 Plus 调用手机相册与相机
canvas 图片压缩上传
exif.js 对ios android 可能发生图片旋转进行校正
拍照图片部分机型路径找不到的解决方案
图片回调成功,图片本地如何显示

-------------------艺术分割线-------------------
附整套demo ,但愿能帮助到大家。

QQ群:595377655。问题总是能出现并着手解决的地方,欢迎加入。

继续阅读 »

代码整合神农》功能实现以及方案:
H5 Plus 调用手机相册与相机
canvas 图片压缩上传
exif.js 对ios android 可能发生图片旋转进行校正
拍照图片部分机型路径找不到的解决方案
图片回调成功,图片本地如何显示

-------------------艺术分割线-------------------
附整套demo ,但愿能帮助到大家。

QQ群:595377655。问题总是能出现并着手解决的地方,欢迎加入。

收起阅读 »

【解决方案】关于iOS10.2及以上版本video标签无法播放视频的解决方案

5+App开发 iOS

问题描述

iOS升级至10.2后video标签无法正常播放视频资源。

解决方案。

创建包含video元素的webveiw时,需要切换webview的内核为WKWebview。

文档及示例

文档

5+webview相关API窗口使用的内核

示例

var videoWv = plus.webview.create('video.html', 'video', {  
    kernel: 'WKWebview'  
});  
videoWv.show('slide-in-right');

下载附件,解压后使用HBuilder真机调试即可预览效果。

PS
需要最新的alpha版HBuilder对应的基座,正式版会尽快更新。
alphba版HBuilder下载地址:https://pan.baidu.com/s/1hs0O4eS#list/path=%2F

WKWebview的跨域

WKWebview是不支持window的XHR跨域的。
localStorage不支持跨域,5+App中推荐使用5+storage。
参考相关文章
App离线本地存储方案
mui.ajax()方法中的XMLHttpRequest

继续阅读 »

问题描述

iOS升级至10.2后video标签无法正常播放视频资源。

解决方案。

创建包含video元素的webveiw时,需要切换webview的内核为WKWebview。

文档及示例

文档

5+webview相关API窗口使用的内核

示例

var videoWv = plus.webview.create('video.html', 'video', {  
    kernel: 'WKWebview'  
});  
videoWv.show('slide-in-right');

下载附件,解压后使用HBuilder真机调试即可预览效果。

PS
需要最新的alpha版HBuilder对应的基座,正式版会尽快更新。
alphba版HBuilder下载地址:https://pan.baidu.com/s/1hs0O4eS#list/path=%2F

WKWebview的跨域

WKWebview是不支持window的XHR跨域的。
localStorage不支持跨域,5+App中推荐使用5+storage。
参考相关文章
App离线本地存储方案
mui.ajax()方法中的XMLHttpRequest

收起阅读 »

分享下android的websocket解决方案

HTML5+ Webview WEBSOCKET

分享下android的websocket结局方案
先占个坑
明天写


  • 2017.1.9
  • 最近在做一个外勤应用,里面要做即时通讯,最终选择的是自己写websocket封装协议,没有使用融云这些,原因是系统会给用户私有云部署,同时也不想太依赖于第三方
  • ios下面的websocket是没有任何问题的
  • 但是android上是有问题的 虽然官方说4.4以上支持,但是经测试 我的一台4.4的机器也是不支持,服务端报错是 protocol error
  • 我们做应用的 除非是公司品牌特别牛像微信支付宝这类,否则你放弃了4.4一下的用户,他们也就放弃了你
    网上找了很久,其中也搜到这里 http://ask.dcloud.net.cn/article/302
    也尝试了下不是很好
    最好只好自己尝试解决
    目标有三个
    1:使用第三方websocket js库 这样代码改动基本是最小的
    2:自己写一个dcloud插件

第一个方案 找了很多 包括jwebsocket socket.io
最后发现问题依旧,原因就不说了
开始尝试第二个方案
但是看了半天dcloud的文档,发现自己写一个插件的复杂度太大,主要是官方很多地方文档描述不清
随后静下心来,我本身就是在原生的基础上来加的h5+sdk,所以可以尝试原生与js混合通信的方式
写到这里 我再次吐槽一下,我也用过apicloud,里面我觉得最好的一个是apicloud与原生之间的一个事件通知,不需要使用webview,随手写随手通知

回归正题

原有的js中websocke的部分,需要完成3个事情:
1 websocket初始化连接
2 发送消息
3 接受消息

所以我们只需要在java中写一个辅助类
1在需要的时候初始化连接
2可以接受js的发送请求,将数据发出
3在收到消息时候通知js

下面贴代码
js部分

function createWs() {  
        var WsUrl = ws_host + getMemberId();  
        if(mui.os.ios) {  
            if('WebSocket' in window) {  
                debug("WebSocket")  
                wsClient = new WebSocket(WsUrl);  
            } else if('MozWebSocket' in window) {  
                debug("MozWebSocket")  
                wsClient = new MozWebSocket(WsUrl);  
            }  
            wsClient.onopen = function() {  
                onOpen()  
            };  
            wsClient.onclose = function() {  
                onClose()  
            };  
            wsClient.onmessage = function(evt) {  
                onMessage(evt)  
            };  
            wsClient.onerror = function() {  
                onError()  
            };  
        } else if(mui.os.android) {  
            var Toolkit = plus.android.importClass("com.HBuilder.integrate.WsHelper");  
            if(Toolkit) {  
                //var wifiInfo = new Toolkit();  
                Toolkit.webConnect(WsUrl);  
            } else {  
                plus.nativeUI.alert("IM服务器连接失败");  
            }  
        }  

    }

原理一看就明白,如果是ios 则使用html5的websocket,如果是案桌,就使用原生的方法去创建websocket
下面是java原生,java原生有很多websocket客户端库,我这里用的是AndroidAsync
java 实现初始化websocket连接,以及实现向js通讯消息

public static void webConnect(final String url) {  

        if (webSocket == null) {  
            try {  
                AsyncHttpClient.getDefaultInstance().websocket(url, null, new AsyncHttpClient.WebSocketConnectCallback() {  
                    @Override  
                    public void onCompleted(Exception ex, WebSocket _webSocket) {  
                        webSocket = _webSocket;  
//发送心跳  
                        webSocket.send("{\"messageType\":3}");  
                        webSocket.setStringCallback(new WebSocket.StringCallback() {  
                            @Override  
                            public void onStringAvailable(String s) {  
                                Log.d("qwe", "hello");  
                                //获取webview  
                                ArrayList<IWebview> ss = SDK.obtainAllIWebview();  
                                for (IWebview iWebview : ss) {  
                                    if (iWebview.getOriginalUrl().equals("messageList.html")) {  
                                        iWebview.evalJS("wsRecive('" + s + "')");  
                                        // JSUtil.broadcastWebviewEvent(iWebview, iWebview.getWebviewUUID(), "wsRecive", s);  
                                        //JSUtil.execCallback(iWebview, "wsRecive", s, JSUtil.OK, false);  
                                        break;  
                                    }  
                                }  
                            }  
                        });  
                        webSocket.setClosedCallback(new CompletedCallback() {  
                            @Override  
                            public void onCompleted(Exception ex) {  
                                try {  
                                    if (ex != null)  
                                        Log.e("WebSocket", "Error");  
                                } finally {  
                                    if (tryTime <= 3) {  
                                        tryTime += 1;  
                                        webConnect(url);  
                                    }  
                                }  
                            }  
                        });  
                    }  
                });  
            }  
            finally {  
                if (tryTime <= 3) {  
                    tryTime += 1;  
                    webConnect(url);  
                }  
            }  

        } else {  
            webSocket.send("{\"messageType\":3}");  
        }  
    }

这里又要吐槽一下,官方的h5+sdk文档实在是太糟糕,花了很长时间才摸索出来,主要是获取指定的webview 这点没有apicloud做得好 ,apicloud后台java发起一个事件,前面任何一个页面都可以监听,5+sdk我找了半天没有找到,可能也有但是不知道在哪里
首先查找所有的webview,然后调用这个页面的js方法

  ArrayList<IWebview> ss = SDK.obtainAllIWebview();  
                                for (IWebview iWebview : ss) {  
                                    if (iWebview.getOriginalUrl().equals("messageList.html")) {  
                                        iWebview.evalJS("wsRecive('" + s + "')");  
                                        break;  
                                    }  
                                }

下面是js发送消息

function sendMsg(msg) {  

        if(mui.os.ios) {  
            //缓存本地  
            if(wsClient.readyState == WebSocket.OPEN) {  
                wsClient.send(JSON.stringify(msg));  
                _msg = null;  
            } else {  
                _msg = msg;  
                createWs();  
            }  
        } else if(mui.os.android) {  
            var Toolkit = plus.android.importClass("com.HBuilder.integrate.WsHelper");  
            if(Toolkit) {  
                //var wifiInfo = new Toolkit();  
                Toolkit.sendMsg(JSON.stringify(msg));  
            } else {  
                plus.nativeUI.alert("IM服务器连接失败");  
            }  
        }  

    }

也是先要判断,如果ios就走h5直接发送,否则就走原生android发送

public static void sendMsg(String msg) {  
        if (webSocket != null && webSocket.isOpen()) {  
            webSocket.send(msg);  
        }  
    }

至此,android的websocket完美解决,无论多少版本,统一走底层
思路不一定是最好的 欢迎加我微信(ming-lsard)交流
希望有更好的解决思路一起分享
谢谢大家

本文未经许可,禁止转载,只发在dcloud官方论坛

继续阅读 »

分享下android的websocket结局方案
先占个坑
明天写


  • 2017.1.9
  • 最近在做一个外勤应用,里面要做即时通讯,最终选择的是自己写websocket封装协议,没有使用融云这些,原因是系统会给用户私有云部署,同时也不想太依赖于第三方
  • ios下面的websocket是没有任何问题的
  • 但是android上是有问题的 虽然官方说4.4以上支持,但是经测试 我的一台4.4的机器也是不支持,服务端报错是 protocol error
  • 我们做应用的 除非是公司品牌特别牛像微信支付宝这类,否则你放弃了4.4一下的用户,他们也就放弃了你
    网上找了很久,其中也搜到这里 http://ask.dcloud.net.cn/article/302
    也尝试了下不是很好
    最好只好自己尝试解决
    目标有三个
    1:使用第三方websocket js库 这样代码改动基本是最小的
    2:自己写一个dcloud插件

第一个方案 找了很多 包括jwebsocket socket.io
最后发现问题依旧,原因就不说了
开始尝试第二个方案
但是看了半天dcloud的文档,发现自己写一个插件的复杂度太大,主要是官方很多地方文档描述不清
随后静下心来,我本身就是在原生的基础上来加的h5+sdk,所以可以尝试原生与js混合通信的方式
写到这里 我再次吐槽一下,我也用过apicloud,里面我觉得最好的一个是apicloud与原生之间的一个事件通知,不需要使用webview,随手写随手通知

回归正题

原有的js中websocke的部分,需要完成3个事情:
1 websocket初始化连接
2 发送消息
3 接受消息

所以我们只需要在java中写一个辅助类
1在需要的时候初始化连接
2可以接受js的发送请求,将数据发出
3在收到消息时候通知js

下面贴代码
js部分

function createWs() {  
        var WsUrl = ws_host + getMemberId();  
        if(mui.os.ios) {  
            if('WebSocket' in window) {  
                debug("WebSocket")  
                wsClient = new WebSocket(WsUrl);  
            } else if('MozWebSocket' in window) {  
                debug("MozWebSocket")  
                wsClient = new MozWebSocket(WsUrl);  
            }  
            wsClient.onopen = function() {  
                onOpen()  
            };  
            wsClient.onclose = function() {  
                onClose()  
            };  
            wsClient.onmessage = function(evt) {  
                onMessage(evt)  
            };  
            wsClient.onerror = function() {  
                onError()  
            };  
        } else if(mui.os.android) {  
            var Toolkit = plus.android.importClass("com.HBuilder.integrate.WsHelper");  
            if(Toolkit) {  
                //var wifiInfo = new Toolkit();  
                Toolkit.webConnect(WsUrl);  
            } else {  
                plus.nativeUI.alert("IM服务器连接失败");  
            }  
        }  

    }

原理一看就明白,如果是ios 则使用html5的websocket,如果是案桌,就使用原生的方法去创建websocket
下面是java原生,java原生有很多websocket客户端库,我这里用的是AndroidAsync
java 实现初始化websocket连接,以及实现向js通讯消息

public static void webConnect(final String url) {  

        if (webSocket == null) {  
            try {  
                AsyncHttpClient.getDefaultInstance().websocket(url, null, new AsyncHttpClient.WebSocketConnectCallback() {  
                    @Override  
                    public void onCompleted(Exception ex, WebSocket _webSocket) {  
                        webSocket = _webSocket;  
//发送心跳  
                        webSocket.send("{\"messageType\":3}");  
                        webSocket.setStringCallback(new WebSocket.StringCallback() {  
                            @Override  
                            public void onStringAvailable(String s) {  
                                Log.d("qwe", "hello");  
                                //获取webview  
                                ArrayList<IWebview> ss = SDK.obtainAllIWebview();  
                                for (IWebview iWebview : ss) {  
                                    if (iWebview.getOriginalUrl().equals("messageList.html")) {  
                                        iWebview.evalJS("wsRecive('" + s + "')");  
                                        // JSUtil.broadcastWebviewEvent(iWebview, iWebview.getWebviewUUID(), "wsRecive", s);  
                                        //JSUtil.execCallback(iWebview, "wsRecive", s, JSUtil.OK, false);  
                                        break;  
                                    }  
                                }  
                            }  
                        });  
                        webSocket.setClosedCallback(new CompletedCallback() {  
                            @Override  
                            public void onCompleted(Exception ex) {  
                                try {  
                                    if (ex != null)  
                                        Log.e("WebSocket", "Error");  
                                } finally {  
                                    if (tryTime <= 3) {  
                                        tryTime += 1;  
                                        webConnect(url);  
                                    }  
                                }  
                            }  
                        });  
                    }  
                });  
            }  
            finally {  
                if (tryTime <= 3) {  
                    tryTime += 1;  
                    webConnect(url);  
                }  
            }  

        } else {  
            webSocket.send("{\"messageType\":3}");  
        }  
    }

这里又要吐槽一下,官方的h5+sdk文档实在是太糟糕,花了很长时间才摸索出来,主要是获取指定的webview 这点没有apicloud做得好 ,apicloud后台java发起一个事件,前面任何一个页面都可以监听,5+sdk我找了半天没有找到,可能也有但是不知道在哪里
首先查找所有的webview,然后调用这个页面的js方法

  ArrayList<IWebview> ss = SDK.obtainAllIWebview();  
                                for (IWebview iWebview : ss) {  
                                    if (iWebview.getOriginalUrl().equals("messageList.html")) {  
                                        iWebview.evalJS("wsRecive('" + s + "')");  
                                        break;  
                                    }  
                                }

下面是js发送消息

function sendMsg(msg) {  

        if(mui.os.ios) {  
            //缓存本地  
            if(wsClient.readyState == WebSocket.OPEN) {  
                wsClient.send(JSON.stringify(msg));  
                _msg = null;  
            } else {  
                _msg = msg;  
                createWs();  
            }  
        } else if(mui.os.android) {  
            var Toolkit = plus.android.importClass("com.HBuilder.integrate.WsHelper");  
            if(Toolkit) {  
                //var wifiInfo = new Toolkit();  
                Toolkit.sendMsg(JSON.stringify(msg));  
            } else {  
                plus.nativeUI.alert("IM服务器连接失败");  
            }  
        }  

    }

也是先要判断,如果ios就走h5直接发送,否则就走原生android发送

public static void sendMsg(String msg) {  
        if (webSocket != null && webSocket.isOpen()) {  
            webSocket.send(msg);  
        }  
    }

至此,android的websocket完美解决,无论多少版本,统一走底层
思路不一定是最好的 欢迎加我微信(ming-lsard)交流
希望有更好的解决思路一起分享
谢谢大家

本文未经许可,禁止转载,只发在dcloud官方论坛

收起阅读 »

使用Hbuilder开发的APP终于完工了,欢迎大家拍砖

移动APP

废了好大劲,终于完工了,使用Hbuilder开发了一款汽车4s店保养预约的APP,简直太不容易了,趟过了好多坑,不过还好有Hbuilder官方的大力支持,使得APP顺利完工,放几张截图:如需要查看详细完整的图片点击 更多截图查看,介绍了开发这个APP遇到的一些坑!这里上图图片太费劲了。下载地址也可以点击这个链接地址查看。

继续阅读 »

废了好大劲,终于完工了,使用Hbuilder开发了一款汽车4s店保养预约的APP,简直太不容易了,趟过了好多坑,不过还好有Hbuilder官方的大力支持,使得APP顺利完工,放几张截图:如需要查看详细完整的图片点击 更多截图查看,介绍了开发这个APP遇到的一些坑!这里上图图片太费劲了。下载地址也可以点击这个链接地址查看。

收起阅读 »

底部选项卡切换更换子页面Header内容

1:首先在默认首页中设置:
var subpage_style = {
top: '0px',
bottom: '51px'
};
2:注销:title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;代码;
3:在子页面中设置相应的Header内容

完成以上操作,实现底部选项卡切换更换子页面Header内容。

继续阅读 »

1:首先在默认首页中设置:
var subpage_style = {
top: '0px',
bottom: '51px'
};
2:注销:title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;代码;
3:在子页面中设置相应的Header内容

完成以上操作,实现底部选项卡切换更换子页面Header内容。

收起阅读 »