HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

感谢Hbuider+mui

5年前,一直是一个B/S软件开发者。近几年进入了政府机关,从事了不同行业,不再做开发,可一直都放不下曾经辛苦学来的技术。曾经想学Android开发,但由于平常工作忙,学习成本太高太复杂,望而却步。直至10天前发现Hbuider,被它的易用性所深深吸引!
10多天来,白天上班,晚上学习,终于克服诸多困难,成功做出了自己的第一个软件,把单位的网站app化,使用MUI框架+ajax技术+个推平台,没有想到Hbuider+MUI+HTML5这么强大,效果不亚于原生!
感谢提供如此方便的人们!

简单分享一下我的架构(因为是初学者,不一定优化,也不一定科学,仅供参考)

  1. 根页面( index):带侧滑菜单页,侧滑菜单设置有三个一级菜单。点击后,自定义函数修改index页的二级菜单,设置index的subpage为该一级菜单下的默认页template,同时关闭侧滑菜单页。
    index页:预读index-menu,预读显示详细内容的showContent页

  1. 列表模板页面(template):点击二级菜单,经ajax调取不同数据显示列表,点击列表,打开showContent页,传入参数,ajax调取详细内容显示。
  2. 详细内容显示( showContent):是一个带subpage的模板页,重写MUI.back,返回后恢复其subpage为一个空页面(否则点其他列表再次打开的瞬间还是上一次内容的缓存。)
  3. 绑定个推插件,测试推送成功,可以为单消息,也可以是链接,或者启动软件。

真心感受,MUI这个框架给我们省了太多太多的事!

继续阅读 »

5年前,一直是一个B/S软件开发者。近几年进入了政府机关,从事了不同行业,不再做开发,可一直都放不下曾经辛苦学来的技术。曾经想学Android开发,但由于平常工作忙,学习成本太高太复杂,望而却步。直至10天前发现Hbuider,被它的易用性所深深吸引!
10多天来,白天上班,晚上学习,终于克服诸多困难,成功做出了自己的第一个软件,把单位的网站app化,使用MUI框架+ajax技术+个推平台,没有想到Hbuider+MUI+HTML5这么强大,效果不亚于原生!
感谢提供如此方便的人们!

简单分享一下我的架构(因为是初学者,不一定优化,也不一定科学,仅供参考)

  1. 根页面( index):带侧滑菜单页,侧滑菜单设置有三个一级菜单。点击后,自定义函数修改index页的二级菜单,设置index的subpage为该一级菜单下的默认页template,同时关闭侧滑菜单页。
    index页:预读index-menu,预读显示详细内容的showContent页

  1. 列表模板页面(template):点击二级菜单,经ajax调取不同数据显示列表,点击列表,打开showContent页,传入参数,ajax调取详细内容显示。
  2. 详细内容显示( showContent):是一个带subpage的模板页,重写MUI.back,返回后恢复其subpage为一个空页面(否则点其他列表再次打开的瞬间还是上一次内容的缓存。)
  3. 绑定个推插件,测试推送成功,可以为单消息,也可以是链接,或者启动软件。

真心感受,MUI这个框架给我们省了太多太多的事!

收起阅读 »

【分享】调用已安装的市场评分和安装(更新)

很简单而已,前提是上架到那个市场了。
直接调用plus.runtime.openURL就行了

openMarket("你的app包名"); //用法  
function openMarket(packageName) {  
    plus.runtime.openURL("market://details?id="+packageName);  
}
继续阅读 »

很简单而已,前提是上架到那个市场了。
直接调用plus.runtime.openURL就行了

openMarket("你的app包名"); //用法  
function openMarket(packageName) {  
    plus.runtime.openURL("market://details?id="+packageName);  
}
收起阅读 »

关于下拉刷新的使用心得

下拉刷新

我的这个页面是一个数据列表 ,分为上部导航main.htm,和下面业务数据(list.html).有一个新增页面,在操作新增页面后,返回主模块,并刷新数据。在使用过程中,经常出现刚进模块时,下拉刷新可以。新增页面返回后,下拉刷新失效了。现象就是下拉没有反应。

研究了差不多一个下午,发现原来是被webview挡住了。

在主模块新增页面使用的代码是

  document.getElementById("add").addEventListener('tap',function(){  
    var nwaiting = plus.nativeUI.showWaiting();   
    var qdadd = plus.webview.create("add.html");   
    qdadd.addEventListener("loaded", function() {  
        nwaiting.close();  
        add.show();  
    }, false);  
});             

新增页面保存后,跳转主模块,原先的代码是

  mui.openWindow({  
    url: 'main.html',   
    id:'main'  
  });

但是这样的结果就是返回后,下拉不能滚动。经过我的多次测试,发现这个是webview的使用不当造成的。
新增页面现在的代码是

var parentview = plus.webview.currentWebview().opener();  
parentview.reload(true);  
plus.webview.currentWebview().close();

即关闭当前新增页在,刷新父页面。

如果plus.webview.currentWebview().close();这句话不写,我发现返回页面后,list.html距离导航会增加一定的距离,新增次数越多,距离越远,估记就是webview不断的重叠造成的。

具体原理不太清楚,起码问题解决了,供大家参考 。

继续阅读 »

我的这个页面是一个数据列表 ,分为上部导航main.htm,和下面业务数据(list.html).有一个新增页面,在操作新增页面后,返回主模块,并刷新数据。在使用过程中,经常出现刚进模块时,下拉刷新可以。新增页面返回后,下拉刷新失效了。现象就是下拉没有反应。

研究了差不多一个下午,发现原来是被webview挡住了。

在主模块新增页面使用的代码是

  document.getElementById("add").addEventListener('tap',function(){  
    var nwaiting = plus.nativeUI.showWaiting();   
    var qdadd = plus.webview.create("add.html");   
    qdadd.addEventListener("loaded", function() {  
        nwaiting.close();  
        add.show();  
    }, false);  
});             

新增页面保存后,跳转主模块,原先的代码是

  mui.openWindow({  
    url: 'main.html',   
    id:'main'  
  });

但是这样的结果就是返回后,下拉不能滚动。经过我的多次测试,发现这个是webview的使用不当造成的。
新增页面现在的代码是

var parentview = plus.webview.currentWebview().opener();  
parentview.reload(true);  
plus.webview.currentWebview().close();

即关闭当前新增页在,刷新父页面。

如果plus.webview.currentWebview().close();这句话不写,我发现返回页面后,list.html距离导航会增加一定的距离,新增次数越多,距离越远,估记就是webview不断的重叠造成的。

具体原理不太清楚,起码问题解决了,供大家参考 。

收起阅读 »

关于双view,子view动态获取数据的列表使用心得

我早上在问答里问了问题。详情见http://ask.dcloud.net.cn/question/2684?notification_id-11140rf-falseitem_id-4289__answer_id-4289__single-TRUE#!answer_4289。

晚上回来后原本是尝试大神回答的方案。但是正准备吃饭,便想偷点懒,先把效果做出来,于是改了下方案。
首先去掉main.html里的loading。
把loading加到list.html中
main.html继续使用subpage.
在list.html动态数据加载完之后。。去掉本页面的loading。
相比大神的方案,操作上简单了一些

我测试了下。。基本上效果和早上大神的方案相差无几。
不知道这种方法怎么样,反正分享出来,供大家参考吧。

继续阅读 »

我早上在问答里问了问题。详情见http://ask.dcloud.net.cn/question/2684?notification_id-11140rf-falseitem_id-4289__answer_id-4289__single-TRUE#!answer_4289。

晚上回来后原本是尝试大神回答的方案。但是正准备吃饭,便想偷点懒,先把效果做出来,于是改了下方案。
首先去掉main.html里的loading。
把loading加到list.html中
main.html继续使用subpage.
在list.html动态数据加载完之后。。去掉本页面的loading。
相比大神的方案,操作上简单了一些

我测试了下。。基本上效果和早上大神的方案相差无几。
不知道这种方法怎么样,反正分享出来,供大家参考吧。

收起阅读 »

如何安装JDT和ADT

JDT ADT 插件 HBuilder

说明

由于JDT(Eclipse Java Development Tools)比较大,大多数用户用不到,所以被我们裁掉了。如果需要安装JDT可按下面方式安装(ADT的安装依赖JDT,要安装ADT插件需要先安装JDT)

安装JDT

  1. 依次点击工具→插件安装→手动安装eclipse插件,点击“可用软件站点”如下图
  2. 勾选 indigo(注:勾选后,HBuilder启动时会检查indigo已安装的插件是否有升级,从而导致软件启动过慢或者启动后很长时间内比较卡,所以安装完jdt后请将此勾重新去掉)如下图
  3. 点击确定后,选择indigo的站点如下图,然后等待加载(此过程有点长,如有设置代理会加快加载速度)
  4. 加载完毕后,找到programming languages如下图
  5. 勾选programming languages下的Eclipse Java Development Tools如下图

    6.点击下一步,接受许可协议并安装,安装完毕后重启即可

    安装ADT

    1.下载ADT离线插件ADT-22.3.0

  6. 依次点击工具→插件安装→手动安装eclipse插件
  7. 点击添加,在弹出的界面中点击Archive选择步骤1中下载的zip包

    4.点击确定等待加载,加载完毕后,全部勾选如下图
  8. 点击下一步,接受许可协议,点击完成,安装完后重启即可
  9. 重启完毕后,ADT就要求选sdk了,选完SDK即可。如果此时不想设置,可以点击关闭,后续在工具→选项→Android中配置
继续阅读 »

说明

由于JDT(Eclipse Java Development Tools)比较大,大多数用户用不到,所以被我们裁掉了。如果需要安装JDT可按下面方式安装(ADT的安装依赖JDT,要安装ADT插件需要先安装JDT)

安装JDT

  1. 依次点击工具→插件安装→手动安装eclipse插件,点击“可用软件站点”如下图
  2. 勾选 indigo(注:勾选后,HBuilder启动时会检查indigo已安装的插件是否有升级,从而导致软件启动过慢或者启动后很长时间内比较卡,所以安装完jdt后请将此勾重新去掉)如下图
  3. 点击确定后,选择indigo的站点如下图,然后等待加载(此过程有点长,如有设置代理会加快加载速度)
  4. 加载完毕后,找到programming languages如下图
  5. 勾选programming languages下的Eclipse Java Development Tools如下图

    6.点击下一步,接受许可协议并安装,安装完毕后重启即可

    安装ADT

    1.下载ADT离线插件ADT-22.3.0

  6. 依次点击工具→插件安装→手动安装eclipse插件
  7. 点击添加,在弹出的界面中点击Archive选择步骤1中下载的zip包

    4.点击确定等待加载,加载完毕后,全部勾选如下图
  8. 点击下一步,接受许可协议,点击完成,安装完后重启即可
  9. 重启完毕后,ADT就要求选sdk了,选完SDK即可。如果此时不想设置,可以点击关闭,后续在工具→选项→Android中配置
收起阅读 »

如何安装PDT

PDT PHP

说明

PDT的安装需要连接国外网站,由于大中华防火墙的存在,可能你需要代理,否则最后可能由于某些依赖组件未能成功下载导致安装失败

安装步骤

  1. 依次点击工具→插件安装→eclipse插件市场
  2. 在搜索框内输入pdt按下回车如下图
  3. 选择上图中的PHP Development Tools中的Install
  4. 加载后会提示缺乏dltk组件如下图,此时点击上一步
  5. 在搜索框内输入dltk按下回车如下图
  6. 与步骤3类似,选择安装dltk
  7. 点击下一步后,HBuilder会查找依赖的组件,查找完毕后出现以下界面
  8. 选择同意后直接点击完成即可
  9. 安装完毕后按照提示重启HBuilder,就可以看到工具中多了PHP的选项以及文件可以使用PDT的Editor打开了
继续阅读 »

说明

PDT的安装需要连接国外网站,由于大中华防火墙的存在,可能你需要代理,否则最后可能由于某些依赖组件未能成功下载导致安装失败

安装步骤

  1. 依次点击工具→插件安装→eclipse插件市场
  2. 在搜索框内输入pdt按下回车如下图
  3. 选择上图中的PHP Development Tools中的Install
  4. 加载后会提示缺乏dltk组件如下图,此时点击上一步
  5. 在搜索框内输入dltk按下回车如下图
  6. 与步骤3类似,选择安装dltk
  7. 点击下一步后,HBuilder会查找依赖的组件,查找完毕后出现以下界面
  8. 选择同意后直接点击完成即可
  9. 安装完毕后按照提示重启HBuilder,就可以看到工具中多了PHP的选项以及文件可以使用PDT的Editor打开了
收起阅读 »

如何调试PHP

Debug PHP 断点

下载安装xdebug

  • http://xdebug.org/download.php 下载适合你的PHP版本的xdebug 
  • 复制到php安装目录的ext文件夹,改名为php_xdebug.dll  
  • 配置xdebug
      在php.ini尾部添加如下
      [xdebug]
      zend_extension="php_xdebug.dll"
      xdebug.remote_enable = On
      xdebug.remote_host = "localhost"
      xdebug.remote_port = 9000
      xdebug.remote_handler = "dbgp"
      xdebug.auto_trace = 1
      xdebug.collect_includes = 1
      xdebug.collect_params = 1
      xdebug.collect_return = 1
      xdebug.default_enable = 1
      xdebug.collect_assignments = 1
      xdebug.collect_vars = 1
      xdebug.remote_autostart = 1
      xdebug.remote_connect_back = 1
      xdebug.show_local_vars = 1
      xdebug.show_exception_trace = 0
      运行phpinfo();看有xdebug模块信息出来就是搞定了。

    配置HBuilder支持xdebug

    这里的配置很重要
      选择工具 → 选项→ HBuilder→编辑器→ PHP →Debug 双击 Xdebug,弹出对话框如下图


    Debug Port 设为跟php.ini中设置的一样(默认是9000)。
      Accept remote session(JIT) 选择localhost
      允许浏览器访问网站时zend studio自动打开文件开始调试。
      选项说明:
      off: 关闭浏览器访问时打开调试功能;
      localhost: 通过localhost访问网页的时候打开调试。
      any:只要访问服务器上的php都打开调试;
      prompt:访问服务器上的php时弹出询问是否要调试。
      一旦打开HBuilder允许xebug调试,所有访问php页面都会进入调试。如果你不喜欢这样,可以安装chrome xdebug helper 或 fire fox的easy xdebug参见http://www.weste.net/2013/2-24/89256.html
      

继续阅读 »

下载安装xdebug

  • http://xdebug.org/download.php 下载适合你的PHP版本的xdebug 
  • 复制到php安装目录的ext文件夹,改名为php_xdebug.dll  
  • 配置xdebug
      在php.ini尾部添加如下
      [xdebug]
      zend_extension="php_xdebug.dll"
      xdebug.remote_enable = On
      xdebug.remote_host = "localhost"
      xdebug.remote_port = 9000
      xdebug.remote_handler = "dbgp"
      xdebug.auto_trace = 1
      xdebug.collect_includes = 1
      xdebug.collect_params = 1
      xdebug.collect_return = 1
      xdebug.default_enable = 1
      xdebug.collect_assignments = 1
      xdebug.collect_vars = 1
      xdebug.remote_autostart = 1
      xdebug.remote_connect_back = 1
      xdebug.show_local_vars = 1
      xdebug.show_exception_trace = 0
      运行phpinfo();看有xdebug模块信息出来就是搞定了。

    配置HBuilder支持xdebug

    这里的配置很重要
      选择工具 → 选项→ HBuilder→编辑器→ PHP →Debug 双击 Xdebug,弹出对话框如下图


    Debug Port 设为跟php.ini中设置的一样(默认是9000)。
      Accept remote session(JIT) 选择localhost
      允许浏览器访问网站时zend studio自动打开文件开始调试。
      选项说明:
      off: 关闭浏览器访问时打开调试功能;
      localhost: 通过localhost访问网页的时候打开调试。
      any:只要访问服务器上的php都打开调试;
      prompt:访问服务器上的php时弹出询问是否要调试。
      一旦打开HBuilder允许xebug调试,所有访问php页面都会进入调试。如果你不喜欢这样,可以安装chrome xdebug helper 或 fire fox的easy xdebug参见http://www.weste.net/2013/2-24/89256.html
      

收起阅读 »

Safari调试iOS应用

Debug 调试 控制台 Safari iOS

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:

Safari调试iOS手机概述

对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说,从iOS5.0开始,也可以通过Safari的Web Inspector工具连接设备对应用进行调试。

调试效果如图所示:
iOS 调试效果图

我们有2种方式,一种是使用xcode iOS模拟器,一种是使用iPhone、iPad、iTouch等真实设备。
如果使用xcode模拟器,可以直接使用safari的控制台debug。
如果使用真机,由于iOS有签名校验机制,正式包不允许safari debug,所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤:

真机调试环境

准备环境

  • Mac OS 10.9以上系统。无论使用模拟器还是真机,由于safari只有mac版本,所以必须配备mac电脑。
  • xcode iOS模拟器
  • 如果使用真实手机debug,还需要:
  • 苹果开发者账号,申请苹果开发证书(Certificates)和描述文件(Provisoning Profiles)
  • iOS5.0以上设备(iPhone、iPad、iTouch均可)

申请开发证书和描述文件

参考iOS证书(.p12)和描述文件(.mobileprovision)申请

使用HBuilder App云端打包获取调试安装包

在HBuilder中选中要调试的应用,在菜单中选择“发行”->“App打包”,打开“App云端打包”界面:
iOS App云端打包
正确配置生成调试包的参数

  • AppID:苹果开发者中心申请的应用标识,必须与申请描述文件时选择的一致
  • 私钥证书:苹果开发者中心申请的Development证书,必须是p12格式证书
  • 私钥密码:导入苹果开发者证书的密码,在导出成p12证书时设置
  • pfofile文件:苹果开发者中心申请的描述文件

提交App云端打包成功后可获取ipa安装包:

使用iTunes或iTools工具安装ipa到设备

开启iOS设备的调试功能

打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”:

启动上一步安装的应用,并将设备连接到Mac电脑

模拟器调试环境

使用模拟器调测更为方便。

准备环境

  • Mac OS 10.9以上系统
  • XCode6.0以上程序

安装XCode程序

在Safari中打开XCode下载页面
可以选择通过App Store,按提示一步步安装:

或者可以下载Beta版本dmg文件,在Finder中双击dmg文件按提示一步步安装:

HBuilder中启动模拟器运行

HBuilder中选中要调试的应用,在Mac OS上安装好XCode后会自动检测支持的iOS模拟器。
在菜单中选择“运行”->"手机运行"->"iOS模拟器运行":

或者通过“真机运行”图标打开:

在列表中选择要运行的模拟器后,会自动启动iOS模拟器并运行要调试的应用:

使用Safari调试

打开“开发者”菜单

运行Safari,点击“Safari”菜单下面的“偏好设置(Preferences...)”,切换到“高级选项(Advanced)”:

勾选“在菜单栏显示"开发"菜单(Show Develop menu in menu bar)”,关闭偏好设置。
此时在Safari的工具栏出现“开发(Develop)”菜单:

真机设备连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现设备名称项,进入后显示设备上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

模拟器连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现“iOS Simulator”项,进入后显示模拟器上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

Web Inspector调试

打开Web Inspector界面后,即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作:
iOS 调试效果图
可通过以下方式切换“DOM树(DOM Tree)”和“源码(Source Code)”方式显示页面:

在“源码(Source Code)”模式可在页面左侧添加断点进行调试。

继续阅读 »

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:

Safari调试iOS手机概述

对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。
对于移动平台的开发者来说,从iOS5.0开始,也可以通过Safari的Web Inspector工具连接设备对应用进行调试。

调试效果如图所示:
iOS 调试效果图

我们有2种方式,一种是使用xcode iOS模拟器,一种是使用iPhone、iPad、iTouch等真实设备。
如果使用xcode模拟器,可以直接使用safari的控制台debug。
如果使用真机,由于iOS有签名校验机制,正式包不允许safari debug,所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤:

真机调试环境

准备环境

  • Mac OS 10.9以上系统。无论使用模拟器还是真机,由于safari只有mac版本,所以必须配备mac电脑。
  • xcode iOS模拟器
  • 如果使用真实手机debug,还需要:
  • 苹果开发者账号,申请苹果开发证书(Certificates)和描述文件(Provisoning Profiles)
  • iOS5.0以上设备(iPhone、iPad、iTouch均可)

申请开发证书和描述文件

参考iOS证书(.p12)和描述文件(.mobileprovision)申请

使用HBuilder App云端打包获取调试安装包

在HBuilder中选中要调试的应用,在菜单中选择“发行”->“App打包”,打开“App云端打包”界面:
iOS App云端打包
正确配置生成调试包的参数

  • AppID:苹果开发者中心申请的应用标识,必须与申请描述文件时选择的一致
  • 私钥证书:苹果开发者中心申请的Development证书,必须是p12格式证书
  • 私钥密码:导入苹果开发者证书的密码,在导出成p12证书时设置
  • pfofile文件:苹果开发者中心申请的描述文件

提交App云端打包成功后可获取ipa安装包:

使用iTunes或iTools工具安装ipa到设备

开启iOS设备的调试功能

打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”:

启动上一步安装的应用,并将设备连接到Mac电脑

模拟器调试环境

使用模拟器调测更为方便。

准备环境

  • Mac OS 10.9以上系统
  • XCode6.0以上程序

安装XCode程序

在Safari中打开XCode下载页面
可以选择通过App Store,按提示一步步安装:

或者可以下载Beta版本dmg文件,在Finder中双击dmg文件按提示一步步安装:

HBuilder中启动模拟器运行

HBuilder中选中要调试的应用,在Mac OS上安装好XCode后会自动检测支持的iOS模拟器。
在菜单中选择“运行”->"手机运行"->"iOS模拟器运行":

或者通过“真机运行”图标打开:

在列表中选择要运行的模拟器后,会自动启动iOS模拟器并运行要调试的应用:

使用Safari调试

打开“开发者”菜单

运行Safari,点击“Safari”菜单下面的“偏好设置(Preferences...)”,切换到“高级选项(Advanced)”:

勾选“在菜单栏显示"开发"菜单(Show Develop menu in menu bar)”,关闭偏好设置。
此时在Safari的工具栏出现“开发(Develop)”菜单:

真机设备连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现设备名称项,进入后显示设备上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

模拟器连接调试

如果是真机点击“开发(Develop)”弹出菜单会出现“iOS Simulator”项,进入后显示模拟器上所有打开的“HTML页面”列表:

点击“HTML页面”列表中的项即可打开Web Inspector调试界面

Web Inspector调试

打开Web Inspector界面后,即可调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式等操作:
iOS 调试效果图
可通过以下方式切换“DOM树(DOM Tree)”和“源码(Source Code)”方式显示页面:

在“源码(Source Code)”模式可在页面左侧添加断点进行调试。

收起阅读 »

【BUG】2015年1月15日发布Android平台HTML5+SDK

5 SDK

在HBuilder真机调试的时候正常,用2015年1月15日发布Android平台HTML5+SDK打包后,等待框不显示。
于是我用12月16的ui.jar替换,又能正常显示了,可能是1月15的ui.jar有bug,还是别的什么原因?特此反馈一下..

另外,希望Feature-Android.xls能完善些,好让我们选择需要的组件,特别是我这种有洁癖的。
原本打包出来3M,我精简掉不需要的jar和so后,700KB。。。
之所以不选择在线打包,这也是原因之一。

继续阅读 »

在HBuilder真机调试的时候正常,用2015年1月15日发布Android平台HTML5+SDK打包后,等待框不显示。
于是我用12月16的ui.jar替换,又能正常显示了,可能是1月15的ui.jar有bug,还是别的什么原因?特此反馈一下..

另外,希望Feature-Android.xls能完善些,好让我们选择需要的组件,特别是我这种有洁癖的。
原本打包出来3M,我精简掉不需要的jar和so后,700KB。。。
之所以不选择在线打包,这也是原因之一。

收起阅读 »

提升HTML5的性能体验系列之三 流畅下拉刷新和上拉翻页

体验 性能 下拉刷新

系列文章目录导航:

本文更新于2017-5-8

下拉刷新

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况)。
解决方案有如下2种。

1.原生circle下拉刷新
既然拉div卡,我们就不拉div,而是拉一个原生的圈圈下来。
在Android上,google官方提供了一个下拉刷新样式。5+引擎将其封装给js调用。如下图

在一个HTML页面中,title区域仍然是普通dom,不是双webview也不是原生头,在这个webview的style里指定下拉刷新的circle模式,配置起始位置高度,就可以在该webview拉到顶部后再次下拉时在指定位置出现一个旋转的箭头。
api见:http://html5plus.org/doc/zh_cn/webview.html里搜索circle。
示例代码参考Hello mui里pull to refresh(下拉刷新和上拉加载)中的单webview模式。
iOS上也可以使用circle方式。使用同样的代码,在iOS上也有同样的下拉刷新效果。

  1. 双webview上下拉开式下拉刷新
    官方推荐使用高性能的circle下拉刷新方式,但如果实在不能接受circle这种风格,需要上下拉开的下拉刷新,那么可以使用如下方案。
    拉div卡那就不拉div,改拉webview。webview的拉动是原生的,回弹效果也是原生的,体验与原生一致。
    此时需要双webview的父子页面,思路是在父页面写title,title下面10像素左右写一个文字“下拉可刷新”。
    然后append一个子webview,并在style里设置为可下拉。
    那么在把子webview往下拉时,会露出父页面的“下拉可刷新”字样,并且在拉到一定距离后会触发一个事件,js捕获到这个事件后可以更改“下拉可刷新”为“松开可刷新”。同样松开也会触发一个事件。
    这种模式,下拉漏出的内容是在父页面的HTML中写的,所以样式可以随便定制,实现个性化下拉刷新。

但目前上下拉开的下拉刷新,Android和iOS有实现差异。
上述模式为Android模式。在iOS上,不能在父页面title下面随便定制下拉露出内容的样式,而是需要在子webview的style里配置。
API同样是在http://html5plus.org/doc/zh_cn/webview.html,搜索WebviewRefreshStyles,style里选default模式。
因为是配置方式,iOS上这种模式的下拉刷新无法实现非常个性化的效果。
如果实在需要iOS上做个性化下拉刷新,也可以使用div方式,毕竟iOS上的div拉动性能还是没多大问题的。
为了方便开发者一套代码解决问题,mui框架对2种方案进行了统一封装,即Android上使用双webview自定义下拉刷新,iOS上使用了div下拉刷新。
参考:http://dev.dcloud.net.cn/mui/pulldown/

注意双webview模式增加了app的内存和渲染压力,官方首推的是单webview的circle模式的下拉刷新。

上拉翻页

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里,是依靠js监听滚动条位置来实现。这导致任意滚动列表时,都会造成这个监听事件触发,容易引发列表滑动卡顿。
HTML5Plus扩展了一个事件,是原生的下拉到底事件,在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件即可,提升了App的执行性能。
5+ API参考:http://www.html5plus.org/#specification#/specification/Events.html
MUI封装参考:http://dev.dcloud.net.cn/mui/pullup/

这些代码示例在Hello H5+和Hello mui中都有。

继续阅读 »

系列文章目录导航:

本文更新于2017-5-8

下拉刷新

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况)。
解决方案有如下2种。

1.原生circle下拉刷新
既然拉div卡,我们就不拉div,而是拉一个原生的圈圈下来。
在Android上,google官方提供了一个下拉刷新样式。5+引擎将其封装给js调用。如下图

在一个HTML页面中,title区域仍然是普通dom,不是双webview也不是原生头,在这个webview的style里指定下拉刷新的circle模式,配置起始位置高度,就可以在该webview拉到顶部后再次下拉时在指定位置出现一个旋转的箭头。
api见:http://html5plus.org/doc/zh_cn/webview.html里搜索circle。
示例代码参考Hello mui里pull to refresh(下拉刷新和上拉加载)中的单webview模式。
iOS上也可以使用circle方式。使用同样的代码,在iOS上也有同样的下拉刷新效果。

  1. 双webview上下拉开式下拉刷新
    官方推荐使用高性能的circle下拉刷新方式,但如果实在不能接受circle这种风格,需要上下拉开的下拉刷新,那么可以使用如下方案。
    拉div卡那就不拉div,改拉webview。webview的拉动是原生的,回弹效果也是原生的,体验与原生一致。
    此时需要双webview的父子页面,思路是在父页面写title,title下面10像素左右写一个文字“下拉可刷新”。
    然后append一个子webview,并在style里设置为可下拉。
    那么在把子webview往下拉时,会露出父页面的“下拉可刷新”字样,并且在拉到一定距离后会触发一个事件,js捕获到这个事件后可以更改“下拉可刷新”为“松开可刷新”。同样松开也会触发一个事件。
    这种模式,下拉漏出的内容是在父页面的HTML中写的,所以样式可以随便定制,实现个性化下拉刷新。

但目前上下拉开的下拉刷新,Android和iOS有实现差异。
上述模式为Android模式。在iOS上,不能在父页面title下面随便定制下拉露出内容的样式,而是需要在子webview的style里配置。
API同样是在http://html5plus.org/doc/zh_cn/webview.html,搜索WebviewRefreshStyles,style里选default模式。
因为是配置方式,iOS上这种模式的下拉刷新无法实现非常个性化的效果。
如果实在需要iOS上做个性化下拉刷新,也可以使用div方式,毕竟iOS上的div拉动性能还是没多大问题的。
为了方便开发者一套代码解决问题,mui框架对2种方案进行了统一封装,即Android上使用双webview自定义下拉刷新,iOS上使用了div下拉刷新。
参考:http://dev.dcloud.net.cn/mui/pulldown/

注意双webview模式增加了app的内存和渲染压力,官方首推的是单webview的circle模式的下拉刷新。

上拉翻页

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里,是依靠js监听滚动条位置来实现。这导致任意滚动列表时,都会造成这个监听事件触发,容易引发列表滑动卡顿。
HTML5Plus扩展了一个事件,是原生的下拉到底事件,在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件即可,提升了App的执行性能。
5+ API参考:http://www.html5plus.org/#specification#/specification/Events.html
MUI封装参考:http://dev.dcloud.net.cn/mui/pullup/

这些代码示例在Hello H5+和Hello mui中都有。

收起阅读 »

HBuilder如何支持微信App的JS SDK开发

微信JSSDK 微信app
  1. 新建web项目,选微信模板。创建好后的项目页面内容自带了微信JS SDK的初始化代码。

  1. 在js里敲wx,会出现微信JS SDK对象及大量代码块,由于微信JS SDK有不少匿名函数用法,代码比较多,这些整理好的代码块可以大幅提升开发效率。

  1. wx对象的框架语法库以sdocml的形式已经预置在HBuilder里,自动挂载在微信项目上。
    所有微信JS SDK的语法提示、参数都可以无死角提示,并且自带API说明。

如果新建项目不选微信模板,也可以通过以下2种方式做提示:

  1. 对项目点右键,引入框架语法,选微信JS SDK框架语法库。
  2. 引用微信JS-SDK的js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>,HBuilder会自动识别并加载微信的JS-SDK的框架语法库。

注意,由于微信并不支持HTML放在手机端离线运行,所以微信项目模板仍属于web项目分类。
移动App项目是指在手机端本地运行的App。

微信JS SDK的官方API手册说明地址: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

继续阅读 »
  1. 新建web项目,选微信模板。创建好后的项目页面内容自带了微信JS SDK的初始化代码。

  1. 在js里敲wx,会出现微信JS SDK对象及大量代码块,由于微信JS SDK有不少匿名函数用法,代码比较多,这些整理好的代码块可以大幅提升开发效率。

  1. wx对象的框架语法库以sdocml的形式已经预置在HBuilder里,自动挂载在微信项目上。
    所有微信JS SDK的语法提示、参数都可以无死角提示,并且自带API说明。

如果新建项目不选微信模板,也可以通过以下2种方式做提示:

  1. 对项目点右键,引入框架语法,选微信JS SDK框架语法库。
  2. 引用微信JS-SDK的js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>,HBuilder会自动识别并加载微信的JS-SDK的框架语法库。

注意,由于微信并不支持HTML放在手机端离线运行,所以微信项目模板仍属于web项目分类。
移动App项目是指在手机端本地运行的App。

微信JS SDK的官方API手册说明地址: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

收起阅读 »

MUI文档chm版

  关于mui官方提供的文档,个人感觉有点儿杂乱,很不利于开发。故鄙人专门花了一天时间,对官网提供的api进行了一下整理,编辑成chm格式。现发布在此,供广大的开发者免费学习使用。对于本文档,只可用于开发者学习使用,严禁以营利为目的的下载、传播等。  
  若在使用该文档过程中发现bug,可向zsf513@gmail.com发邮件进行反馈,大家一起来进行完善。  
继续阅读 »
  关于mui官方提供的文档,个人感觉有点儿杂乱,很不利于开发。故鄙人专门花了一天时间,对官网提供的api进行了一下整理,编辑成chm格式。现发布在此,供广大的开发者免费学习使用。对于本文档,只可用于开发者学习使用,严禁以营利为目的的下载、传播等。  
  若在使用该文档过程中发现bug,可向zsf513@gmail.com发邮件进行反馈,大家一起来进行完善。  
收起阅读 »