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不错,赞
Huilder这次更新以后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标签无法播放视频的解决方案
问题描述
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解决方案
分享下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终于完工了,欢迎大家拍砖
底部选项卡切换更换子页面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内容。
收起阅读 »自定义icon经验
1:首先阅读文章:mui如何增加自定义icon图标,根据文章中的步骤完成所有操作;
2:自定义的iconfont.css文件中书写格式为:src:url('../fonts/iconfont.ttf') format('truetype');
注意:这里在阿里图标自动生成的文件会可能缺少src前缀,请自行补齐,并且结尾是逗号,修改为分号;
3:切记在页面中引入iconfont.css文件;
注意:HBuilder自动生成的link标签没有rel="stylesheet"属性,请自行补齐,否则有可能无法显示自定义icon;
完成以上操作,终于实现了自己想要的效果!
1:首先阅读文章:mui如何增加自定义icon图标,根据文章中的步骤完成所有操作;
2:自定义的iconfont.css文件中书写格式为:src:url('../fonts/iconfont.ttf') format('truetype');
注意:这里在阿里图标自动生成的文件会可能缺少src前缀,请自行补齐,并且结尾是逗号,修改为分号;
3:切记在页面中引入iconfont.css文件;
注意:HBuilder自动生成的link标签没有rel="stylesheet"属性,请自行补齐,否则有可能无法显示自定义icon;
完成以上操作,终于实现了自己想要的效果!
收起阅读 »点lable标签input没有获得焦点
与Picker选择器冲突了,导致点lable标签input没有获得焦点。
解决办法: 触发Picker.show();时 用click 代替tap
源代码:
<div class="mui-content">
<form id="recommendShop" action="" method="post">
<div class="mui-input-row">
<label for="ss-mch">名称</label>
<input type="text" class="mui-input-clear" id="ss-mch" placeholder="请填写商家名称">
</div>
<div class="mui-input-row">
<label for="ss-lxdh">电话</label>
<input type="tel" class="mui-input-clear" id="ss-lxdh" placeholder="请填写商家电话">
</div>
<div class="mui-input-row">
<label for="ss-lxdzh">地址</label>
<input type="text" class="mui-input-clear" id="ss-lxdzh" placeholder="请填写商家地址">
</div>
<div class="mui-input-row">
<label for="ss-fzr">负责人</label>
<input type="tel" class="mui-input-clear" id="ss-fzr" placeholder="请填写商家负责人电话">
</div>
<div class="area">
<h3>区域</h3>
<p>江苏省/无锡市/惠山区</p>
</div>
<div class="creditsRate">
<h3>积分比率</h3>
<p>5%</p>
</div>
<div class="IDcardZ">
<h3>身份证正面</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div class="IDcardZ">
<h3>身份证反面</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div class="IDcardZ">
<h3>营业执照</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div style="height: 65px;background-color: #fff; padding-top: 15px;">
<div class="submit">提交</div>
</div>
</form>
</div>
<script src="../js/plugs/mui.picker.js"></script>
<script src="../js/plugs/mui.poppicker.js"></script>
<script type="text/javascript">
mui.init(
);
var creditsRatePicker = new mui.PopPicker(); //选择社群
creditsRatePicker.setData([{value:'0',text:'3%'},{value:'1',text:'5%'},{value:'2',text:'7%'},{value:'3',text:'10%'}]);
mui("#recommendShop").on('click','.creditsRate',function(){
creditsRatePicker.show(function (getSelectedItems) {
var js_creditsRate = document.querySelector(".creditsRate>p");
js_creditsRate.innerHTML = getSelectedItems[0].text;
});
});
</script> 与Picker选择器冲突了,导致点lable标签input没有获得焦点。
解决办法: 触发Picker.show();时 用click 代替tap
源代码:
<div class="mui-content">
<form id="recommendShop" action="" method="post">
<div class="mui-input-row">
<label for="ss-mch">名称</label>
<input type="text" class="mui-input-clear" id="ss-mch" placeholder="请填写商家名称">
</div>
<div class="mui-input-row">
<label for="ss-lxdh">电话</label>
<input type="tel" class="mui-input-clear" id="ss-lxdh" placeholder="请填写商家电话">
</div>
<div class="mui-input-row">
<label for="ss-lxdzh">地址</label>
<input type="text" class="mui-input-clear" id="ss-lxdzh" placeholder="请填写商家地址">
</div>
<div class="mui-input-row">
<label for="ss-fzr">负责人</label>
<input type="tel" class="mui-input-clear" id="ss-fzr" placeholder="请填写商家负责人电话">
</div>
<div class="area">
<h3>区域</h3>
<p>江苏省/无锡市/惠山区</p>
</div>
<div class="creditsRate">
<h3>积分比率</h3>
<p>5%</p>
</div>
<div class="IDcardZ">
<h3>身份证正面</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div class="IDcardZ">
<h3>身份证反面</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div class="IDcardZ">
<h3>营业执照</h3>
<img class="wshitupian" src="../images/banner2.jpg"/>
</div>
<div style="height: 65px;background-color: #fff; padding-top: 15px;">
<div class="submit">提交</div>
</div>
</form>
</div>
<script src="../js/plugs/mui.picker.js"></script>
<script src="../js/plugs/mui.poppicker.js"></script>
<script type="text/javascript">
mui.init(
);
var creditsRatePicker = new mui.PopPicker(); //选择社群
creditsRatePicker.setData([{value:'0',text:'3%'},{value:'1',text:'5%'},{value:'2',text:'7%'},{value:'3',text:'10%'}]);
mui("#recommendShop").on('click','.creditsRate',function(){
creditsRatePicker.show(function (getSelectedItems) {
var js_creditsRate = document.querySelector(".creditsRate>p");
js_creditsRate.innerHTML = getSelectedItems[0].text;
});
});
</script> 收起阅读 »







