HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

快码制作指南

快码

快码是什么

快码是DCloud推出的App推广码,它能帮助开发商优化扫码推广的效率。是下一代线下推广的重要方式。
过往用户在非wifi下很少会扫码下载app,但如果有了流应用,就可以低流量消耗的秒装app。
只要扫一下码,就可以秒装秒开流应用。
参考http://www.dcloud.io/streamapp.html

另外快码一个码集成了多个推广信息,包括流应用、原生app地址、微信公众号、微博等信息,使用不同软件扫码可以得到不同结果。
比如使用360手机助手扫快码,直接秒装秒开流应用;
而使用微信扫快码,则有2个功能:关注微信公众号或下载App,下载App时又会根据设备支持情况秒装流应用或下载原生App;
如果使用微博扫快码,则可以访问关注微博。
如下图

视频演示:
http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_w0171ems73j.html

如何申请快码

快码申请前提

只有发布过流应用的App才可以申请快码

发布快码

下载并打开最新版HBuilder(6.9.0版本以上),选中一个App,点击菜单“发行”-“发布快码”,即可进入快码发布界面如下图

快码申请需要内容

字段 是否必选 说明
Appid 由HBuilder自动从manifest.json中获取
logo HBuilder默认以用户在manifest.json中配置的应用图标作为logo
分辨率 只影响快码大小,默认为200*200
微博账户 用于微博客户端扫码后关注微博或访问微博
微信二维码 用于微信客户端扫码后显示微信公众号二维码
Android原生App下载地址 用于扫码后显示应用下载地址
iOS原生App 下载地址 用于扫码后显示应用下载地址
Android原生App Schemes 通过扫码后若打开浏览器,如果本机已安装原生App,则通过Schema可直接打开本机已经安装的App
iOS原生App Schemes 通过扫码后若打开浏览器,如果本机已安装原生App,则通过Schema可直接打开本机已经安装的App

url Schemes

url Schemes是什么
url Schemes是用于从浏览器或其他应用中启动本应用一种特定网址。如在iOS上使用浏览器访问weixin://表示访问微信(或在后面加参数访问微信的某个具体功能)。
如何使用urlSchemes
参阅
iOS平台通过UrlSchemes与第三方应用相互调用
Android平台通过UrlSchemes与第三方应用相互调用

继续阅读 »

快码是什么

快码是DCloud推出的App推广码,它能帮助开发商优化扫码推广的效率。是下一代线下推广的重要方式。
过往用户在非wifi下很少会扫码下载app,但如果有了流应用,就可以低流量消耗的秒装app。
只要扫一下码,就可以秒装秒开流应用。
参考http://www.dcloud.io/streamapp.html

另外快码一个码集成了多个推广信息,包括流应用、原生app地址、微信公众号、微博等信息,使用不同软件扫码可以得到不同结果。
比如使用360手机助手扫快码,直接秒装秒开流应用;
而使用微信扫快码,则有2个功能:关注微信公众号或下载App,下载App时又会根据设备支持情况秒装流应用或下载原生App;
如果使用微博扫快码,则可以访问关注微博。
如下图

视频演示:
http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_w0171ems73j.html

如何申请快码

快码申请前提

只有发布过流应用的App才可以申请快码

发布快码

下载并打开最新版HBuilder(6.9.0版本以上),选中一个App,点击菜单“发行”-“发布快码”,即可进入快码发布界面如下图

快码申请需要内容

字段 是否必选 说明
Appid 由HBuilder自动从manifest.json中获取
logo HBuilder默认以用户在manifest.json中配置的应用图标作为logo
分辨率 只影响快码大小,默认为200*200
微博账户 用于微博客户端扫码后关注微博或访问微博
微信二维码 用于微信客户端扫码后显示微信公众号二维码
Android原生App下载地址 用于扫码后显示应用下载地址
iOS原生App 下载地址 用于扫码后显示应用下载地址
Android原生App Schemes 通过扫码后若打开浏览器,如果本机已安装原生App,则通过Schema可直接打开本机已经安装的App
iOS原生App Schemes 通过扫码后若打开浏览器,如果本机已安装原生App,则通过Schema可直接打开本机已经安装的App

url Schemes

url Schemes是什么
url Schemes是用于从浏览器或其他应用中启动本应用一种特定网址。如在iOS上使用浏览器访问weixin://表示访问微信(或在后面加参数访问微信的某个具体功能)。
如何使用urlSchemes
参阅
iOS平台通过UrlSchemes与第三方应用相互调用
Android平台通过UrlSchemes与第三方应用相互调用

收起阅读 »

发行包体积优化指南

体积优化 流应用 App打包

为什么要减小发行包体积

熟悉App推广的同学都知道,包体积大小对App推广效果有很大的影响。一般而言,App体积越小,同样的推广手段可以达到的效果就越好。
我们与部分开发商沟通后发现,他们的包里存在大量优化空间,优化后平均包体积减少了一半!
所以优化包体积是非常值得好好做的事情。
此外,如果你的包里优化好,使用云打包也能会快一倍。。。

减小发行包体积的方法。

HBuilder里的发行包包含原生安装包和流应用两种类型。
优化包体积的有效的方式包括:
去除无效文件、去除不使用的原生模块、压缩图片、压缩js和css、优化代码。

一、在manifest.json中去除不必要的模块与SDK

此调整仅影响打包的app,不影响流应用体积。
5+Runtime对App及其集成的SDK编译实现了模块化管理,只有选择了需要的模块或SDK,发行为原生安装包时才会将对应的代码编译到最终App中。因此优化原生安装包体积时,一定要确认manifest.json中不包含未使用的模块和SDK
检查manifest.json中是否包含未使用的模块
打开manifest.json可视化视图,选择模块权限配置,检查已选模块中是否存在未使用到的模块


检查manifest.json中是否包含未使用的SDK
打开manifest.json可视化视图,选择SDK配置,检查已选模块中是否存在未使用到的模块

二、压缩图片

未优化的图片体积往往惊人,不仅包大,并且占用很高的内存。
当然图片优化是一种平衡,不应影响视觉体验。
常规图片压缩方案很多,这里再强调下应用图标(icon)及启动界面(splash)的图片优化。
发行为原生安装包时,请尽量不要使用过于复杂的应用图标和启动界面,配置这些信息前,使用图片压缩工具对图片进行压缩。
在Android apk包里需要包含数张分辨率的splash图,会极大增大包体积,可以使用.9.png,一张图解决多个分辨率的适配。

三、使用压缩后的js文件和css文件

框架js、css等较大的js、css文件尽量在提交时使用压缩文件。如mui框架使用mui.min.js和mui.min.css。
在uni-app里,发布时js、css会自动压缩,无需考虑。

四、去除不需要的文件

如果App开发时间越长,里面的废文件越多。有的废文件是忘记删除了、有的是不确认哪里还用过,不敢删。
HBuilder提供了工具帮你优化,包括页面引用关系管理工具、废文件清理工具、UNpackage配置。(注意HBuilderX无此功能)
在HBuilder的manifest里有页面引用关系来描述从入口页面起,相关页面引用资源的关系。你可以通过如下方式生成页面引用关系
1.扫描代码生成页面引用关系
打开manifest.json可视化界面,选择页面引用关系选项卡。点击页面顶部"扫描代码"链接,HBuilder即从入口界面开始扫描和计算页面使用的资源。注意:由于js写法过于灵活,自动扫描结果并非100%准确,需开发者人工确认。如下图

  1. 使用Android设备(或模拟器)真机运行自动生成页面引用关系(推荐
    打开manifest.json可视化界面,选择页面引用关系选项卡。插入Android设备(或打开Android模拟器)后,点击页面引用关系顶部的"使用Android设备或模拟器真机运行(推荐)"链接,在弹出的菜单中选择一个设备进行真机联调,确保每个页面和功能均点到后,HBuilder即可获取最正确的页面引用关系
  2. 手动调整
    打开manifest.json可视化界面,选择页面引用关系选项卡。选择左侧相关文件,手动维护该页面使用资源及可打开下级页面
    如何使用页面引用关系减小包体积
    1.打开manifest.json可视化界面,选择页面引用关系选项卡。选择左侧一个文件后,在右侧的其他资源列表中,带“?”角标的文件即为检测到的未被使用的资源,请人工确认该结果是否正确。如下图
  3. 发行为原生安装包时,如果HBuilder检测到目前项目含有未被使用的资源,会提示用户是否在打包时不提交这些资源。如下图

    点击上图链接打开如下界面

    勾选相关文件,点击“加入unpackage清单”按钮后,打包时将不再提交这些资源。
    关于unpackage的详情说明,可以参考http://ask.dcloud.net.cn/article/480
    3.发行为流应用时,如果HBuilder检测到目前项目含有疑似废文件,会提示用户是否在打包时不提交这些资源。如下图

    后续操作同步骤2
    通常,为达到秒开和流畅的使用体验,流应用对包的体积和首页使用资源有严格要求。发行流应用界面将显示流应用包体积(提交测试后才可以计算出)和首页大小如下图

    请特别留意,发行为流应用时尽量控制包大小在1M以内,首页资源在150k以内。

五、不会打包的目录

工程下.开头的目录,比如svn、git目录,以及unpackage目录,是不会被打包的。可以把一些不打包的、暂时又不想删的文件挪到unpackage目录里。
也可以不挪目录,在manifest的源码视图里配置unpackage节点,参阅如何配置unpackage的文件

继续阅读 »

为什么要减小发行包体积

熟悉App推广的同学都知道,包体积大小对App推广效果有很大的影响。一般而言,App体积越小,同样的推广手段可以达到的效果就越好。
我们与部分开发商沟通后发现,他们的包里存在大量优化空间,优化后平均包体积减少了一半!
所以优化包体积是非常值得好好做的事情。
此外,如果你的包里优化好,使用云打包也能会快一倍。。。

减小发行包体积的方法。

HBuilder里的发行包包含原生安装包和流应用两种类型。
优化包体积的有效的方式包括:
去除无效文件、去除不使用的原生模块、压缩图片、压缩js和css、优化代码。

一、在manifest.json中去除不必要的模块与SDK

此调整仅影响打包的app,不影响流应用体积。
5+Runtime对App及其集成的SDK编译实现了模块化管理,只有选择了需要的模块或SDK,发行为原生安装包时才会将对应的代码编译到最终App中。因此优化原生安装包体积时,一定要确认manifest.json中不包含未使用的模块和SDK
检查manifest.json中是否包含未使用的模块
打开manifest.json可视化视图,选择模块权限配置,检查已选模块中是否存在未使用到的模块


检查manifest.json中是否包含未使用的SDK
打开manifest.json可视化视图,选择SDK配置,检查已选模块中是否存在未使用到的模块

二、压缩图片

未优化的图片体积往往惊人,不仅包大,并且占用很高的内存。
当然图片优化是一种平衡,不应影响视觉体验。
常规图片压缩方案很多,这里再强调下应用图标(icon)及启动界面(splash)的图片优化。
发行为原生安装包时,请尽量不要使用过于复杂的应用图标和启动界面,配置这些信息前,使用图片压缩工具对图片进行压缩。
在Android apk包里需要包含数张分辨率的splash图,会极大增大包体积,可以使用.9.png,一张图解决多个分辨率的适配。

三、使用压缩后的js文件和css文件

框架js、css等较大的js、css文件尽量在提交时使用压缩文件。如mui框架使用mui.min.js和mui.min.css。
在uni-app里,发布时js、css会自动压缩,无需考虑。

四、去除不需要的文件

如果App开发时间越长,里面的废文件越多。有的废文件是忘记删除了、有的是不确认哪里还用过,不敢删。
HBuilder提供了工具帮你优化,包括页面引用关系管理工具、废文件清理工具、UNpackage配置。(注意HBuilderX无此功能)
在HBuilder的manifest里有页面引用关系来描述从入口页面起,相关页面引用资源的关系。你可以通过如下方式生成页面引用关系
1.扫描代码生成页面引用关系
打开manifest.json可视化界面,选择页面引用关系选项卡。点击页面顶部"扫描代码"链接,HBuilder即从入口界面开始扫描和计算页面使用的资源。注意:由于js写法过于灵活,自动扫描结果并非100%准确,需开发者人工确认。如下图

  1. 使用Android设备(或模拟器)真机运行自动生成页面引用关系(推荐
    打开manifest.json可视化界面,选择页面引用关系选项卡。插入Android设备(或打开Android模拟器)后,点击页面引用关系顶部的"使用Android设备或模拟器真机运行(推荐)"链接,在弹出的菜单中选择一个设备进行真机联调,确保每个页面和功能均点到后,HBuilder即可获取最正确的页面引用关系
  2. 手动调整
    打开manifest.json可视化界面,选择页面引用关系选项卡。选择左侧相关文件,手动维护该页面使用资源及可打开下级页面
    如何使用页面引用关系减小包体积
    1.打开manifest.json可视化界面,选择页面引用关系选项卡。选择左侧一个文件后,在右侧的其他资源列表中,带“?”角标的文件即为检测到的未被使用的资源,请人工确认该结果是否正确。如下图
  3. 发行为原生安装包时,如果HBuilder检测到目前项目含有未被使用的资源,会提示用户是否在打包时不提交这些资源。如下图

    点击上图链接打开如下界面

    勾选相关文件,点击“加入unpackage清单”按钮后,打包时将不再提交这些资源。
    关于unpackage的详情说明,可以参考http://ask.dcloud.net.cn/article/480
    3.发行为流应用时,如果HBuilder检测到目前项目含有疑似废文件,会提示用户是否在打包时不提交这些资源。如下图

    后续操作同步骤2
    通常,为达到秒开和流畅的使用体验,流应用对包的体积和首页使用资源有严格要求。发行流应用界面将显示流应用包体积(提交测试后才可以计算出)和首页大小如下图

    请特别留意,发行为流应用时尽量控制包大小在1M以内,首页资源在150k以内。

五、不会打包的目录

工程下.开头的目录,比如svn、git目录,以及unpackage目录,是不会被打包的。可以把一些不打包的、暂时又不想删的文件挪到unpackage目录里。
也可以不挪目录,在manifest的源码视图里配置unpackage节点,参阅如何配置unpackage的文件

收起阅读 »

12月29日DCloud高级培训,快来报名吧!

培训 流应用

12月29日(下周二),DCloud高级培训沙龙,快来报名吧!我们在北京等你!

一、活动背景:
随着流应用大赛的举行,关于流应用的开发成了诸多开发者遇到的门槛,以及开发中遇到的疑难困扰着众多的开发者,为此,DCloud举办流应用高级优化培训沙龙,由DCloud专家为大家面对面解决种种难题和分享高级优化经验。

二、活动主办:
DCloud 清创空间孵化器 HTML5中国产业联盟

三、活动时间:
12月29日下午1点-7点

四、活动地点:
北京大钟寺华杰大厦B1层清创空间孵化器(人大人咖啡地下一层)

五、活动议程:
13:00-13:30 签到
13:30-14:00 App高级优化技巧(1)- Array
14:10-14:40 App高级优化技巧(2)- CHB
14:40-14:55 开发者提问15分钟
14:55-15:15 多端发布-CHB
15:15-15:20 开发者提问5分钟
15:20-15:40 流应用业务-Heavensoft
15:40-15:45 提问5分钟
15:45-16:05 流应用开发技巧-CHB
16:05-19:00 一对一答疑优化指导。
19:00 晚宴交流

报名地址http://www.hdb.com/party/546s-comm.html

活动不收费,场地可容纳100人,座位优先安排参加流应用大赛的开发者。

继续阅读 »

12月29日(下周二),DCloud高级培训沙龙,快来报名吧!我们在北京等你!

一、活动背景:
随着流应用大赛的举行,关于流应用的开发成了诸多开发者遇到的门槛,以及开发中遇到的疑难困扰着众多的开发者,为此,DCloud举办流应用高级优化培训沙龙,由DCloud专家为大家面对面解决种种难题和分享高级优化经验。

二、活动主办:
DCloud 清创空间孵化器 HTML5中国产业联盟

三、活动时间:
12月29日下午1点-7点

四、活动地点:
北京大钟寺华杰大厦B1层清创空间孵化器(人大人咖啡地下一层)

五、活动议程:
13:00-13:30 签到
13:30-14:00 App高级优化技巧(1)- Array
14:10-14:40 App高级优化技巧(2)- CHB
14:40-14:55 开发者提问15分钟
14:55-15:15 多端发布-CHB
15:15-15:20 开发者提问5分钟
15:20-15:40 流应用业务-Heavensoft
15:40-15:45 提问5分钟
15:45-16:05 流应用开发技巧-CHB
16:05-19:00 一对一答疑优化指导。
19:00 晚宴交流

报名地址http://www.hdb.com/party/546s-comm.html

活动不收费,场地可容纳100人,座位优先安排参加流应用大赛的开发者。

收起阅读 »

怎样使用native.js获取安卓应用中AnroidManifest.xml内的信息

Native.JS 友盟

比如使用了友盟的统计,想在app内获取渠道信息,并返回给后台,进行渠道设置。

比如使用了友盟的统计,想在app内获取渠道信息,并返回给后台,进行渠道设置。

安卓应用中获取AnroidManifest.xml内的信息

Native.JS

以下是用native.js实现的方法,示例代码仅获取ApplicationInfo节点的信息,其他节点,请自行反三;

获取安卓应用AnroidManifest.xml信息

原生代码

ApplicationInfo appInfo = context.getPackageManager().getApplicationInfo(context.getPackageName(),PackageManager.GET_META_DATA);  
String dataName=appInfo.metaData.getString("data_Name");

native.js封装好的方法。

function getAppMeta(data_Name){  
    var PackageManager=plus.android.importClass("android.content.pm.PackageManager");  
    var context = plus.android.runtimeMainActivity();  
    var appInfo = plus.android.invoke(plus.android.invoke(context, 'getPackageManager'), "getApplicationInfo", plus.android.invoke(context, 'getPackageName'), PackageManager.GET_META_DATA);  
    return plus.android.invoke(appInfo.plusGetAttribute('metaData'),'getString',data_Name.toString());  
}

使用示例:获取友盟渠道信息
getAppMeta('UMENG_CHANNEL');

继续阅读 »

以下是用native.js实现的方法,示例代码仅获取ApplicationInfo节点的信息,其他节点,请自行反三;

获取安卓应用AnroidManifest.xml信息

原生代码

ApplicationInfo appInfo = context.getPackageManager().getApplicationInfo(context.getPackageName(),PackageManager.GET_META_DATA);  
String dataName=appInfo.metaData.getString("data_Name");

native.js封装好的方法。

function getAppMeta(data_Name){  
    var PackageManager=plus.android.importClass("android.content.pm.PackageManager");  
    var context = plus.android.runtimeMainActivity();  
    var appInfo = plus.android.invoke(plus.android.invoke(context, 'getPackageManager'), "getApplicationInfo", plus.android.invoke(context, 'getPackageName'), PackageManager.GET_META_DATA);  
    return plus.android.invoke(appInfo.plusGetAttribute('metaData'),'getString',data_Name.toString());  
}

使用示例:获取友盟渠道信息
getAppMeta('UMENG_CHANNEL');

收起阅读 »

【分享】是时候为button按钮添加submit属性了

mui 技术分享

始终为button按钮添加type属性

若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

这是官方文档中的一段文字,来自 http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/122
之前一直没有去怀疑过,所以我们写的代码是这样的:

document.getElementById("J_submit").addEventListener('tap', login, false);  

document.querySelector("input").addEventListener('keydown', function(){  
    if(event.keyCode == 13){  
        // 收回弹出的软键盘  
        document.activeElement.blur();  

        login();  
    }  
}, false);  

function login(){  
    // 收回弹出的软键盘  
    document.activeElement.blur();  
   ...   
}

界面是这样的:

甚至官方造了一个 mui.enterfocus.js,来绑定input的enter事件。
可是,那并不十全十美,第三方输入法的软键盘,按return有时候是不起作用的,撒逼了吧:)

其实,你真的可以为type加submit,来改进那糟糕的用户体验,而且,代码更简单,是的!

<form action="">  
    <input type="text" name="username">  
    <button type="submit" class="mui-btn mui-btn-block">保 存</button>  
</form>
// 绑定form表单提交事件  
document.querySelector('form').addEventListener('submit', function(e){  
    e.preventDefault(); // 阻止默认事件  

    login();  
});

唯一要求是你需要把input和button放到action=""的form表单中。
然后,你就拥有一个Go的软键盘了,且在任意输入框中按回车均可响应。就像下面这样:


enjoy:)

你以为你只有Go?你错了,其实你也有了Search。

继续阅读 »

始终为button按钮添加type属性

若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

这是官方文档中的一段文字,来自 http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/122
之前一直没有去怀疑过,所以我们写的代码是这样的:

document.getElementById("J_submit").addEventListener('tap', login, false);  

document.querySelector("input").addEventListener('keydown', function(){  
    if(event.keyCode == 13){  
        // 收回弹出的软键盘  
        document.activeElement.blur();  

        login();  
    }  
}, false);  

function login(){  
    // 收回弹出的软键盘  
    document.activeElement.blur();  
   ...   
}

界面是这样的:

甚至官方造了一个 mui.enterfocus.js,来绑定input的enter事件。
可是,那并不十全十美,第三方输入法的软键盘,按return有时候是不起作用的,撒逼了吧:)

其实,你真的可以为type加submit,来改进那糟糕的用户体验,而且,代码更简单,是的!

<form action="">  
    <input type="text" name="username">  
    <button type="submit" class="mui-btn mui-btn-block">保 存</button>  
</form>
// 绑定form表单提交事件  
document.querySelector('form').addEventListener('submit', function(e){  
    e.preventDefault(); // 阻止默认事件  

    login();  
});

唯一要求是你需要把input和button放到action=""的form表单中。
然后,你就拥有一个Go的软键盘了,且在任意输入框中按回车均可响应。就像下面这样:


enjoy:)

你以为你只有Go?你错了,其实你也有了Search。

收起阅读 »

有关 plus.webview.close() 时画面会闪一下的问题,官方并没有回答,请入内避免重复踩坑

Webview

当使用 plus.webview.close() 关掉某个页面,就算那个页面在背景或是 hide()画面都会闪一下的问题,

跟手机硬件应该有关,已经有几个人提出这个问题多次,但是官方并没有任何正面回答

请不要踩坑,浪费时想方法
跟Q友小清新 测试的结果

lenovo a3000h 会闪
samsung note8 不会闪
asus zd551kl 不会闪

即然跟硬件相关,就应该不是官方的问题了...但有问题还是希望官方出面说明一下而不是不闻不问哦..
官方解决明确问题的速度是相当快的,这点请大家多给官方鼓励

请大家如果有其他手机测试,可以跟帖注明会不会闪

继续阅读 »

当使用 plus.webview.close() 关掉某个页面,就算那个页面在背景或是 hide()画面都会闪一下的问题,

跟手机硬件应该有关,已经有几个人提出这个问题多次,但是官方并没有任何正面回答

请不要踩坑,浪费时想方法
跟Q友小清新 测试的结果

lenovo a3000h 会闪
samsung note8 不会闪
asus zd551kl 不会闪

即然跟硬件相关,就应该不是官方的问题了...但有问题还是希望官方出面说明一下而不是不闻不问哦..
官方解决明确问题的速度是相当快的,这点请大家多给官方鼓励

请大家如果有其他手机测试,可以跟帖注明会不会闪

收起阅读 »

值更新问题,解决方法

mui.plusReady()执行一次,如何刷新传值:
一,利用事件处理,每次触法预加载一次,刷新数据;
二,在mui.openWindow()里设置 createNew:true,重新打开新窗口,将mui.plusReady()再执行一次;

mui.plusReady()执行一次,如何刷新传值:
一,利用事件处理,每次触法预加载一次,刷新数据;
二,在mui.openWindow()里设置 createNew:true,重新打开新窗口,将mui.plusReady()再执行一次;

调试方式介绍二 真机运行

真机联调 真机运行

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

真机运行是调试手机App的轻量级常用工具。
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。

以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。没有的话循环这套动作,非常低效。
有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。

由于iOS模拟器仅mac电脑上可以用,所以HBuilder的mac版才支持iOS模拟器。安装xcode就会自带iOS模拟器。
Android模拟器较多,如果要使用webkit remote debug功能,需要Google官方模拟器。但官方模拟器比较卡,很多人也在使用三方轻量级模拟器比如海马玩,但这类模拟器不能通过chrome的控制台调试。

真机运行并不是打包,不要所以不能改app的icon、splash启动图等。

如果真机运行无法连接,请参考这里http://ask.dcloud.net.cn/article/97

继续阅读 »

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

真机运行是调试手机App的轻量级常用工具。
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。

以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。没有的话循环这套动作,非常低效。
有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。

由于iOS模拟器仅mac电脑上可以用,所以HBuilder的mac版才支持iOS模拟器。安装xcode就会自带iOS模拟器。
Android模拟器较多,如果要使用webkit remote debug功能,需要Google官方模拟器。但官方模拟器比较卡,很多人也在使用三方轻量级模拟器比如海马玩,但这类模拟器不能通过chrome的控制台调试。

真机运行并不是打包,不要所以不能改app的icon、splash启动图等。

如果真机运行无法连接,请参考这里http://ask.dcloud.net.cn/article/97

收起阅读 »

调试方式介绍一 边改边看

模拟器 调试 边改边看

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

边改边看

边改边看是轻量级的界面调试工具,最方便最常用。
在HBuilder右上角切换开发模式,可以选边改边看方式,切换模式的快捷键是Ctrl+p。
进入边改边看后,左边显示代码,右边显示浏览器。
HBuilder的windows版,右边的浏览器是chrome;在mac版,右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35,ua是:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36

1. 左边写代码,保存后右边自动刷新

在左边写代码,保存时右边会自动刷新页面,非常方便调界面。
对于less、sass等预编译语言,在ctrl+s后自动输出css后,也会继续激活浏览器的刷新。
HBuilder对markdown的支持也很好,本身编辑器就有高亮和着色功能,同时边改边看里也可以预览HTML效果。

2. 代码和浏览器元素互跳转

windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键,选“高亮浏览器内对应元素”,就会看到右侧浏览器里指定的元素高亮了。

反之,对浏览器某个元素点右键,也会有“查找文档中对应元素”的选项,点击后会跳转到相应代码段落。

3. 控制台

边改边看有2个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志。
控制台显示了代码行号,点击后可直接转到该行代码。

另一个控制台,是chrome控制台。
在HBuilder windows版的边改边看里点右键,可以选择启动chrome控制台。
(mac版HBuilder的边改边看是Safari浏览器,暂时调不出控制台)

chrome控制台的功能非常多,检查css覆盖、调试js、查看网页加载性能...这里不详细介绍,请自行谷百。
但有一个功能要强调下,就是手机设置。
在控制台里选Emulation的device,可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页,需要使用touch功能,就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。
不过要注意,虽然这里的浏览器控制台可以选手机,但只是模拟手机浏览器,plus扩展的原生api是无法调用和调试的。

php等服务器语言也支持边改边看,在设置里搜索web服务器,添加外部web服务器,配好地址也可以边改边看。
至于php本身语言的调试,可以通过php插件做来,本文不详述。

继续阅读 »

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

边改边看

边改边看是轻量级的界面调试工具,最方便最常用。
在HBuilder右上角切换开发模式,可以选边改边看方式,切换模式的快捷键是Ctrl+p。
进入边改边看后,左边显示代码,右边显示浏览器。
HBuilder的windows版,右边的浏览器是chrome;在mac版,右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35,ua是:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36

1. 左边写代码,保存后右边自动刷新

在左边写代码,保存时右边会自动刷新页面,非常方便调界面。
对于less、sass等预编译语言,在ctrl+s后自动输出css后,也会继续激活浏览器的刷新。
HBuilder对markdown的支持也很好,本身编辑器就有高亮和着色功能,同时边改边看里也可以预览HTML效果。

2. 代码和浏览器元素互跳转

windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键,选“高亮浏览器内对应元素”,就会看到右侧浏览器里指定的元素高亮了。

反之,对浏览器某个元素点右键,也会有“查找文档中对应元素”的选项,点击后会跳转到相应代码段落。

3. 控制台

边改边看有2个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志。
控制台显示了代码行号,点击后可直接转到该行代码。

另一个控制台,是chrome控制台。
在HBuilder windows版的边改边看里点右键,可以选择启动chrome控制台。
(mac版HBuilder的边改边看是Safari浏览器,暂时调不出控制台)

chrome控制台的功能非常多,检查css覆盖、调试js、查看网页加载性能...这里不详细介绍,请自行谷百。
但有一个功能要强调下,就是手机设置。
在控制台里选Emulation的device,可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页,需要使用touch功能,就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。
不过要注意,虽然这里的浏览器控制台可以选手机,但只是模拟手机浏览器,plus扩展的原生api是无法调用和调试的。

php等服务器语言也支持边改边看,在设置里搜索web服务器,添加外部web服务器,配好地址也可以边改边看。
至于php本身语言的调试,可以通过php插件做来,本文不详述。

收起阅读 »

http://www.shouce.ren/api/index

http://www.shouce.ren/api/index

http://www.shouce.ren/api/index

如何自定义不打包的文件,unpackage配置

unpackage 云端打包 HBuilder

方法1:
HBuilder的工程目录下有一个灰色的unpackage目录,把文件放在那里,打包和真机运行都不会同步那个目录。
比如"参考"、"备用"之类的目录都放到那里去。

方法2:
HBuilder 6.8.2.201512111923起支持在manifest里配置不打包。除了unpackage目录,还可以自定义其他目录和文件。
1.打开manifest代码视图
2.根节点下增加"unpackage"节点,该节点的值为一个数组,开发者可自主在该数组中添加打包时要排除的文件(带相对项目根目录的路径)
例:

"unpackage":[  
        "js",  
        "forder/test.html"  
]

项目下相对根目录的js目录和forder目录下的test.html在打包时将会被过滤

2个方法可以并用。

继续阅读 »

方法1:
HBuilder的工程目录下有一个灰色的unpackage目录,把文件放在那里,打包和真机运行都不会同步那个目录。
比如"参考"、"备用"之类的目录都放到那里去。

方法2:
HBuilder 6.8.2.201512111923起支持在manifest里配置不打包。除了unpackage目录,还可以自定义其他目录和文件。
1.打开manifest代码视图
2.根节点下增加"unpackage"节点,该节点的值为一个数组,开发者可自主在该数组中添加打包时要排除的文件(带相对项目根目录的路径)
例:

"unpackage":[  
        "js",  
        "forder/test.html"  
]

项目下相对根目录的js目录和forder目录下的test.html在打包时将会被过滤

2个方法可以并用。

收起阅读 »