HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

有关安卓webview模式下拉刷新只能拉一半(盖住提示文本)问题解决

下拉刷新

类似这个问题http://ask.dcloud.net.cn/question/27036
方法就是在根页面创建子webview的时候要隐藏的子webview延时10ms隐藏就可以了

        <nav class="mui-bar mui-bar-tab">  
            <a id="defaultTab" class="mui-tab-item mui-active" href="first_index.html">  
                <span class="mui-icon iconfont icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="circle_index.html">  
                <span class="mui-icon iconfont icon-circle"></span>  
                <span class="mui-tab-label">圈</span>  
            </a>  
            <a class="mui-tab-item" href="user_index.html">  
                <span class="mui-icon iconfont icon-shouye"></span>  
                <span class="mui-tab-label">我</span>  
            </a>  
        </nav>  
        <script src="../js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
             //mui初始化  
            mui.init();  
            var subpages = ['first_index.html', 'circle_index.html', 'user_index.html'];  
            var subpage_style = {  
                top: '0',  
                bottom: '51px'  
            };  

            var aniShow = {};  

             //创建子页面,首个选项卡页面显示,其它均隐藏;  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                for (var i = 0; i < 3; i++) {  
                    var temp = {};  
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                    if (i > 0) {  

                    }else{  
                        temp[subpages[i]] = "true";  
                        mui.extend(aniShow,temp);  
                    }  
                    self.append(sub);  
                }  
                setTimeout(function(){  
                    for(var i=0;i<3;i++){  
                        if (i > 0) {  
                            plus.webview.getWebviewById(subpages[i]).hide();  
                        }  
                    }  
                },10);  
            });  
             //当前激活选项  
            var activeTab = subpages[0];  
//          var title = document.getElementById("title");  
             //选项卡点击事件  
            mui('.mui-bar-tab').on('tap', 'a', function(e) {  
                var targetTab = this.getAttribute('href');  
                if (targetTab == activeTab) {  
                    return;  
                }  
                //显示目标选项卡  
                plus.webview.show(targetTab);  
                //隐藏当前;  
                plus.webview.hide(activeTab);  
                //更改当前活跃的选项卡  
                activeTab = targetTab;  
            });  
             //自定义事件,模拟点击“首页选项卡”  
            document.addEventListener('gohome', function() {  
                var defaultTab = document.getElementById("defaultTab");  
                //模拟首页点击  
                mui.trigger(defaultTab, 'tap');  
                //切换选项卡高亮  
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
                if (defaultTab !== current) {  
                    current.classList.remove('mui-active');  
                    defaultTab.classList.add('mui-active');  
                }  
            });  
        </script>
继续阅读 »

类似这个问题http://ask.dcloud.net.cn/question/27036
方法就是在根页面创建子webview的时候要隐藏的子webview延时10ms隐藏就可以了

        <nav class="mui-bar mui-bar-tab">  
            <a id="defaultTab" class="mui-tab-item mui-active" href="first_index.html">  
                <span class="mui-icon iconfont icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="circle_index.html">  
                <span class="mui-icon iconfont icon-circle"></span>  
                <span class="mui-tab-label">圈</span>  
            </a>  
            <a class="mui-tab-item" href="user_index.html">  
                <span class="mui-icon iconfont icon-shouye"></span>  
                <span class="mui-tab-label">我</span>  
            </a>  
        </nav>  
        <script src="../js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
             //mui初始化  
            mui.init();  
            var subpages = ['first_index.html', 'circle_index.html', 'user_index.html'];  
            var subpage_style = {  
                top: '0',  
                bottom: '51px'  
            };  

            var aniShow = {};  

             //创建子页面,首个选项卡页面显示,其它均隐藏;  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                for (var i = 0; i < 3; i++) {  
                    var temp = {};  
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                    if (i > 0) {  

                    }else{  
                        temp[subpages[i]] = "true";  
                        mui.extend(aniShow,temp);  
                    }  
                    self.append(sub);  
                }  
                setTimeout(function(){  
                    for(var i=0;i<3;i++){  
                        if (i > 0) {  
                            plus.webview.getWebviewById(subpages[i]).hide();  
                        }  
                    }  
                },10);  
            });  
             //当前激活选项  
            var activeTab = subpages[0];  
//          var title = document.getElementById("title");  
             //选项卡点击事件  
            mui('.mui-bar-tab').on('tap', 'a', function(e) {  
                var targetTab = this.getAttribute('href');  
                if (targetTab == activeTab) {  
                    return;  
                }  
                //显示目标选项卡  
                plus.webview.show(targetTab);  
                //隐藏当前;  
                plus.webview.hide(activeTab);  
                //更改当前活跃的选项卡  
                activeTab = targetTab;  
            });  
             //自定义事件,模拟点击“首页选项卡”  
            document.addEventListener('gohome', function() {  
                var defaultTab = document.getElementById("defaultTab");  
                //模拟首页点击  
                mui.trigger(defaultTab, 'tap');  
                //切换选项卡高亮  
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
                if (defaultTab !== current) {  
                    current.classList.remove('mui-active');  
                    defaultTab.classList.add('mui-active');  
                }  
            });  
        </script>
收起阅读 »

蓝牙打印机打印小票项目版

蓝牙

本文参考:安卓Native.js蓝牙连接票据打印机完整代码
注意:本代码是很多年前的老代码了,已停止维护,对现在的uni-app不适用了。后续项目如果有uni-app蓝牙打印需求的话,会再封装一份新的。不用再私信我了,我都忘了咋写的了...

项目需要需要写一个手机开小票的东西,蓝牙打印机是目前比较成熟的东西!某宝买了一个蓝牙打印机和几卷热敏纸开搞.....
本人对android原生的东西不了解,也不想去麻烦我们的android工程师,只好从论坛内找,很轻松找打了本文参考链接里面这位仁兄写的文章,大写的服....同时也见识到了Native.js的威力,通过该文章确实可以连接到打印机也可以打印,但是说实话真不好用,主要有以下几点

   1.不支持自动连接打印机,操作复杂  
   2.蓝牙配对这一环节不好用还,而且速度很慢很费时间,没有配对错误提示也没有成功提示  
   3.手动配对好之后仍需要重新搜索蓝牙设备手动连接设备一次  

显然这样的体验是拿不上台面的,项目经理不愿意客户更不会愿意,于是开始大换血,主要做了以下优化

   1.首先界面要做的逼格高一点,尤其是进行到了哪一步一定要让客户知道啊  
   2.增加了检测蓝牙开启状态,傻瓜式操作  
   3.优化了检测配对情况,原来如果配对输入的密码不对也有可能会被加入到已配对列表里面  
   4.最主要的就是优化配对这一环节,原来的做法是根据点击的设备ID在重新搜索到和该Id一致的时候配对,现在是直接配对取消了重新搜索这一环节,稳定性和配对时间都比前者好多了,并且有了配对状态提示,配对成功和失败都是有提示的  
   5.连接打印机这一环节分成了两种情况,一种是配对后直接连接需要在有其他操作,另一种就是手动点击已配对列表的设备连接打印机  
   6.只要连接过一次打印机的下次启动app会自动连接(根据缓存来的,默认连接的是上一次连接的打印机)  

真机测试完全没问题,但是问题出现在了打包之后....在搜索开启蓝牙和搜索蓝牙设备的时候都不行。一想是权限的问题,吧蓝牙权限加上之后就可以了。。。

这三个权限是
android.permission.BLUETOOTH
android.permission.BLUETOOTH_ADMIN
android.permission.BLUETOOTH_PRIVILEGED

模块里面一定要把Geolocation(位置信息),加上否则搜不出来设备列表,真是想不明白为什么蓝牙还需要获取位置信息?

这里我就不贴代码了,具体看附件,封装程度算是较高了,基本上小改下就可以用了

附件是我新建的一个app项目,核心JS文件是printer.js

继续阅读 »

本文参考:安卓Native.js蓝牙连接票据打印机完整代码
注意:本代码是很多年前的老代码了,已停止维护,对现在的uni-app不适用了。后续项目如果有uni-app蓝牙打印需求的话,会再封装一份新的。不用再私信我了,我都忘了咋写的了...

项目需要需要写一个手机开小票的东西,蓝牙打印机是目前比较成熟的东西!某宝买了一个蓝牙打印机和几卷热敏纸开搞.....
本人对android原生的东西不了解,也不想去麻烦我们的android工程师,只好从论坛内找,很轻松找打了本文参考链接里面这位仁兄写的文章,大写的服....同时也见识到了Native.js的威力,通过该文章确实可以连接到打印机也可以打印,但是说实话真不好用,主要有以下几点

   1.不支持自动连接打印机,操作复杂  
   2.蓝牙配对这一环节不好用还,而且速度很慢很费时间,没有配对错误提示也没有成功提示  
   3.手动配对好之后仍需要重新搜索蓝牙设备手动连接设备一次  

显然这样的体验是拿不上台面的,项目经理不愿意客户更不会愿意,于是开始大换血,主要做了以下优化

   1.首先界面要做的逼格高一点,尤其是进行到了哪一步一定要让客户知道啊  
   2.增加了检测蓝牙开启状态,傻瓜式操作  
   3.优化了检测配对情况,原来如果配对输入的密码不对也有可能会被加入到已配对列表里面  
   4.最主要的就是优化配对这一环节,原来的做法是根据点击的设备ID在重新搜索到和该Id一致的时候配对,现在是直接配对取消了重新搜索这一环节,稳定性和配对时间都比前者好多了,并且有了配对状态提示,配对成功和失败都是有提示的  
   5.连接打印机这一环节分成了两种情况,一种是配对后直接连接需要在有其他操作,另一种就是手动点击已配对列表的设备连接打印机  
   6.只要连接过一次打印机的下次启动app会自动连接(根据缓存来的,默认连接的是上一次连接的打印机)  

真机测试完全没问题,但是问题出现在了打包之后....在搜索开启蓝牙和搜索蓝牙设备的时候都不行。一想是权限的问题,吧蓝牙权限加上之后就可以了。。。

这三个权限是
android.permission.BLUETOOTH
android.permission.BLUETOOTH_ADMIN
android.permission.BLUETOOTH_PRIVILEGED

模块里面一定要把Geolocation(位置信息),加上否则搜不出来设备列表,真是想不明白为什么蓝牙还需要获取位置信息?

这里我就不贴代码了,具体看附件,封装程度算是较高了,基本上小改下就可以用了

附件是我新建的一个app项目,核心JS文件是printer.js

收起阅读 »

iOS打包“doesn't support the Push Notifications capability”错误解决方法

iOS打包

为了解决iOS10平台兼容性问题,云端打包环境更新为(XCode8+iOS10 SDK)。
导致提交云端打包可能提示以下错误:

...  
Check dependencies  
Provisioning profile "XXXXXX" doesn't support the Push Notifications capability.  
Provisioning profile "XXXXXX" doesn't include the aps-environment entitlement.  
Code signing is required for product type 'Application' in SDK 'iOS 10.0'  
...

此错误的原因是在新版本XCode编译环境中会校验profile文件中是否配置使用Push功能。
如果应用中添加了“Push(消息推送)”模块(HBuilder的manifest.json文件“模块权限”->“模块设置”中配置),profile文件中则必需配置添加“Push Notifications”能力。

有两种解决方案:
一种是删除Push功能,即在HBuilder的manifest.json文件“模块权限”->“模块设置”中配置删除“Push(消息推送)”模块;
如果手动修改过manifest.json文件,请切换到源码视图,将permissions下的所有push节点数据都删除
另一种是更新profile文件,操作方法如下:

确保使用的App IDs打开“Push Notifications”服务

  1. 登录苹果开发者网站,输入开发者账号、密码并登录
  2. 左侧选择“Certificates, IDs & Profiles”,打开iOS证书管理界面
  3. 左侧“Identifiers”栏下选择“App IDs”,打开应用ID管理界面
  4. 在右侧ID管理列表中选择需要使用的应用标识
  5. 点击“Edit”按钮,在打开的服务列表中选中“Push Notifications”服务,点击“Done”保存

重新生成profile文件

  1. 左侧“Provisioning Profiles”栏下选择“Distribution”,打开发布profile管理界面
  2. 在右侧profile管理表中选择需要更新的profile项
  3. 点击“Edit”按钮,打开profile编辑页面
  4. 确认配置项正确,点击“Generate”按钮重新生成profile文件

验证方法
简单验证profile文件是否配置Push功能的方法是使用记事本打开profile文件,搜索是否存在“<key>aps-environment</key>”。
如果存在则表明配置Push功能正确,重新提交云端打包即可。

继续阅读 »

为了解决iOS10平台兼容性问题,云端打包环境更新为(XCode8+iOS10 SDK)。
导致提交云端打包可能提示以下错误:

...  
Check dependencies  
Provisioning profile "XXXXXX" doesn't support the Push Notifications capability.  
Provisioning profile "XXXXXX" doesn't include the aps-environment entitlement.  
Code signing is required for product type 'Application' in SDK 'iOS 10.0'  
...

此错误的原因是在新版本XCode编译环境中会校验profile文件中是否配置使用Push功能。
如果应用中添加了“Push(消息推送)”模块(HBuilder的manifest.json文件“模块权限”->“模块设置”中配置),profile文件中则必需配置添加“Push Notifications”能力。

有两种解决方案:
一种是删除Push功能,即在HBuilder的manifest.json文件“模块权限”->“模块设置”中配置删除“Push(消息推送)”模块;
如果手动修改过manifest.json文件,请切换到源码视图,将permissions下的所有push节点数据都删除
另一种是更新profile文件,操作方法如下:

确保使用的App IDs打开“Push Notifications”服务

  1. 登录苹果开发者网站,输入开发者账号、密码并登录
  2. 左侧选择“Certificates, IDs & Profiles”,打开iOS证书管理界面
  3. 左侧“Identifiers”栏下选择“App IDs”,打开应用ID管理界面
  4. 在右侧ID管理列表中选择需要使用的应用标识
  5. 点击“Edit”按钮,在打开的服务列表中选中“Push Notifications”服务,点击“Done”保存

重新生成profile文件

  1. 左侧“Provisioning Profiles”栏下选择“Distribution”,打开发布profile管理界面
  2. 在右侧profile管理表中选择需要更新的profile项
  3. 点击“Edit”按钮,打开profile编辑页面
  4. 确认配置项正确,点击“Generate”按钮重新生成profile文件

验证方法
简单验证profile文件是否配置Push功能的方法是使用记事本打开profile文件,搜索是否存在“<key>aps-environment</key>”。
如果存在则表明配置Push功能正确,重新提交云端打包即可。

收起阅读 »

学习笔记自我小结(二)

1.打开一个webview,要采用延时,因为webview样式渲染需要时间


bindCreateAddr: function() {//新建地址栏  
        mui("#addressManage .mui-scroll")[0].innerHTML = '';  
        mui(".check-btn-total")[0].classList.add("hide");  
        setTimeout(function() { //加个延时  
            mui.openWindow({  
                url: 'newAddress.html',  
                id: 'newAddress.html',  
                show: {  
                    aniShow: 'pop-in'  
                },  
                waiting: {  
                    autoShow: false  
                }  
            });  
        }, 70);  
    },

要加个延时。虽然js的确清除了innerHmtl = '' 但是webview的渲染执行,在openwindow执行后,未必就
渲染成功。

否则到newAddress.html 页面 再返回的时候,webview的渲染才会执行,就会看到执行innerHTML = ''操作之前的样式,然后再显示 innerHTML = '' 执行的操作样式。

这里重点注意一下。。。

  1. picker 省市区的三级联动 选中默认值,必须得加上延时才行。
cityPicker.pickers[0].setSelectedValue(130000);  
setTimeout(function(){  
cityPicker.pickers[1].setSelectedValue(130200);  
},100);

我侧过了,就是选择完第一个第二个效果还没显示完,所以不选择,设个延时就好了。希望对以后的朋友有帮助。

3.关于聚焦在input框上,系统自动调用软键盘会将底部的fixed定位的按钮顶起来。
原因是因为: 调用软键盘的显示,会将当前的webview挤压,减少视口的高度。
解决:监控 document.body.onresize 的事件来解决问题。
如下代码:
//代码结构如下,所有内容包含在了mui-scroll 里面。因为mui-scroll 是absolute,所以body的高度是无法因内容的多少而变化的。
//所以监控了mui-scroll的高度。
// 初始化加载第一次的未调用软键盘时的高度 newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight。
//然后再比较, 代码如下:

<div class="mui-content">  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  

                </div>  
            </div>    
        </div>  

newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight;//  

document.body.onresize = function() {  
            if(newAddress.view.scrollOffHeight > mui(".mui-scroll")[0].offsetHeight) {//比较  
                mui(".check-btn-total")[0].style.cssText = "display:none"; //控制底部的fixed按钮  
            } else {  
                mui(".check-btn-total")[0].style.cssText = "display:block";  
            }  
        }

4 .mui-content {overflow:hidden} 解决 scroll 滚动条问题

继续阅读 »

1.打开一个webview,要采用延时,因为webview样式渲染需要时间


bindCreateAddr: function() {//新建地址栏  
        mui("#addressManage .mui-scroll")[0].innerHTML = '';  
        mui(".check-btn-total")[0].classList.add("hide");  
        setTimeout(function() { //加个延时  
            mui.openWindow({  
                url: 'newAddress.html',  
                id: 'newAddress.html',  
                show: {  
                    aniShow: 'pop-in'  
                },  
                waiting: {  
                    autoShow: false  
                }  
            });  
        }, 70);  
    },

要加个延时。虽然js的确清除了innerHmtl = '' 但是webview的渲染执行,在openwindow执行后,未必就
渲染成功。

否则到newAddress.html 页面 再返回的时候,webview的渲染才会执行,就会看到执行innerHTML = ''操作之前的样式,然后再显示 innerHTML = '' 执行的操作样式。

这里重点注意一下。。。

  1. picker 省市区的三级联动 选中默认值,必须得加上延时才行。
cityPicker.pickers[0].setSelectedValue(130000);  
setTimeout(function(){  
cityPicker.pickers[1].setSelectedValue(130200);  
},100);

我侧过了,就是选择完第一个第二个效果还没显示完,所以不选择,设个延时就好了。希望对以后的朋友有帮助。

3.关于聚焦在input框上,系统自动调用软键盘会将底部的fixed定位的按钮顶起来。
原因是因为: 调用软键盘的显示,会将当前的webview挤压,减少视口的高度。
解决:监控 document.body.onresize 的事件来解决问题。
如下代码:
//代码结构如下,所有内容包含在了mui-scroll 里面。因为mui-scroll 是absolute,所以body的高度是无法因内容的多少而变化的。
//所以监控了mui-scroll的高度。
// 初始化加载第一次的未调用软键盘时的高度 newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight。
//然后再比较, 代码如下:

<div class="mui-content">  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  

                </div>  
            </div>    
        </div>  

newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight;//  

document.body.onresize = function() {  
            if(newAddress.view.scrollOffHeight > mui(".mui-scroll")[0].offsetHeight) {//比较  
                mui(".check-btn-total")[0].style.cssText = "display:none"; //控制底部的fixed按钮  
            } else {  
                mui(".check-btn-total")[0].style.cssText = "display:block";  
            }  
        }

4 .mui-content {overflow:hidden} 解决 scroll 滚动条问题

收起阅读 »

学习笔记自我小结(2)

1.打开一个webview,要采用延时,因为webview样式渲染需要时间

bindCreateAddr: function() {//新建地址栏  
        mui("#addressManage .mui-scroll")[0].innerHTML = '';  
        mui(".check-btn-total")[0].classList.add("hide");  
        setTimeout(function() { //加个延时  
            mui.openWindow({  
                url: 'newAddress.html',  
                id: 'newAddress.html',  
                show: {  
                    aniShow: 'pop-in'  
                },  
                waiting: {  
                    autoShow: false  
                }  
            });  
        }, 70);  
    },

要加个延时。虽然js的确清除了innerHmtl = '' 但是webview的渲染执行,在openwindow执行后,未必就
渲染成功。

否则到newAddress.html 页面 再返回的时候,webview的渲染才会执行,就会看到执行innerHTML = ''操作之前的样式,然后再显示 innerHTML = '' 执行的操作样式。

这里重点注意一下。。。

  1. picker 省市区的三级联动 选中默认值,必须得加上延时才行。

cityPicker.pickers[0].setSelectedValue(130000);  
setTimeout(function(){  
cityPicker.pickers[1].setSelectedValue(130200);  
},100);  

我侧过了,就是选择完第一个第二个效果还没显示完,所以不选择,设个延时就好了。希望对以后的朋友有帮助。

4.关于聚焦在input框上,系统自动调用软键盘会将底部的fixed定位的按钮顶起来。
原因是因为: 调用软键盘的显示,会将当前的webview挤压,减少视口的高度。
解决:监控 document.body.onresize 的事件来解决问题。
如下代码:
//代码结构如下,所有内容包含在了mui-scroll 里面。因为mui-scroll 是absolute,所以body的高度是无法因内容的多少而变化的。
//所以监控了mui-scroll的高度。
// 初始化加载第一次的未调用软键盘时的高度 newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight。
//然后再比较, 代码如下:

<div class="mui-content">  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  

                </div>  
            </div>    
        </div>  

newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight;//  

document.body.onresize = function() {  
            if(newAddress.view.scrollOffHeight > mui(".mui-scroll")[0].offsetHeight) {//比较  
                mui(".check-btn-total")[0].style.cssText = "display:none"; //控制底部的fixed按钮  
            } else {  
                mui(".check-btn-total")[0].style.cssText = "display:block";  
            }  
        }
  1. .mui-content {overflow:hidden} 解决 scroll 滚动条问题

  2. 官方的checkbox例子中,点击checkbox的圆圈,触发2次change,已解决

    不采用官方的checkbox, 自己重写。

  3. 打开新的webview,样式渲染需要时间,防止用户在第一眼看到乱的样式之前,用loaded加载完毕再show出
    来, 虽然页面加载完毕好了,但是js的渲染还在继续,所以可以适当的采用延迟,这里我给了300ms

    mui("#slider .mui-slider-group").on("tap", ".mui-slider-item", function() {  
            var waiting = plus.nativeUI.showWaiting("等待中...");  
            var detailView = plus.webview.create('detail.html','detail.html');  
            var proId = this.getAttribute("id");   
    
            mui.fire(detailView,'getProDetailInfo',{  
                "proDetail": data["banners"][1]   
            });  
    
            var waiting = plus.nativeUI.showWaiting("等待中...");  
    
            detailView.addEventListener("loaded",function(){//页面加载完成后才显示  
                setTimeout(function() {  
                    plus.nativeUI.closeWaiting("等待中...");  
                    detailView.show("pop-in");  
                }, 300)  
            },false);  
        })
继续阅读 »

1.打开一个webview,要采用延时,因为webview样式渲染需要时间

bindCreateAddr: function() {//新建地址栏  
        mui("#addressManage .mui-scroll")[0].innerHTML = '';  
        mui(".check-btn-total")[0].classList.add("hide");  
        setTimeout(function() { //加个延时  
            mui.openWindow({  
                url: 'newAddress.html',  
                id: 'newAddress.html',  
                show: {  
                    aniShow: 'pop-in'  
                },  
                waiting: {  
                    autoShow: false  
                }  
            });  
        }, 70);  
    },

要加个延时。虽然js的确清除了innerHmtl = '' 但是webview的渲染执行,在openwindow执行后,未必就
渲染成功。

否则到newAddress.html 页面 再返回的时候,webview的渲染才会执行,就会看到执行innerHTML = ''操作之前的样式,然后再显示 innerHTML = '' 执行的操作样式。

这里重点注意一下。。。

  1. picker 省市区的三级联动 选中默认值,必须得加上延时才行。

cityPicker.pickers[0].setSelectedValue(130000);  
setTimeout(function(){  
cityPicker.pickers[1].setSelectedValue(130200);  
},100);  

我侧过了,就是选择完第一个第二个效果还没显示完,所以不选择,设个延时就好了。希望对以后的朋友有帮助。

4.关于聚焦在input框上,系统自动调用软键盘会将底部的fixed定位的按钮顶起来。
原因是因为: 调用软键盘的显示,会将当前的webview挤压,减少视口的高度。
解决:监控 document.body.onresize 的事件来解决问题。
如下代码:
//代码结构如下,所有内容包含在了mui-scroll 里面。因为mui-scroll 是absolute,所以body的高度是无法因内容的多少而变化的。
//所以监控了mui-scroll的高度。
// 初始化加载第一次的未调用软键盘时的高度 newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight。
//然后再比较, 代码如下:

<div class="mui-content">  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  

                </div>  
            </div>    
        </div>  

newAddress.view.scrollOffHeight = mui(".mui-scroll")[0].offsetHeight;//  

document.body.onresize = function() {  
            if(newAddress.view.scrollOffHeight > mui(".mui-scroll")[0].offsetHeight) {//比较  
                mui(".check-btn-total")[0].style.cssText = "display:none"; //控制底部的fixed按钮  
            } else {  
                mui(".check-btn-total")[0].style.cssText = "display:block";  
            }  
        }
  1. .mui-content {overflow:hidden} 解决 scroll 滚动条问题

  2. 官方的checkbox例子中,点击checkbox的圆圈,触发2次change,已解决

    不采用官方的checkbox, 自己重写。

  3. 打开新的webview,样式渲染需要时间,防止用户在第一眼看到乱的样式之前,用loaded加载完毕再show出
    来, 虽然页面加载完毕好了,但是js的渲染还在继续,所以可以适当的采用延迟,这里我给了300ms

    mui("#slider .mui-slider-group").on("tap", ".mui-slider-item", function() {  
            var waiting = plus.nativeUI.showWaiting("等待中...");  
            var detailView = plus.webview.create('detail.html','detail.html');  
            var proId = this.getAttribute("id");   
    
            mui.fire(detailView,'getProDetailInfo',{  
                "proDetail": data["banners"][1]   
            });  
    
            var waiting = plus.nativeUI.showWaiting("等待中...");  
    
            detailView.addEventListener("loaded",function(){//页面加载完成后才显示  
                setTimeout(function() {  
                    plus.nativeUI.closeWaiting("等待中...");  
                    detailView.show("pop-in");  
                }, 300)  
            },false);  
        })
收起阅读 »

修改等待图的颜色

plus.nativeUI.showWaiting("正在加载...", {
background: "rgba(0,0,0,0)",
style: "white"
});

plus.nativeUI.showWaiting("正在加载...", {
background: "rgba(0,0,0,0)",
style: "white"
});

push推送遇到的问题总结

Push push问题解决方法

android:
一开始做就是不认真,想当然所以走了不少弯路,所以一定要对推送插件开发指南详细认真阅读!,认真阅读!,认真阅读!,开始正题

1.在个推官网设置appid appsecret等等参数,这些就不多说了,都有教程
2.对于推送的消息分为两种 ,1:普通的推送消息 2:透传数据(透传的数据又分为两种 ,下面具体说)
3. 对于普通消息的推送 ,只会在消息中心显示消息,只会触发点击启动应用等动作。注意了,只是触发启动应用等动作,并不是响应click事件!!!!!!,这是坑我最惨的,一开始我以为可以响应,官网其实也说了:只是触发启动应用等动作,是我想当然了!!,所以发送普通消息就别想着去触发click事件了!!!!!
4 说完普通消息推送,剩下的透传数据的推送就可以响应click和receive了,当然这也是分情况的!!,真坑。分析如下
1.当发送透传数据的格式是标准格式({title:"通知标题",content:"通知内容",payload:"通知去干嘛这里可以自定义"}),这个时候消息会发送到消息中心,并且这个时候当用户点击这个消息,就会响应click事件!,妈蛋终于响应了!,但是抱歉只能响应click事件,要想响应receive还得分情况。
2.说完了响应click事件的情况,剩下的就是receive事件响应了。只有发送的是透传数据 而且不是标准格式并且 当前应用在活动,这3个条件,才可以响应receive事件!!!,但是消息中心并没有消息展示!!!,这就是最坑的!

所以总结如下:
触发click事件: 发送透传数据并且格式为标准格式。
触发receive事件:发送透传数据且格式为非标准格式且应用在活动。(消息栏不会有提示!!!!!)
ios:
在线:只能响应receive,但消息中心无消息
不在线:消息中心有消息,且响应click事件

继续阅读 »

android:
一开始做就是不认真,想当然所以走了不少弯路,所以一定要对推送插件开发指南详细认真阅读!,认真阅读!,认真阅读!,开始正题

1.在个推官网设置appid appsecret等等参数,这些就不多说了,都有教程
2.对于推送的消息分为两种 ,1:普通的推送消息 2:透传数据(透传的数据又分为两种 ,下面具体说)
3. 对于普通消息的推送 ,只会在消息中心显示消息,只会触发点击启动应用等动作。注意了,只是触发启动应用等动作,并不是响应click事件!!!!!!,这是坑我最惨的,一开始我以为可以响应,官网其实也说了:只是触发启动应用等动作,是我想当然了!!,所以发送普通消息就别想着去触发click事件了!!!!!
4 说完普通消息推送,剩下的透传数据的推送就可以响应click和receive了,当然这也是分情况的!!,真坑。分析如下
1.当发送透传数据的格式是标准格式({title:"通知标题",content:"通知内容",payload:"通知去干嘛这里可以自定义"}),这个时候消息会发送到消息中心,并且这个时候当用户点击这个消息,就会响应click事件!,妈蛋终于响应了!,但是抱歉只能响应click事件,要想响应receive还得分情况。
2.说完了响应click事件的情况,剩下的就是receive事件响应了。只有发送的是透传数据 而且不是标准格式并且 当前应用在活动,这3个条件,才可以响应receive事件!!!,但是消息中心并没有消息展示!!!,这就是最坑的!

所以总结如下:
触发click事件: 发送透传数据并且格式为标准格式。
触发receive事件:发送透传数据且格式为非标准格式且应用在活动。(消息栏不会有提示!!!!!)
ios:
在线:只能响应receive,但消息中心无消息
不在线:消息中心有消息,且响应click事件

收起阅读 »

【公告】关于HBuilder 7.6.3中Android4.4以下软键盘闪退,子webview切换异常,iOS关闭子窗口导致应用卡死等问题的解决办法

公告

Android

软键盘闪退

HBuilder 7.6.3版真机调试,Android4.4以下设备,表单元素如input,点击获取焦点后软键盘出现立刻收回,再次点击无法弹出。

子窗口切换异常

Android平台下,父子webview模式。子webview首次显示,先全屏显示然后styles变化。

控制台信息

控制太多出的信息,是底层的日志信息,并不是bug,新的apk不会再出现这些日志信息。

iOS

关闭子窗口导致应用卡死

iOS父子webview模式下,关闭子窗口导致应用卡死。

解决办法

Alpha版HBuilder已修复以上问题,请更新或下载最新版Alpha版HBuilder。
下载地址: http://pan.baidu.com/s/1hs0O4eS#list/path=%2F&parentPath=%2Falpha%3Fqq-pf-to

7.6.5.201612262256-alpha 版本更新日志:
【重要】更新高德地图、百度地图、微信等第三SDK,支持https连接
Android平台修复获取设备屏幕逻辑分辨率不准确的问题
Android平台修复Webview作为子窗口使用fade-in动画效果显示不正常的问题
Android平台修复调用微信登录可能无法触发回调的问题
iOS平台补齐讯飞语音支持设置识别语言、标点符号功能
iOS平台修复关闭子Webview窗口可能导致页面卡死的问题
iOS平台修复个推发送透传消息启动可能导致异常退出的问题

继续阅读 »

Android

软键盘闪退

HBuilder 7.6.3版真机调试,Android4.4以下设备,表单元素如input,点击获取焦点后软键盘出现立刻收回,再次点击无法弹出。

子窗口切换异常

Android平台下,父子webview模式。子webview首次显示,先全屏显示然后styles变化。

控制台信息

控制太多出的信息,是底层的日志信息,并不是bug,新的apk不会再出现这些日志信息。

iOS

关闭子窗口导致应用卡死

iOS父子webview模式下,关闭子窗口导致应用卡死。

解决办法

Alpha版HBuilder已修复以上问题,请更新或下载最新版Alpha版HBuilder。
下载地址: http://pan.baidu.com/s/1hs0O4eS#list/path=%2F&parentPath=%2Falpha%3Fqq-pf-to

7.6.5.201612262256-alpha 版本更新日志:
【重要】更新高德地图、百度地图、微信等第三SDK,支持https连接
Android平台修复获取设备屏幕逻辑分辨率不准确的问题
Android平台修复Webview作为子窗口使用fade-in动画效果显示不正常的问题
Android平台修复调用微信登录可能无法触发回调的问题
iOS平台补齐讯飞语音支持设置识别语言、标点符号功能
iOS平台修复关闭子Webview窗口可能导致页面卡死的问题
iOS平台修复个推发送透传消息启动可能导致异常退出的问题

收起阅读 »

解析XML文件

之前一直用json格式,后来接口边XML,发现解析也方便:

var xmlDoc=new DOMParser().parseFromString(jsonStr, "text/xml");
var desc = xmlDoc.getElementsByTagName("desc")[0].firstChild.nodeValue;
var flag = xmlDoc.getElementsByTagName("flag")[0].firstChild.nodeValue;

继续阅读 »

之前一直用json格式,后来接口边XML,发现解析也方便:

var xmlDoc=new DOMParser().parseFromString(jsonStr, "text/xml");
var desc = xmlDoc.getElementsByTagName("desc")[0].firstChild.nodeValue;
var flag = xmlDoc.getElementsByTagName("flag")[0].firstChild.nodeValue;

收起阅读 »

文字合成语音的实现

Native.JS 文字转语音 语音朗读 TTS

HBuilder版本号为7.6.3.201612161809及之后的用户请用如下Native.Js代码实现:

var receiver;  

                receiver = plus.android.implements('com.iflytek.cloud.SynthesizerListener', {  
                    onEvent: function(int eventType, int arg1, int arg2, Bundle obj) {  
                        console.log("onEvent");  
                    },  
                    onSpeakBegin: function() {  
                        console.log("开始阅读");  
                    },  
                    onSpeakPaused: function() {  
                        console.log(" 暂停播放 ");  
                    },  
                    onSpeakResumed: function() {  
                        console.log("继续播放");  
                    },  
                    onBufferProgress: function(percent, beginPos, endPos, info) {  
                        console.log("合成进度" + percent);  
                    },  
                    onSpeakProgress: function(percent, beginPos, endPos) {  
                        console.log("播放进度" + percent);  
                    },  
                    onCompleted: function(error) {  
                        console.log("播放完毕");  
                    }  
                });  

                var main = plus.android.runtimeMainActivity();  

                var SpeechUtility = plus.android.importClass('com.iflytek.cloud.SpeechUtility');  

                SpeechUtility.createUtility(main, "appid=53feacdd");  

                var SynthesizerPlayer = plus.android.importClass('com.iflytek.cloud.SpeechSynthesizer');  

                var play = SynthesizerPlayer.createSynthesizer(main, null);  
                 // 开始合成  
                play.startSpeaking('新年快乐', receiver);  
        // 取消合成  
        play.stopSpeaking();  
        // 暂停播放  
        play.pauseSpeaking();  
        // 继续播放  
        play.resumeSpeaking();

该版本之前的用户请参考下面的写法:
由于Android系统tts不支持中文,使用科大讯飞文字转语音功能,使用如此功能时,需要保证manifest.json中permissions节点含有speech节点(如"Speech": {"description": "管理语音识别插件" })。

var main = plus.android.runtimeMainActivity();  
var SynthesizerPlayer = plus.android.importClass('com.iflytek.speech.SynthesizerPlayer');  
var play = SynthesizerPlayer.createSynthesizerPlayer(main,'appid=53feacdd');  
play.playText('水果',null,null);

iOS平台参考[http://ask.dcloud.net.cn/question/4175)(http://ask.dcloud.net.cn/question/4175)

继续阅读 »

HBuilder版本号为7.6.3.201612161809及之后的用户请用如下Native.Js代码实现:

var receiver;  

                receiver = plus.android.implements('com.iflytek.cloud.SynthesizerListener', {  
                    onEvent: function(int eventType, int arg1, int arg2, Bundle obj) {  
                        console.log("onEvent");  
                    },  
                    onSpeakBegin: function() {  
                        console.log("开始阅读");  
                    },  
                    onSpeakPaused: function() {  
                        console.log(" 暂停播放 ");  
                    },  
                    onSpeakResumed: function() {  
                        console.log("继续播放");  
                    },  
                    onBufferProgress: function(percent, beginPos, endPos, info) {  
                        console.log("合成进度" + percent);  
                    },  
                    onSpeakProgress: function(percent, beginPos, endPos) {  
                        console.log("播放进度" + percent);  
                    },  
                    onCompleted: function(error) {  
                        console.log("播放完毕");  
                    }  
                });  

                var main = plus.android.runtimeMainActivity();  

                var SpeechUtility = plus.android.importClass('com.iflytek.cloud.SpeechUtility');  

                SpeechUtility.createUtility(main, "appid=53feacdd");  

                var SynthesizerPlayer = plus.android.importClass('com.iflytek.cloud.SpeechSynthesizer');  

                var play = SynthesizerPlayer.createSynthesizer(main, null);  
                 // 开始合成  
                play.startSpeaking('新年快乐', receiver);  
        // 取消合成  
        play.stopSpeaking();  
        // 暂停播放  
        play.pauseSpeaking();  
        // 继续播放  
        play.resumeSpeaking();

该版本之前的用户请参考下面的写法:
由于Android系统tts不支持中文,使用科大讯飞文字转语音功能,使用如此功能时,需要保证manifest.json中permissions节点含有speech节点(如"Speech": {"description": "管理语音识别插件" })。

var main = plus.android.runtimeMainActivity();  
var SynthesizerPlayer = plus.android.importClass('com.iflytek.speech.SynthesizerPlayer');  
var play = SynthesizerPlayer.createSynthesizerPlayer(main,'appid=53feacdd');  
play.playText('水果',null,null);

iOS平台参考[http://ask.dcloud.net.cn/question/4175)(http://ask.dcloud.net.cn/question/4175)

收起阅读 »

app开发视频教程 - 用户注册、登录、微信登录(完全免费 精细讲解 欢迎 学习) 还有mui、h5+教程都是免费的 快来学习吧

移动APP

《app开发教程-用户注册、登录、微信登录》视频教程已经更新完毕,涵盖了用户注册、登录、微信登录等相关知识点的详细讲解,欢迎观看学习!观看地址
http://www.hcoder.net/course

交流qq群 335126794 欢迎加入

继续阅读 »

《app开发教程-用户注册、登录、微信登录》视频教程已经更新完毕,涵盖了用户注册、登录、微信登录等相关知识点的详细讲解,欢迎观看学习!观看地址
http://www.hcoder.net/course

交流qq群 335126794 欢迎加入

收起阅读 »

7.6.3.201612161809版本更新后Android多数机器出现输入法弹出后消失问题

输入法 Android

7.6.3.201612161809更新后
测试多个机型同时出现,点击文本框之后输入法弹出,马上又消失的问题,只存在于Android机型
新建空白项目或者新建MUI的demo项目问题同样存在,所以猜测云端打包是否更新后有问题,
如果确定存在问题,希望可以快一点更新解决, 0.0

继续阅读 »

7.6.3.201612161809更新后
测试多个机型同时出现,点击文本框之后输入法弹出,马上又消失的问题,只存在于Android机型
新建空白项目或者新建MUI的demo项目问题同样存在,所以猜测云端打包是否更新后有问题,
如果确定存在问题,希望可以快一点更新解决, 0.0

收起阅读 »