HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

android触摸提示音

现有一个项目需要点击有回馈提示 自己看了看ANDROID API 写了出来 见很多人需要分享出来大家学习学习

var context = null;  
if(mui.os.android){  
            if(context == null){  
                plus.android.importClass("android.media.AudioManager");  
                context = plus.android.importClass("android.content.Context");  
                    var RingtoneManager = plus.android.runtimeMainActivity().getSystemService(context.AUDIO_SERVICE);  
                RingtoneManager.playSoundEffect(1);  
            }else{  
                var RingtoneManager = plus.android.runtimeMainActivity().getSystemService(context.AUDIO_SERVICE);  
                RingtoneManager.playSoundEffect(1);   
            }  

        }  

plus.device.vibrate( 50 ); //震动
继续阅读 »

现有一个项目需要点击有回馈提示 自己看了看ANDROID API 写了出来 见很多人需要分享出来大家学习学习

var context = null;  
if(mui.os.android){  
            if(context == null){  
                plus.android.importClass("android.media.AudioManager");  
                context = plus.android.importClass("android.content.Context");  
                    var RingtoneManager = plus.android.runtimeMainActivity().getSystemService(context.AUDIO_SERVICE);  
                RingtoneManager.playSoundEffect(1);  
            }else{  
                var RingtoneManager = plus.android.runtimeMainActivity().getSystemService(context.AUDIO_SERVICE);  
                RingtoneManager.playSoundEffect(1);   
            }  

        }  

plus.device.vibrate( 50 ); //震动
收起阅读 »

在红米note2 mui8上子选项卡偶尔遮盖部分底部导航栏

mui

经测试发现去掉这句话就没事了 plus.webview.currentWebview().setStyle({scrollIndicator:'none'}); 不知道是什么原因

经测试发现去掉这句话就没事了 plus.webview.currentWebview().setStyle({scrollIndicator:'none'}); 不知道是什么原因

iOS10 降级到 iOS9

最近手机升级到iOS10后无法连接调试,现在只能讲手机系统降级到iOS9,为了帮助大家,讲降级方法分享
如下:

  1. 需要电脑安装iTools和iTunes
  2. 连接手机
  3. 在iTools下载手机对应的固件文件
  4. 通过iTunes安装固件文件(按住Shift键点击“更新”按钮选择固件文件)

继续阅读 »

最近手机升级到iOS10后无法连接调试,现在只能讲手机系统降级到iOS9,为了帮助大家,讲降级方法分享
如下:

  1. 需要电脑安装iTools和iTunes
  2. 连接手机
  3. 在iTools下载手机对应的固件文件
  4. 通过iTunes安装固件文件(按住Shift键点击“更新”按钮选择固件文件)

收起阅读 »

发现真机测试困扰太多,建立了群,还请无私的各位能互相帮忙测试APP

你在开发app后,如何测试各种机型的呢,找朋友,找同事,有限的几种机型吧。
公司购买测试设备,成本太大。
客户反映其他机型有问题,你怎么办,

有这个想法,就组建了个qq群,方便真机测试,还请加群的朋友互相帮忙。
群号:102920834

你在开发app后,如何测试各种机型的呢,找朋友,找同事,有限的几种机型吧。
公司购买测试设备,成本太大。
客户反映其他机型有问题,你怎么办,

有这个想法,就组建了个qq群,方便真机测试,还请加群的朋友互相帮忙。
群号:102920834

关于HBuilder语法验证的建议

HBuilder

HBuilder自带的JS语法验证无法正常解析ES6的语法(比如箭头函数报错), 建议迁移到node插件eslint

HBuilder自带的JS语法验证无法正常解析ES6的语法(比如箭头函数报错), 建议迁移到node插件eslint

【分享】mui switch开关设置为只读效果

switch mui

昨天提问,没人啊没人,所谓的只读就是要求去除点击效果,只运行js后台操作。
研究了下Mui.js后,如下:

当然,希望官方加入readonly属性!

1.重新定义mui-disable,取消透明样式,当然也可以在这里改变switch的颜色background-color

        .mui-switch.mui-disabled{  
            opacity:99;  
        }

PS,改变颜色:

        .mui-switch.mui-active.mui-disabled{  
            background-color:#eac;  
            border-color:#eac;  
            opacity:99;  
        }

2.在需要的的switch处加入mui-disabled属性

                    <div id="sw1" class="mui-switch mui-active mui-disabled" >  
                        <div class="mui-switch-handle" ></div>  
                    </div>

3.在代码中复制toggle方法并hook掉原来的toggle

        mui.ready(function() {  
            mui("#sw1").switch().oldtoggle = mui("#sw1").switch().toggle;  
            mui("#sw1").switch().toggle = function(){  
            };  
        });

4.在需要后台js操作的地方,调用新的toggle就可以了,同时你会发现点击该switch会失去效果。

        function tg(){  
            mui("#sw1").switch().oldtoggle();  
        };

5.大概就像附件这样!欢迎加分。

继续阅读 »

昨天提问,没人啊没人,所谓的只读就是要求去除点击效果,只运行js后台操作。
研究了下Mui.js后,如下:

当然,希望官方加入readonly属性!

1.重新定义mui-disable,取消透明样式,当然也可以在这里改变switch的颜色background-color

        .mui-switch.mui-disabled{  
            opacity:99;  
        }

PS,改变颜色:

        .mui-switch.mui-active.mui-disabled{  
            background-color:#eac;  
            border-color:#eac;  
            opacity:99;  
        }

2.在需要的的switch处加入mui-disabled属性

                    <div id="sw1" class="mui-switch mui-active mui-disabled" >  
                        <div class="mui-switch-handle" ></div>  
                    </div>

3.在代码中复制toggle方法并hook掉原来的toggle

        mui.ready(function() {  
            mui("#sw1").switch().oldtoggle = mui("#sw1").switch().toggle;  
            mui("#sw1").switch().toggle = function(){  
            };  
        });

4.在需要后台js操作的地方,调用新的toggle就可以了,同时你会发现点击该switch会失去效果。

        function tg(){  
            mui("#sw1").switch().oldtoggle();  
        };

5.大概就像附件这样!欢迎加分。

收起阅读 »

使用mui的索引列表demo,动态加载,修改为通讯录联系人。

因公司需要,本人从安卓开发转战h5开发,若有不对指出,请指出,请勿喷!这是我在自学过程,开发公司项目遇到的问题。
按照之前论坛已经有大神给出 修改 mui.indexedlist.js对应部分为
init: function(holder, options) {
var self = this;
mui.ajax('url', {//
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var html="",
for (var i = 0; i < data.length; i++) {
//插入数据
html= "你需要的数据";
}
table.innerHTML = html;
self.init1(holder, options);
},
error: function(xhr, type, errorThrown) {
console.log(type);
}
});
},
init1: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 IndexedList 时需要指定 element";
}
self.createDom();
self.findElements();
self.caleLayout();
self.bindEvent();
},

即可发现数据就加载列表上了。 如果你的 数据源 已经安装 字母顺序分好类 ,按照demo 中 分别将数据 添加到对应的
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>   下面即可。
如果数据源没有进行分类,例如数据源如下格式:{"cRealName":"XX","cTelephoneNumber":"137xxxxxxxxx","cDepartmentName":"董事长办公室"}
这是项目中后台给我返回的数据源。 几经周折我如下 修改 完成项目需求。
var table = document.body.querySelector('.mui-table-view');
var htmla=""; //一个字母创建一个 ,即可
var b=0,a=0;//
for (var i = 0; i < data.length; i++) {
//插入数据
var s=makePy(data[i].cRealName)+"";//此方法为 将返回的姓名 转为 大写首字母缩写 ,百度即可 如 李二 转为LR
var shouzimu=s.substr(0, 1); //此方法获取 首字母 。
//首字母 为 A的
if(shouzimu=="A"){
if (a==0) {
htmla += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li> <li data-value='+s+ 'data-tags='+s+' class="mui-table-view-cell mui-indexed-list-item">'+data[i].cRealName+'</li>';
a=a+1;
} else{
htmla +='<li data-value='+s+ 'data-tags='+s+' class="mui-table-view-cell mui-indexed-list-item">'+data[i].cRealName+'</li>';
}
} 
}
table.innerHTML = htmla;//要按照 字母顺序添加 对应字母的 字符串即可
self.init1(holder, options);
这样不管数据源如何返回 都会按照首字母 排序下来。

继续阅读 »

因公司需要,本人从安卓开发转战h5开发,若有不对指出,请指出,请勿喷!这是我在自学过程,开发公司项目遇到的问题。
按照之前论坛已经有大神给出 修改 mui.indexedlist.js对应部分为
init: function(holder, options) {
var self = this;
mui.ajax('url', {//
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var html="",
for (var i = 0; i < data.length; i++) {
//插入数据
html= "你需要的数据";
}
table.innerHTML = html;
self.init1(holder, options);
},
error: function(xhr, type, errorThrown) {
console.log(type);
}
});
},
init1: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 IndexedList 时需要指定 element";
}
self.createDom();
self.findElements();
self.caleLayout();
self.bindEvent();
},

即可发现数据就加载列表上了。 如果你的 数据源 已经安装 字母顺序分好类 ,按照demo 中 分别将数据 添加到对应的
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>   下面即可。
如果数据源没有进行分类,例如数据源如下格式:{"cRealName":"XX","cTelephoneNumber":"137xxxxxxxxx","cDepartmentName":"董事长办公室"}
这是项目中后台给我返回的数据源。 几经周折我如下 修改 完成项目需求。
var table = document.body.querySelector('.mui-table-view');
var htmla=""; //一个字母创建一个 ,即可
var b=0,a=0;//
for (var i = 0; i < data.length; i++) {
//插入数据
var s=makePy(data[i].cRealName)+"";//此方法为 将返回的姓名 转为 大写首字母缩写 ,百度即可 如 李二 转为LR
var shouzimu=s.substr(0, 1); //此方法获取 首字母 。
//首字母 为 A的
if(shouzimu=="A"){
if (a==0) {
htmla += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li> <li data-value='+s+ 'data-tags='+s+' class="mui-table-view-cell mui-indexed-list-item">'+data[i].cRealName+'</li>';
a=a+1;
} else{
htmla +='<li data-value='+s+ 'data-tags='+s+' class="mui-table-view-cell mui-indexed-list-item">'+data[i].cRealName+'</li>';
}
} 
}
table.innerHTML = htmla;//要按照 字母顺序添加 对应字母的 字符串即可
self.init1(holder, options);
这样不管数据源如何返回 都会按照首字母 排序下来。

收起阅读 »

HBuilder使用逍遥安卓模拟器进行调式

模拟器 HBuilder

第一次使用的模拟器是逍遥安卓模拟器,之后也几乎试过市面所有模拟器,最后还是觉得逍遥模拟器好用,可能是先入为主的原因。
最近正在学习android开发,由于没有基础,学起来很吃力。。。某程序媛推荐我学习html5这种模式。
然后了解到dcloud和apicloud 、额,然后看了http://dcloud.io/150604/index.html 决定还是入坑dcloud
我不太喜欢连着手机调式,看了官方的模拟器使用文档,好长好长,看完也不知道怎么下手。

废话说完,开始正事

> 1. 第一步
下载安装逍遥模拟器

第二步、
打开HBuilder安装目录找到tools文件夹

> 第二步、
打开tools文件夹

> 复制 adb.exe AdbWinApi.dll AdbWinUsbApi.dll 到逍遥安卓模拟器安装目录MEmu文件夹下覆盖之

> 第三步、
启动逍遥模拟器
1、找到“设置”
2、找到“关于平板电脑”(或者关于手机)并点击进入
3、找到 “版本号”
4、鼠标连续点击“版本号”选项
5、会弹出一段文字提醒,直到提醒次数为0后。结束点击。
6、返回“设置界面”,滑动到最底部,就可以看到 “开发者选项”已经打开

> 第四步、
进入开发者选项
把usb调式打上勾选

> 第五步、
启动/重启 HBuilder

工具》选项》HBuilder》内置WEB服务器 》端口我设置为 8020-21503

> 确定保存。重启 HBuilder

启动模拟器。

打开模拟器安装目录,双击击adb.exe

回到HBuilder,点击如图即可

继续阅读 »

第一次使用的模拟器是逍遥安卓模拟器,之后也几乎试过市面所有模拟器,最后还是觉得逍遥模拟器好用,可能是先入为主的原因。
最近正在学习android开发,由于没有基础,学起来很吃力。。。某程序媛推荐我学习html5这种模式。
然后了解到dcloud和apicloud 、额,然后看了http://dcloud.io/150604/index.html 决定还是入坑dcloud
我不太喜欢连着手机调式,看了官方的模拟器使用文档,好长好长,看完也不知道怎么下手。

废话说完,开始正事

> 1. 第一步
下载安装逍遥模拟器

第二步、
打开HBuilder安装目录找到tools文件夹

> 第二步、
打开tools文件夹

> 复制 adb.exe AdbWinApi.dll AdbWinUsbApi.dll 到逍遥安卓模拟器安装目录MEmu文件夹下覆盖之

> 第三步、
启动逍遥模拟器
1、找到“设置”
2、找到“关于平板电脑”(或者关于手机)并点击进入
3、找到 “版本号”
4、鼠标连续点击“版本号”选项
5、会弹出一段文字提醒,直到提醒次数为0后。结束点击。
6、返回“设置界面”,滑动到最底部,就可以看到 “开发者选项”已经打开

> 第四步、
进入开发者选项
把usb调式打上勾选

> 第五步、
启动/重启 HBuilder

工具》选项》HBuilder》内置WEB服务器 》端口我设置为 8020-21503

> 确定保存。重启 HBuilder

启动模拟器。

打开模拟器安装目录,双击击adb.exe

回到HBuilder,点击如图即可

收起阅读 »

用了mui后不调用android的复制了,网给的重写-webkit-user-select: text方法也不行

用了mui后不调用android的复制了,网给的重写-webkit-user-select: text方法也不行

用了mui后不调用android的复制了,网给的重写-webkit-user-select: text方法也不行

【公告】关于mac10.12系统下首次启动提示找不到jvm、actionSheet 安卓样式错乱、iOS 10真机运行、提示PHP等问题的公告

php大纲 iOS10 公告
  1. Mac10.12系统目前仍不是很稳定,刚解压完的HBuilder启动时会报找到不到jvm环境。
    原因是mac10.12系统提供的api无法正确获取刚解压完毕文件的路径。我们的工程师正在努力找解决方案。出现此问题的开发者请将解压后的HBuilder复制到别的目录就可以正常打开了。

  2. HBuilder 7.5.0的android版本产生了actionSheet 样式错乱问题,该问题已经在最新的7.5.1版本修复。有此问题者请升级到此版本

  3. HBuilder 7.5.0 已解决PC版的iOS10无法真机运行问题,Mac版暂未解决,大家可以使用xcode模拟器调试
    更新后如无法使用请
    ①请在工具-插件安装中,安装iOS链接插件,如已安装请卸载后重新安装,重启HBuilder并重试
    ②检查是否安装有老版本的iTools,如有安装,请升级到最新版,未安装则无需处理

  4. HBuilder7.4.2版出现的php文件无法使用大纲、无法使用alt+左键转到函数/变量定义等问题。
    HBuilder 7.5.0已修复该问题,有此问题者请升级到此版本

如果想退回到历史版本,可以在官网下载界面下方点击历史版本链接。
注意HBuilder的历史版本里自带的真机运行基座都是严格的历史版本,但云端打包的引擎并不是严格和HBuilder历史版本对应的老版打包机,某些版本在云端打包机并不存在,此时会切换为使用最新版本打包。使用plus.runtime可以查看引擎版本。

  1. HBuilder7.5之后提供的plus api提前生效方案对性能优化很重要,推荐阅读专题文章http://ask.dcloud.net.cn/article/921
继续阅读 »
  1. Mac10.12系统目前仍不是很稳定,刚解压完的HBuilder启动时会报找到不到jvm环境。
    原因是mac10.12系统提供的api无法正确获取刚解压完毕文件的路径。我们的工程师正在努力找解决方案。出现此问题的开发者请将解压后的HBuilder复制到别的目录就可以正常打开了。

  2. HBuilder 7.5.0的android版本产生了actionSheet 样式错乱问题,该问题已经在最新的7.5.1版本修复。有此问题者请升级到此版本

  3. HBuilder 7.5.0 已解决PC版的iOS10无法真机运行问题,Mac版暂未解决,大家可以使用xcode模拟器调试
    更新后如无法使用请
    ①请在工具-插件安装中,安装iOS链接插件,如已安装请卸载后重新安装,重启HBuilder并重试
    ②检查是否安装有老版本的iTools,如有安装,请升级到最新版,未安装则无需处理

  4. HBuilder7.4.2版出现的php文件无法使用大纲、无法使用alt+左键转到函数/变量定义等问题。
    HBuilder 7.5.0已修复该问题,有此问题者请升级到此版本

如果想退回到历史版本,可以在官网下载界面下方点击历史版本链接。
注意HBuilder的历史版本里自带的真机运行基座都是严格的历史版本,但云端打包的引擎并不是严格和HBuilder历史版本对应的老版打包机,某些版本在云端打包机并不存在,此时会切换为使用最新版本打包。使用plus.runtime可以查看引擎版本。

  1. HBuilder7.5之后提供的plus api提前生效方案对性能优化很重要,推荐阅读专题文章http://ask.dcloud.net.cn/article/921
收起阅读 »

成功集成阿里百川IM即时通讯并上线应用.

IM HTML5

一直想集成一套成熟的即时通讯在项目中,毕竟使用H5已经两年了,自己也写了很多实际的应用,接下来给大家分享下集成阿里IM时所见,让大家在集成过程中少走弯路。

1、选择IM通信服务商
一开始在选择阶段了解了很多市场上的比如像野狗、融云等产品,这些产品都有很完善的DEMO和接入方式,服务支持也特别的好,才注册立马就有服务电话进来,可最终我还是选择了阿里,主要原因阿里所提供的第三方服务产品一体化比较完善、例如我们使用了云账号解决的tonken的权限时效验证问题、放弃了以前使用的个推换成的阿里的推送服务用来解决IM过程的推送问题,特别关注的就是提供的电商服务没准以后某个项目真的用到了呢? 最后一点很重要现阶段IM完全免费.... 实际测试起来运行很顺畅,也很稳定.

2、搭建过程

  1. 创建应用并申请相关服务(推送、云账号、IM服务申请基本是秒审核) http://baichuan.taobao.com/
  2. 搭建IM通信过程中的图片、语音文件服务器,阿里仅提供了文字和图片的存储,想想看还不如自己搭建一套存储服务器呢,其实就是简单的图片上传、语音存储功能,语音文件在Android和IOS平台互转遇到了问题,解决可见 http://ask.dcloud.net.cn/article/841
    3.下载阿里SDK,构建服务端推送和聊天消息监控,集成云账号,提供TOKEN验证功能。SDK可在阿里管理后台中下载,文档和接口测试工具:http://open.taobao.com/apitools/apiTools.htm?spm=a219a.7395905.0.0.CO4f4r&catId=1&apiId=24819&apiName=taobao.open.account.delete&scopeId=
    4.构建H5页面,聊天列表页面和聊天页面,这一块可以说花费了很长的时间在做调试和稳定性控制,很重要的一点 所有的SDK请求请在一个常存页面调用,包括登陆、获取历史联系人、获取历史聊天信息、获取未阅读数量、消息监听及登出。我是放在了消息列表页面来处理这些事情。
    5.所有的消息仅用了文本类型(包括图片和语音消息),比如图片我使用了一个特殊标记符(ALIIMG:),在消息装载时特殊处理装载。
    6.调试稳定,因为实际运行过程中因网络环境变化、应用程序强制退出等等,需要构建完善的监听方法、前后切入方法,保证IM通信正常。

大家在接入过程中遇到什么问题可留言给我~

贴一下最终的效果吧:

继续阅读 »

一直想集成一套成熟的即时通讯在项目中,毕竟使用H5已经两年了,自己也写了很多实际的应用,接下来给大家分享下集成阿里IM时所见,让大家在集成过程中少走弯路。

1、选择IM通信服务商
一开始在选择阶段了解了很多市场上的比如像野狗、融云等产品,这些产品都有很完善的DEMO和接入方式,服务支持也特别的好,才注册立马就有服务电话进来,可最终我还是选择了阿里,主要原因阿里所提供的第三方服务产品一体化比较完善、例如我们使用了云账号解决的tonken的权限时效验证问题、放弃了以前使用的个推换成的阿里的推送服务用来解决IM过程的推送问题,特别关注的就是提供的电商服务没准以后某个项目真的用到了呢? 最后一点很重要现阶段IM完全免费.... 实际测试起来运行很顺畅,也很稳定.

2、搭建过程

  1. 创建应用并申请相关服务(推送、云账号、IM服务申请基本是秒审核) http://baichuan.taobao.com/
  2. 搭建IM通信过程中的图片、语音文件服务器,阿里仅提供了文字和图片的存储,想想看还不如自己搭建一套存储服务器呢,其实就是简单的图片上传、语音存储功能,语音文件在Android和IOS平台互转遇到了问题,解决可见 http://ask.dcloud.net.cn/article/841
    3.下载阿里SDK,构建服务端推送和聊天消息监控,集成云账号,提供TOKEN验证功能。SDK可在阿里管理后台中下载,文档和接口测试工具:http://open.taobao.com/apitools/apiTools.htm?spm=a219a.7395905.0.0.CO4f4r&catId=1&apiId=24819&apiName=taobao.open.account.delete&scopeId=
    4.构建H5页面,聊天列表页面和聊天页面,这一块可以说花费了很长的时间在做调试和稳定性控制,很重要的一点 所有的SDK请求请在一个常存页面调用,包括登陆、获取历史联系人、获取历史聊天信息、获取未阅读数量、消息监听及登出。我是放在了消息列表页面来处理这些事情。
    5.所有的消息仅用了文本类型(包括图片和语音消息),比如图片我使用了一个特殊标记符(ALIIMG:),在消息装载时特殊处理装载。
    6.调试稳定,因为实际运行过程中因网络环境变化、应用程序强制退出等等,需要构建完善的监听方法、前后切入方法,保证IM通信正常。

大家在接入过程中遇到什么问题可留言给我~

贴一下最终的效果吧:

收起阅读 »

关于本次软件更新后PHP文件无法提示自定义函数以及函数定位功能失效的解决方法。

① 右击打开的文件
② 选择最下面的(首选项)
③ 选择左边的(编辑器)不是(文本编辑器)
④ 选择右边的第一行的蓝色“文件关联”
⑤ 在上面的框(文件类型)中找到php选中
⑥ 在下面的框(相关联的编辑器)中找到 PHP Editor(Aptana) 选中,然后点击一下旁边的 (缺省值)按钮
⑦ 点击最下方的确定

然后你就发现,以前的又回来了

继续阅读 »

① 右击打开的文件
② 选择最下面的(首选项)
③ 选择左边的(编辑器)不是(文本编辑器)
④ 选择右边的第一行的蓝色“文件关联”
⑤ 在上面的框(文件类型)中找到php选中
⑥ 在下面的框(相关联的编辑器)中找到 PHP Editor(Aptana) 选中,然后点击一下旁边的 (缺省值)按钮
⑦ 点击最下方的确定

然后你就发现,以前的又回来了

收起阅读 »