注册 登录
HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次，多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

如何判断Runtime是否支持5+ API

5+App开发

在Web开发过程中，我们经常需要兼容各种平台，实现同一HTML页面能在各种Web运行环境中正常运行。
根据5+ API规范定义，要求在UserAgent中必须添加支持5+ API描述信息，其格式如下：

Html5Plus/1.0

斜线前部分为固定字符“Html5Plus”，斜线后面为5+ API的版本号，目前版本为“1.0”。
为了与其它UserAgent信息进行区分，其前面添加空格进行分隔。

因此，我们可以通过以下方法判断当前运行环境是否支持5+ API：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Hello World</title>  
        <script type="text/javascript" charset="utf-8">  
    // 判断runtime是否支持5+ API  
    if(navigator.userAgent.indexOf("Html5Plus")<0){//不支持5+ API  
        checked("不支持5+ API");  
    }else{//支持5+ API  
        checked("支持5+ API");  
    }  
    // 输出检测结果  
    function checked(ret){  
        if(document.body){  
            document.getElementById("checked").innerText=ret;  
        }else{  
            document.addEventListener("DOMContentLoaded",function(){  
                    document.getElementById("checked").innerText=ret;  
            },false);  
        }  
    }  
        </script>  
    </head>  
    <body>  
            <h1>Runtime supports 5+ Plus?</h1>  
            <p id="checked">checking...</p>  
    </body>  
</html>
继续阅读 »

在Web开发过程中，我们经常需要兼容各种平台，实现同一HTML页面能在各种Web运行环境中正常运行。
根据5+ API规范定义，要求在UserAgent中必须添加支持5+ API描述信息，其格式如下：

Html5Plus/1.0

斜线前部分为固定字符“Html5Plus”，斜线后面为5+ API的版本号，目前版本为“1.0”。
为了与其它UserAgent信息进行区分，其前面添加空格进行分隔。

因此，我们可以通过以下方法判断当前运行环境是否支持5+ API：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Hello World</title>  
        <script type="text/javascript" charset="utf-8">  
    // 判断runtime是否支持5+ API  
    if(navigator.userAgent.indexOf("Html5Plus")<0){//不支持5+ API  
        checked("不支持5+ API");  
    }else{//支持5+ API  
        checked("支持5+ API");  
    }  
    // 输出检测结果  
    function checked(ret){  
        if(document.body){  
            document.getElementById("checked").innerText=ret;  
        }else{  
            document.addEventListener("DOMContentLoaded",function(){  
                    document.getElementById("checked").innerText=ret;  
            },false);  
        }  
    }  
        </script>  
    </head>  
    <body>  
            <h1>Runtime supports 5+ Plus?</h1>  
            <p id="checked">checking...</p>  
    </body>  
</html>
收起阅读 »
DCloud_App_Array 发表于 : 2014-07-22 12:50 评论 (4) 分享

HTML中如何安全调用5+ API （plus is not defined）

5+App开发

HBuilder App Runtime是基于Webview进行扩展，在HTML页面加载时需要需自动引用5+ API扩展代码库进行一些必要的初始化操作，当5+ API扩展代码库加载完成时会触发“pluseready”事件通知5+ API可以安全调用。
因此，为了保证扩展5+ API的有效调用，所有HTML页面都需要正确处理“plusready”事件，可以通过document.addEventListener来监听事件：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Hello World</title>  
        <script type="text/javascript" charset="utf-8">   
    // H5 plus事件处理  
    function plusReady(){  
        // 5+ API code  
        var ws = plus.webview.currentWebview();  
        // ......  
    }  
    //监听“plusready”事件  
    document.addEventListener("plusready",plusReady,false);  
        </script>   
    </head>   
    <body>   
        <h1>Example</h1>   
        <p>Hello World</p>   
    </body>   
</html>
继续阅读 »

HBuilder App Runtime是基于Webview进行扩展，在HTML页面加载时需要需自动引用5+ API扩展代码库进行一些必要的初始化操作，当5+ API扩展代码库加载完成时会触发“pluseready”事件通知5+ API可以安全调用。
因此，为了保证扩展5+ API的有效调用，所有HTML页面都需要正确处理“plusready”事件，可以通过document.addEventListener来监听事件：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Hello World</title>  
        <script type="text/javascript" charset="utf-8">   
    // H5 plus事件处理  
    function plusReady(){  
        // 5+ API code  
        var ws = plus.webview.currentWebview();  
        // ......  
    }  
    //监听“plusready”事件  
    document.addEventListener("plusready",plusReady,false);  
        </script>   
    </head>   
    <body>   
        <h1>Example</h1>   
        <p>Hello World</p>   
    </body>   
</html>
收起阅读 »
DCloud_App_Array 发表于 : 2014-07-22 12:29 评论 (14) 分享

地图插件配置

云端打包发布常见问题

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-maps

概述

HBuilderX集成了常用的原生地图控件，相对于Web地图（H5地图），使用原生地图控件有更流畅的操作速度，可以提升APP的用户体验。
目前支持百度地图、高德地图和谷歌地图，
如需使用其它地图控件可参考Uni原生插件开发扩展支持。

使用须知

最新版本HBuilderX中自带的真机运行基座默认内置高德地图，使用的是DCloud向高德LBS开放平台申请的配置参数。
如果使用开发者自己申请的配置参数生成请使用自定义基座真机运行。

注意：根据高德、百度最新的服务协议，需要获取高德商用授权

从年初开始，高德、百度、腾讯等地图服务商更新了服务协议、开始实施商业授权机制，要求除公益App外所有使用地图功能（包括原生地图SDK、定位SDK、H5地图等）都需要获取地图服务商的商用授权。重点强调一下，免费应用同样需要商用授权，除非你的应用是公益类App，其它类型App都需要商用授权。
高德地图参考：https://lbs.amap.com/upgrade
百度地图参考：https://lbsyun.baidu.com/cashier/auth
没有获取地图服务商的App可以会碰到地图或定位功能被停用或上架应用市场提示可能存在侵权的问题，因此建议向高德、百度等地图开放平台申请商用授权。

云端打包地图功能需要到第三方地图平台申请应用后获取相关配置参数：

  1. 高德LBS开放平台
  2. 百度LBS开放平台
  3. 谷歌开发者平台
    配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

高德LBS开放平台申请应用

登录 高德LBS开放平台，点击有上角的“控制台”按钮，在控制台界面左侧导航列表选择“应用管理”下的“我的应用”。

创建应用

如果已经创建应用可忽略此步骤
在“我的应用”页面，点击右侧“创建新应用”按钮，输入应用名称、选择应用类型，点击“创建”按钮创建应用。
创建应用

添加Android平台应用的KEY

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：
添加Android平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-android”
  • 服务平台
    选择“Android平台”
  • 发布版安全码SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，详情参考：https://ask.dcloud.net.cn/article/36522
    HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/68
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生产新Key，在应用下可获取：
获取Android平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_android”编辑框中

添加iOS平台应用的KEY

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：
添加iOS平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-ios”；
  • 服务平台
    选择“iOS平台”
  • 安全码Bundle ID
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新Key，在应用下可获取：
获取iOS平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_ios”编辑框中

百度LBS开放平台申请应用

登录 百度LBS开放平台，点击有上角的“控制台”按钮，在控制台看板界面左侧导航列表选择“我的应用”下的“创建应用”。

创建Android平台应用

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“Android SDK”：
创建Android平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-android”
  • 应用类型
    选择“Android SDK”
  • 启用服务
    至少勾选“Android地图SDK（含境内外底图）”、“Android定位SDK”，建议全部勾选
  • 发布版SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD，详情参考：https://ask.dcloud.net.cn/article/36522
    HBuilderX云端打包选择“老版本DCloud公用证书”时（HBuilderX 2.3.8之前的版本叫DCloud公共证书），SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/68
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：
获取Android平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“百度定位或地图”项下的“appkey_android”编辑框中

创建iOS平台应用

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“iOS SDK”：
创建iOS平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-ios”
  • 应用类型
    选择“iOS SDK”
  • 启用服务
    至少勾选“IOS地图SDK（含境内外底图）”，建议全部勾选
  • 安全码
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：
获取iOS平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App)SDK配置”页面的“百度定位或地图”项下的“appkey_ios”编辑框中

谷歌开发者平台申请

登录Google Maps Platform | Google Developers , 点击 开始使用。

此时如果没有结算账号，会提示创建GoogleCloud结算账号，后续的账单由此账号进行结算，填写对应的信息。

创建自己的项目。

创建完成后选择使用的选择项目使用的api并启用。

在侧边栏找到 凭据，填写应用信息，创建凭据。

复制api key 保存起来，留以后用。

打开HBuilderX，在模块配置中，勾选地图模块，填入api key。

HBuilderX中配置使用地图

从百度/高德/谷歌平台申请获取配置参数后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

配置使用地图模块

打开应用的manifest.json文件，在“App模块配置”项中勾选“Maps(地图，只能选一个)”：

配置地图参数AppKey

高德地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“高德地图”项，并输入从高德开放平台申请的参数：
HBuilderX中配置使用高德地图
配置参数

  • appkey_ios: 高德地图iOS平台应用的AppKey'；
  • appkey_android: 高德地图Android平台应用的AppKey。

百度地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“百度地图”项，并输入从百度开放平台申请的参数：
HBuilderX中配置使用百度地图
配置参数

  • appkey_ios: 百度地图iOS平台应用的AppKey；
  • appkey_android: 百度地图Android平台应用的AppKey。

谷歌地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“Google地图”项，并输入从谷歌开发者平台申请的参数：

注意
uni-app项目中nvue页面仅支持高德、谷歌地图，暂时还不支持百度地图。

配置完成后Ctrl+S保存提交App云端打包生效。

继续阅读 »

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-maps

概述

HBuilderX集成了常用的原生地图控件，相对于Web地图（H5地图），使用原生地图控件有更流畅的操作速度，可以提升APP的用户体验。
目前支持百度地图、高德地图和谷歌地图，
如需使用其它地图控件可参考Uni原生插件开发扩展支持。

使用须知

最新版本HBuilderX中自带的真机运行基座默认内置高德地图，使用的是DCloud向高德LBS开放平台申请的配置参数。
如果使用开发者自己申请的配置参数生成请使用自定义基座真机运行。

注意：根据高德、百度最新的服务协议，需要获取高德商用授权

从年初开始，高德、百度、腾讯等地图服务商更新了服务协议、开始实施商业授权机制，要求除公益App外所有使用地图功能（包括原生地图SDK、定位SDK、H5地图等）都需要获取地图服务商的商用授权。重点强调一下，免费应用同样需要商用授权，除非你的应用是公益类App，其它类型App都需要商用授权。
高德地图参考：https://lbs.amap.com/upgrade
百度地图参考：https://lbsyun.baidu.com/cashier/auth
没有获取地图服务商的App可以会碰到地图或定位功能被停用或上架应用市场提示可能存在侵权的问题，因此建议向高德、百度等地图开放平台申请商用授权。

云端打包地图功能需要到第三方地图平台申请应用后获取相关配置参数：

  1. 高德LBS开放平台
  2. 百度LBS开放平台
  3. 谷歌开发者平台
    配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

高德LBS开放平台申请应用

登录 高德LBS开放平台，点击有上角的“控制台”按钮，在控制台界面左侧导航列表选择“应用管理”下的“我的应用”。

创建应用

如果已经创建应用可忽略此步骤
在“我的应用”页面，点击右侧“创建新应用”按钮，输入应用名称、选择应用类型，点击“创建”按钮创建应用。
创建应用

添加Android平台应用的KEY

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：
添加Android平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-android”
  • 服务平台
    选择“Android平台”
  • 发布版安全码SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，详情参考：https://ask.dcloud.net.cn/article/36522
    HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/68
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生产新Key，在应用下可获取：
获取Android平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_android”编辑框中

添加iOS平台应用的KEY

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用项的右侧点击“+”按钮，添加Key：
添加iOS平台Key

  • Key名称
    根据规则而填入Key名称，如“uniapp-ios”；
  • 服务平台
    选择“iOS平台”
  • 安全码Bundle ID
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新Key，在应用下可获取：
获取iOS平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_ios”编辑框中

百度LBS开放平台申请应用

登录 百度LBS开放平台，点击有上角的“控制台”按钮，在控制台看板界面左侧导航列表选择“我的应用”下的“创建应用”。

创建Android平台应用

需要打包为Android平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“Android SDK”：
创建Android平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-android”
  • 应用类型
    选择“Android SDK”
  • 启用服务
    至少勾选“Android地图SDK（含境内外底图）”、“Android定位SDK”，建议全部勾选
  • 发布版SHA1
    应用打包时使用证书的指纹字符串（SHA1）
    HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
    HBuilderX云端打包选择“公共测试证书”时，SHA1值为：97:C8:41:01:B9:14:1C:13:0D:D7:5D:74:28:A2:92:25:18:C3:6D:CD，详情参考：https://ask.dcloud.net.cn/article/36522
    HBuilderX云端打包选择“老版本DCloud公用证书”时（HBuilderX 2.3.8之前的版本叫DCloud公共证书），SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/68
    注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
  • PackageName
    应用包名，在提交App云端打包时设置的Android包名，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的包名，否则可能无法显示地图或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：
获取Android平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“百度定位或地图”项下的“appkey_android”编辑框中

创建iOS平台应用

需要打包为iOS平台原生应用时操作，否则跳过此步骤
在创建应用界面选择“iOS SDK”：
创建iOS平台应用

  • 应用名称
    根据规则而填入应用名称，如“uniapp-ios”
  • 应用类型
    选择“iOS SDK”
  • 启用服务
    至少勾选“IOS地图SDK（含境内外底图）”，建议全部勾选
  • 安全码
    iOS平台应用包名Bundle ID（AppID），在提交App云端打包时设置的Bundle ID，如“uni.UNI4D6B11E”
    注意：必须填写实际打包使用的Bundle ID，否则可能无法显示图片或无法定位

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：
获取iOS平台Key
在HBuilderX中将此Key填入到manifest.json文件“（App)SDK配置”页面的“百度定位或地图”项下的“appkey_ios”编辑框中

谷歌开发者平台申请

登录Google Maps Platform | Google Developers , 点击 开始使用。

此时如果没有结算账号，会提示创建GoogleCloud结算账号，后续的账单由此账号进行结算，填写对应的信息。

创建自己的项目。

创建完成后选择使用的选择项目使用的api并启用。

在侧边栏找到 凭据，填写应用信息，创建凭据。

复制api key 保存起来，留以后用。

打开HBuilderX，在模块配置中，勾选地图模块，填入api key。

HBuilderX中配置使用地图

从百度/高德/谷歌平台申请获取配置参数后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

配置使用地图模块

打开应用的manifest.json文件，在“App模块配置”项中勾选“Maps(地图，只能选一个)”：

配置地图参数AppKey

高德地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“高德地图”项，并输入从高德开放平台申请的参数：
HBuilderX中配置使用高德地图
配置参数

  • appkey_ios: 高德地图iOS平台应用的AppKey'；
  • appkey_android: 高德地图Android平台应用的AppKey。

百度地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“百度地图”项，并输入从百度开放平台申请的参数：
HBuilderX中配置使用百度地图
配置参数

  • appkey_ios: 百度地图iOS平台应用的AppKey；
  • appkey_android: 百度地图Android平台应用的AppKey。

谷歌地图

在manifest.json文件“App模块配置”项的“Maps(地图，只能选一个)”下，勾选“Google地图”项，并输入从谷歌开发者平台申请的参数：

注意
uni-app项目中nvue页面仅支持高德、谷歌地图，暂时还不支持百度地图。

配置完成后Ctrl+S保存提交App云端打包生效。

收起阅读 »
DCloud_App_Array 发表于 : 2014-07-22 11:31 评论 (174) 分享

分享插件配置

云端打包发布常见问题

云端打包分享功能需要到第三方开发平台申请应用后获取相关配置参数，目前支持的分享平台包括：

  1. 新浪微博
  2. 微信
  3. QQ

在各分享平台申请应用获取配置参数后，HBuilder进行如下操作进行配置：

添加Permissions的Featrue项

点击manifest.json文件的“代码视图”，在permissions节点下添加Share节点：

Ctrl+S保存。

配置各分享通道的参数

  • 手动编辑manifest.json配置参数
    点击manifest.json文件的“代码视图”，在plus -> distribute -> plugins 节点下添加share节点，并配置各分享平台申请应用的参数：
  • 可视化界面配置参数
    点击manifest.json文件的“可视化视图”，在“插件设置”下的“分享插件”栏中选择要使用的分享平台并配置参数：
  1. 新浪微博分享
    appkey：新浪微博平台应用appkey
    appsecret：新浪微博平台应用appsecret
    redirect_uri：新浪微博平台应用分享回调地址
  2. 微信消息或朋友圈
    appid：微信开放平台申请应用的AppID值
    appsecret：微信开放平台申请应用的AppSecret值
  3. QQ分享
    appid：腾讯QQ开放平台申请应用的AppID值

配置完成后Ctrl+S保存，并提交云端打包即可使用分享功能。

详细教程请参考分享插件开发指南

继续阅读 »

云端打包分享功能需要到第三方开发平台申请应用后获取相关配置参数，目前支持的分享平台包括：

  1. 新浪微博
  2. 微信
  3. QQ

在各分享平台申请应用获取配置参数后，HBuilder进行如下操作进行配置：

添加Permissions的Featrue项

点击manifest.json文件的“代码视图”，在permissions节点下添加Share节点：

Ctrl+S保存。

配置各分享通道的参数

  • 手动编辑manifest.json配置参数
    点击manifest.json文件的“代码视图”，在plus -> distribute -> plugins 节点下添加share节点，并配置各分享平台申请应用的参数：
  • 可视化界面配置参数
    点击manifest.json文件的“可视化视图”，在“插件设置”下的“分享插件”栏中选择要使用的分享平台并配置参数：
  1. 新浪微博分享
    appkey：新浪微博平台应用appkey
    appsecret：新浪微博平台应用appsecret
    redirect_uri：新浪微博平台应用分享回调地址
  2. 微信消息或朋友圈
    appid：微信开放平台申请应用的AppID值
    appsecret：微信开放平台申请应用的AppSecret值
  3. QQ分享
    appid：腾讯QQ开放平台申请应用的AppID值

配置完成后Ctrl+S保存，并提交云端打包即可使用分享功能。

详细教程请参考分享插件开发指南

收起阅读 »
DCloud_App_Array 发表于 : 2014-07-22 11:21 评论 (23) 分享

提升HTML5的性能体验系列之二 列表流畅滑动

滚动 性能 列表流畅滑动

本系列文章是针对5+App的，与uni-app无关

系列文章目录导航：

App的顶部一般有titlebar，下面是list。
常见的一个需求是要在list滚动时，titlebar不动。
这个简单的需求，但在HTML世界里实现起来其实并不简单。因为普通的HTML方式做不到60fps的无掉帧平滑滚动。

在pc web上的做法是使用div的区域滚动，把list放到div里。
但div滚动条在Android4.4以下的手机上不可商用，如果dom复杂，不管多高端的Android手机，滚动效果也惨不忍睹。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部，当titlebar的右侧出现滚动条时，看起来非常怪异。
还有一个副作用是滚动太快时，titlebar的div会下来一下又弹上去。这是因为滚动时触发页面重绘，dom很复杂时重绘来不及，绝对定位的titlebar就会先下来后上去。

还有一种方法是使用自绘的滚动条，即不用浏览器的滚动条，自己画一个滚动条，iScroll等方案是采取这种思路。但模拟的始终是模拟的，和原生的滚动条效果还是差很多，在列表头和尾的拉动回弹的表现不佳，而且列表长了、内容复杂了，非常卡顿。

想要解决这个问题其实也不难，既然div的滚动条卡，而浏览器body的整体滚动条不卡，那就老老实实使用浏览器的body滚动。至于title区域的滚动条通顶和固定方案，使用原生title来解决。
HBuilder8.0起，支持了原生的titleNView，创建webview对象时，在style参数里配置titleNView就可以在Webview上加一个原生的title。

plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

HTML页面的滚动部分会自动在这个原生title下面。

titleNView的具体api见，功能还是比较丰富的：http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles。
titleNView属于Webview的style，自然也可以通过Webview的setstyle方法来修改titleNView的参数，比如用js动态修改titleNView上的文字，可以使用setstyle方法给titleNView重新配置参数即可。修改是增量的，不是全量重写。

提到原生封装的title，人们的直觉一般是自定义性差。
但其实不然，DCloud始终重视开发者的自定义性。
titleNView的父类是plus.nativeObj.view，这是一块原生画布，可以自由的在上面写字绘图、设编辑框，拥有良好的自定义性。
通过Webview的getTitleNView()方法，可以得到标题栏的NView对象，然后参考nview的api，自由定制界面。http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

当然90%的使用场景，在titleNView自带的封装参数里就能完成。个别情况下开发者才需要研究nview的api手绘界面。

配合nativeObj下面的原生imageslider，还可以实现沉浸式题图效果，题图开始通顶到状态栏上，在向下滚动后渐变消失，而title渐变出现，非常动感。
关于沉浸式，是另外的话题，此处不展开。有兴趣可参考http://ask.dcloud.net.cn/article/1150

使用titleNView还有一个好处，在新窗体动画时，不管内容页面渲染多么慢，原生title在动画期间一定是渲染好的，这样页面不会整屏白屏。

mui对这个效果进行了封装，使用mui.openWindowWithTitle即可打开一个带原生头的webview。
在Hello mui里nav bar中点“native title”，可看到效果和源码。

已过期历史：在HBuilder8.0以前，官方曾推荐过双Webview式title。
即把屏幕切分成2个webview，把titlebar的HTML装载到一个webview里，list页面是另一个webview，list页面直接使用浏览器的滚动条而不是div滚动条，这样也可以得到一个流畅的列表滑动体验。
在mui框架里，通过mui的init里的subpage，可以通过配置而不是编码的方式更加简单的开发这种双webview界面。
但在nview成熟后，官方已经废弃了双Webview模式。目前是不再主推双Webview，但开发者的老代码仍然可以兼容。

关于bounce回弹效果
HTML5+提供了原生的bounce回弹效果，默认是开启的。
但也可以关闭和进行参数设置，具体见http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewBounceStyle

如果你的App滚动不流畅，可能的原因：

  1. 有人仍然使用div滚动然后抱怨滚动不流畅，注意检查自己的代码，一定要用body滚动而不是div滚动。
    mui为了多端发布兼容和部分选择器项目滚动，是提供了div滚动的，尤其是在iOS上因为性能较高使用面更大，但这些都是可配置的，觉得不流畅时注意检查配置是不是变成div滚动了。
  2. 不管是mui提供的div滚动还是plus.webview的body滚动，都是可以设滚动加速度值的，可以根据自己的页面情况设置不同的加速度值。默认其实不用设置，但如果你设置了错误的值，请检查并修复。
  3. 你可能关闭了硬件加速。Android上如果不开启硬件加速，很难做到60fps的平滑滚动。具体参考Android硬件加速详解
  4. 可能是因为js监听了滚动。js监听滚动，并实时计算和修改dom，会导致卡顿。如果你需要做下拉到底自动翻下一页，那么只需要监听HTML5+提供的页面到底事件，而不是任意滚动事件都监听。具体参考提升HTML5的性能体验系列之三 流畅下拉刷新
继续阅读 »

本系列文章是针对5+App的，与uni-app无关

系列文章目录导航：

App的顶部一般有titlebar，下面是list。
常见的一个需求是要在list滚动时，titlebar不动。
这个简单的需求，但在HTML世界里实现起来其实并不简单。因为普通的HTML方式做不到60fps的无掉帧平滑滚动。

在pc web上的做法是使用div的区域滚动，把list放到div里。
但div滚动条在Android4.4以下的手机上不可商用，如果dom复杂，不管多高端的Android手机，滚动效果也惨不忍睹。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部，当titlebar的右侧出现滚动条时，看起来非常怪异。
还有一个副作用是滚动太快时，titlebar的div会下来一下又弹上去。这是因为滚动时触发页面重绘，dom很复杂时重绘来不及，绝对定位的titlebar就会先下来后上去。

还有一种方法是使用自绘的滚动条，即不用浏览器的滚动条，自己画一个滚动条，iScroll等方案是采取这种思路。但模拟的始终是模拟的，和原生的滚动条效果还是差很多，在列表头和尾的拉动回弹的表现不佳，而且列表长了、内容复杂了，非常卡顿。

想要解决这个问题其实也不难，既然div的滚动条卡，而浏览器body的整体滚动条不卡，那就老老实实使用浏览器的body滚动。至于title区域的滚动条通顶和固定方案，使用原生title来解决。
HBuilder8.0起，支持了原生的titleNView，创建webview对象时，在style参数里配置titleNView就可以在Webview上加一个原生的title。

plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

HTML页面的滚动部分会自动在这个原生title下面。

titleNView的具体api见，功能还是比较丰富的：http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles。
titleNView属于Webview的style，自然也可以通过Webview的setstyle方法来修改titleNView的参数，比如用js动态修改titleNView上的文字，可以使用setstyle方法给titleNView重新配置参数即可。修改是增量的，不是全量重写。

提到原生封装的title，人们的直觉一般是自定义性差。
但其实不然，DCloud始终重视开发者的自定义性。
titleNView的父类是plus.nativeObj.view，这是一块原生画布，可以自由的在上面写字绘图、设编辑框，拥有良好的自定义性。
通过Webview的getTitleNView()方法，可以得到标题栏的NView对象，然后参考nview的api，自由定制界面。http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

当然90%的使用场景，在titleNView自带的封装参数里就能完成。个别情况下开发者才需要研究nview的api手绘界面。

配合nativeObj下面的原生imageslider，还可以实现沉浸式题图效果，题图开始通顶到状态栏上，在向下滚动后渐变消失，而title渐变出现，非常动感。
关于沉浸式，是另外的话题，此处不展开。有兴趣可参考http://ask.dcloud.net.cn/article/1150

使用titleNView还有一个好处，在新窗体动画时，不管内容页面渲染多么慢，原生title在动画期间一定是渲染好的，这样页面不会整屏白屏。

mui对这个效果进行了封装，使用mui.openWindowWithTitle即可打开一个带原生头的webview。
在Hello mui里nav bar中点“native title”，可看到效果和源码。

已过期历史：在HBuilder8.0以前，官方曾推荐过双Webview式title。
即把屏幕切分成2个webview，把titlebar的HTML装载到一个webview里，list页面是另一个webview，list页面直接使用浏览器的滚动条而不是div滚动条，这样也可以得到一个流畅的列表滑动体验。
在mui框架里，通过mui的init里的subpage，可以通过配置而不是编码的方式更加简单的开发这种双webview界面。
但在nview成熟后，官方已经废弃了双Webview模式。目前是不再主推双Webview，但开发者的老代码仍然可以兼容。

关于bounce回弹效果
HTML5+提供了原生的bounce回弹效果，默认是开启的。
但也可以关闭和进行参数设置，具体见http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewBounceStyle

如果你的App滚动不流畅，可能的原因：

  1. 有人仍然使用div滚动然后抱怨滚动不流畅，注意检查自己的代码，一定要用body滚动而不是div滚动。
    mui为了多端发布兼容和部分选择器项目滚动，是提供了div滚动的，尤其是在iOS上因为性能较高使用面更大，但这些都是可配置的，觉得不流畅时注意检查配置是不是变成div滚动了。
  2. 不管是mui提供的div滚动还是plus.webview的body滚动，都是可以设滚动加速度值的，可以根据自己的页面情况设置不同的加速度值。默认其实不用设置，但如果你设置了错误的值，请检查并修复。
  3. 你可能关闭了硬件加速。Android上如果不开启硬件加速，很难做到60fps的平滑滚动。具体参考Android硬件加速详解
  4. 可能是因为js监听了滚动。js监听滚动，并实时计算和修改dom，会导致卡顿。如果你需要做下拉到底自动翻下一页，那么只需要监听HTML5+提供的页面到底事件，而不是任意滚动事件都监听。具体参考提升HTML5的性能体验系列之三 流畅下拉刷新
收起阅读 »
DCloud_heavensoft 发表于 : 2014-06-30 05:42 评论 (17) 分享

提升HTML5的性能体验系列之一 避免切页白屏

白屏 切换页面 性能 转场

本系列文章是针对5+App的，与uni-app无关。uni-app不存在切换白屏问题

提升HTML5的性能体验系列文章目录导航：

窗体切换白屏的现实问题

HTML5的性能比原生差很多，比如切页时白屏、列表滚动不流畅、下拉刷新和上拉翻页卡顿。
在低端Android手机上，很多原生App常用的功能和体验效果都很难使用HTML5技术模拟。
我们首先来看第一个问题，如何避免切页白屏。

浏览器的页面在切换时，由于其页面加载机制，在跳转到下一个页面时，先要请求联网、载入页面代码、构建dom、渲染，最后才显示出来。
在最终结果渲染完毕前，会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。
虽然使用SPA单页应用模型，即ajax+div切换也可以避免白屏，但把所有页面写在一个SPA页面里，简单几个页面还行。但页面多了手机上也跑不起来，初始化非常慢，首页必然白屏，而且工程大了代码那个乱。。。被坑过的人自然知道。

解决窗体切换白屏的方案

标准HTML5无法解决，我们就使用扩展的手段。
HTML5+是一套增强HTML5的规范，它可以用JS调用几十万原生API。
想要解决切页白屏这个问题，需要使用plus.webview类来做MPA多页应用（不是SPA单页应用）。
plus.webview类是对原生的webview对象的js化封装，使用js可以操作webview。
解决白屏的原理是：把每个页面当作一个webview，但用js来控制它就像控制div一样。动画时通过原生的view动画飘webview进来而不是通过css动画飘div进来
同时webview之间相互独立，不会出现SPA下不同页面js和css冲突的问题。

通过操作webview来避免切页白屏，有几种常见的做法：

1、动画先飘不会白屏的原生title进来

既然webview加载慢，转场动画会白屏。原生view加载快，不会白屏。那么能不能使用原生view呢，或者至少动画时先飘一个原生view的title进来，也不会整屏白屏。
HBuilder7.2起，提供了plus.nativeObj.View，也就是原生的view对象（以下简称nview），可以使用js向原生的view直接写字、绘图（注意是原生view不是webview）。
从HBuilder8.8起，优化了nview和Webview的关系，为Webview引入了titleNView和subNView，是从属于Webview的原生界面。titileNView也称ntitle，进一步对title的原生化做了简化了操作，在plus.webview的style里，可以配置titleNView，如下示例：

plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

这样创建webview时，会自带一个原生的title，文字、颜色、是否有返回箭头、分割线这些都可以设置，见http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles。还可以通过getTitleNView()方法得到一个nview对象，自由的向上面写字、绘图、处理点击响应。参考nview文档http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
如果只是简单修改，比如修改title文字，也可以通过重设TitleNView的style来实现：
plus.webview.currentWebview().setStyle({titleNView:{titleText:'new text'}})

在mui框架中，进一步简化封装了mui.openWindowWithTitle()方法，参考http://dev.dcloud.net.cn/mui/window/#openWindowWithTitle

上面title有了，中间空白处可以先转个plus.nativeUI.waiting的原生雪花或显示加载中，这样转场时就不会飘白屏了。
一般本地页面加载都很快，转场动画300毫秒结束时，页面也渲染出来了。

另外提供几个让HTML页面渲染快的方法

  • 页面渲染尽量不用js做，想要渲染快，就直接写HTML和css渲染，js渲染的界面显示更慢。
  • 少用padding、margin，尽量写简单的代码，让页面一次渲染到位，而不是反复触发重绘。
  • 减少图片尺寸，不要使用背景图（最常见的性能问题均来自于此）

理解了titleNView，我们再来看subnview。
同理，subnview也是原生渲染的view，它可用于更大面积的原生渲染。
在流应用里的唯品会中，商品详情界面的加载速度那么快，就是因为使用了subnview。参考视频http://v.qq.com/x/page/k05051mc143.html。
一般业务有titleNView就够了，追求极致体验的业务可以使用subnview。
所谓追求极致，就是要求在100毫秒渲染，动画期间就要完成联网和渲染。即使原生应用，大部分业务也是在动画完成后才渲染界面的。
使用subnview要在页面里大量通过js构造界面，不太直观。HBuilder8.3.3起，新增了wap2app项目，其中引入了nview模板，新建一个nview文件，可以使用类vue的方式开发，参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12757。后续会把nview模板引入到5+应用开发中。

延伸：既然有nview，那是不是可以使用nview做完整界面，废除webview？类似react native那样。
DCloud一直遵循的是HTML5+的规范和理念，即不推翻HTML，而是在HTML做的不好的地方强化补足。
即使在动画期间大量使用了subnview，但滚动后的完整的页面仍然应该是HTML的。
这样的解决方案即能满足用户体验要求，又能兼容好HTML5，是更好的解决方案。

早些年mui曾推荐使用过head和body分开载入的方案，此方案已废弃，由这里描述的原生title方案替代。

2、预加载html

既然HTML渲染慢，是否可以后台预加载，需要使用时直接动画进来？
当然是可以的。所谓预载，即后台预载新页面的HTML文件及资源，使用时直接调出这个已经创建好的webview。
尤其是从一个列表页面反复打开详情页面，仅仅是其中的数据不同，此时应该预载和复用详情Webview。
在Hello mui里有一个列表到详情的最佳实践示例，就是使用了这个思路，强烈建议大家在列表到详情时研究使用这个示例。文章参考http://ask.dcloud.net.cn/article/12575

只要服务器返回数据不拖后退，一样可以实现100毫秒渲染，动画期间完成联网和渲染。

预加载，由于不显示出来，并不会过多增加资源占用。（同时显示在屏幕上的webview不要超过3个，隐藏在后台的webview不要超过10个）
如果是list转到content，不同的item点击只是一个页面，完全可以使用预载。
但如果页面不同且较多，此时不建议预载太多Webview。后台预载太多webview需要耗很长，会抢cpu，此时用户如果在前台显示的Webview里操作比如滚动列表，会感觉到卡。

mui框架的窗体函数封装

mui框架为了简化窗体管理的工作，把一些常用的窗体模型做了简化封装。
但对于复杂的窗体切换，仍需开发者搞明白上面提到的窗体切换原理。
mui的init方法，通过参数封装了preload，这样就可以方便的预载webview。
mui的openWindow方法，封装了显示waiting，载入新页面，处理动画，关闭waiting等工作。
mui的openWindowWithTitle()方法，封装了原生title。
mui的back样式控制，自动封装了窗体的隐藏和关闭。
这些方法具体参考mui的js API。

启动后首页的白屏

首页是没有预加载的概念的。
首页的控制基本都在manifest里进行。
有2个与启动白屏有关的manifest设置。
1.launchwebview
在launchwebview里可以配置首页的titlenview，以及使用subnview制作tab。
这样顶部和底部实际上是由原生引擎渲染的，可以迅速显示。
参考文章：基于subnview模式的原生tab

  1. splashscreen
    启动封面的图片如何关闭是在manifest里配置的。
    默认是在首页的webview的loaded事件发生后关闭。但又提供了若干选项。
    不管你的首页是白屏了还是觉得进入太慢了，都可以控制。
    在工程下manifest.json里找到plus、splashscreen节点，这里有event选项，可以配置是在哪个事件时close splash，默认是loaded，也可以配成titileUpdate、rendering、rendered。
    默认配置loaded事件是偏保守的，避免有的开发者首页代码写的不高效，导致白屏。
    如果你的首页代码效率高、渲染快，则推荐配置成titileUpdate事件。

还有一种手动控制splash关闭的技巧，如果splashscreen节点下的autoclose设置为false，即手动，可以在首页代码里写js控制封面图片的消失时机。
此时在首页合适的位置，比如说联网结束或业务上的其他时间点，调用js关闭封面图片，plus.navigator.closeSplashscreen();
但不管什么方法，5+引擎的splash显示时间不会超过6秒，如果6秒内开发者仍不能做到首页渲染，那么用户会看到白屏。

关于如何优化启动速度，可以参考这篇文章http://ask.dcloud.net.cn/article/571

5+动画详解

这篇文章详细描述了5+提供的各种原生动画的特点及优化技巧，是必读文章http://ask.dcloud.net.cn/article/225

Android5的动画花屏、分块渲染解决方案

如果你遇到了相关问题，可以参考http://ask.dcloud.net.cn/article/12837

后记

不管使用哪种方法，都要注意一点，手机App的HTML页面必须本身性能足够高。
这是老生常谈的问题，但现实中还是大量App因为这个问题而导致性能体验出问题。
编写干净整洁、一次渲染的页面非常重要。
现在太多开发者在研究模式、框架，让页面渲染要经历二次、甚至四五次重绘才能完成。在短短几百毫秒的动画期间，这么干要不让页面卡、要不让渲染慢。
dom层级简单点，不要嵌套太多。
减少css二次渲染，就是少用复杂的选择器，少用padding、margin这些会二次修正页面的css。
如果追求极致的话，那jquery、zepto这些框架也不要使用，手机上都是webkit引擎，直接写document的api操作dom即没有兼容问题又没有效率问题。

2018年8月，DCloud推出了uni-app，这个产品自动优化了预载、原生组件，如果你无法把HTML5+的app优化的足够好，不如直接使用uni-app。无需优化天然达到微信小程序水准。

继续阅读 »

本系列文章是针对5+App的，与uni-app无关。uni-app不存在切换白屏问题

提升HTML5的性能体验系列文章目录导航：

窗体切换白屏的现实问题

HTML5的性能比原生差很多，比如切页时白屏、列表滚动不流畅、下拉刷新和上拉翻页卡顿。
在低端Android手机上，很多原生App常用的功能和体验效果都很难使用HTML5技术模拟。
我们首先来看第一个问题，如何避免切页白屏。

浏览器的页面在切换时，由于其页面加载机制，在跳转到下一个页面时，先要请求联网、载入页面代码、构建dom、渲染，最后才显示出来。
在最终结果渲染完毕前，会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。
虽然使用SPA单页应用模型，即ajax+div切换也可以避免白屏，但把所有页面写在一个SPA页面里，简单几个页面还行。但页面多了手机上也跑不起来，初始化非常慢，首页必然白屏，而且工程大了代码那个乱。。。被坑过的人自然知道。

解决窗体切换白屏的方案

标准HTML5无法解决，我们就使用扩展的手段。
HTML5+是一套增强HTML5的规范，它可以用JS调用几十万原生API。
想要解决切页白屏这个问题，需要使用plus.webview类来做MPA多页应用（不是SPA单页应用）。
plus.webview类是对原生的webview对象的js化封装，使用js可以操作webview。
解决白屏的原理是：把每个页面当作一个webview，但用js来控制它就像控制div一样。动画时通过原生的view动画飘webview进来而不是通过css动画飘div进来
同时webview之间相互独立，不会出现SPA下不同页面js和css冲突的问题。

通过操作webview来避免切页白屏，有几种常见的做法：

1、动画先飘不会白屏的原生title进来

既然webview加载慢，转场动画会白屏。原生view加载快，不会白屏。那么能不能使用原生view呢，或者至少动画时先飘一个原生view的title进来，也不会整屏白屏。
HBuilder7.2起，提供了plus.nativeObj.View，也就是原生的view对象（以下简称nview），可以使用js向原生的view直接写字、绘图（注意是原生view不是webview）。
从HBuilder8.8起，优化了nview和Webview的关系，为Webview引入了titleNView和subNView，是从属于Webview的原生界面。titileNView也称ntitle，进一步对title的原生化做了简化了操作，在plus.webview的style里，可以配置titleNView，如下示例：

plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

这样创建webview时，会自带一个原生的title，文字、颜色、是否有返回箭头、分割线这些都可以设置，见http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles。还可以通过getTitleNView()方法得到一个nview对象，自由的向上面写字、绘图、处理点击响应。参考nview文档http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
如果只是简单修改，比如修改title文字，也可以通过重设TitleNView的style来实现：
plus.webview.currentWebview().setStyle({titleNView:{titleText:'new text'}})

在mui框架中，进一步简化封装了mui.openWindowWithTitle()方法，参考http://dev.dcloud.net.cn/mui/window/#openWindowWithTitle

上面title有了，中间空白处可以先转个plus.nativeUI.waiting的原生雪花或显示加载中，这样转场时就不会飘白屏了。
一般本地页面加载都很快，转场动画300毫秒结束时，页面也渲染出来了。

另外提供几个让HTML页面渲染快的方法

  • 页面渲染尽量不用js做，想要渲染快，就直接写HTML和css渲染，js渲染的界面显示更慢。
  • 少用padding、margin，尽量写简单的代码，让页面一次渲染到位，而不是反复触发重绘。
  • 减少图片尺寸，不要使用背景图（最常见的性能问题均来自于此）

理解了titleNView，我们再来看subnview。
同理，subnview也是原生渲染的view，它可用于更大面积的原生渲染。
在流应用里的唯品会中，商品详情界面的加载速度那么快，就是因为使用了subnview。参考视频http://v.qq.com/x/page/k05051mc143.html。
一般业务有titleNView就够了，追求极致体验的业务可以使用subnview。
所谓追求极致，就是要求在100毫秒渲染，动画期间就要完成联网和渲染。即使原生应用，大部分业务也是在动画完成后才渲染界面的。
使用subnview要在页面里大量通过js构造界面，不太直观。HBuilder8.3.3起，新增了wap2app项目，其中引入了nview模板，新建一个nview文件，可以使用类vue的方式开发，参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12757。后续会把nview模板引入到5+应用开发中。

延伸：既然有nview，那是不是可以使用nview做完整界面，废除webview？类似react native那样。
DCloud一直遵循的是HTML5+的规范和理念，即不推翻HTML，而是在HTML做的不好的地方强化补足。
即使在动画期间大量使用了subnview，但滚动后的完整的页面仍然应该是HTML的。
这样的解决方案即能满足用户体验要求，又能兼容好HTML5，是更好的解决方案。

早些年mui曾推荐使用过head和body分开载入的方案，此方案已废弃，由这里描述的原生title方案替代。

2、预加载html

既然HTML渲染慢，是否可以后台预加载，需要使用时直接动画进来？
当然是可以的。所谓预载，即后台预载新页面的HTML文件及资源，使用时直接调出这个已经创建好的webview。
尤其是从一个列表页面反复打开详情页面，仅仅是其中的数据不同，此时应该预载和复用详情Webview。
在Hello mui里有一个列表到详情的最佳实践示例，就是使用了这个思路，强烈建议大家在列表到详情时研究使用这个示例。文章参考http://ask.dcloud.net.cn/article/12575

只要服务器返回数据不拖后退，一样可以实现100毫秒渲染，动画期间完成联网和渲染。

预加载，由于不显示出来，并不会过多增加资源占用。（同时显示在屏幕上的webview不要超过3个，隐藏在后台的webview不要超过10个）
如果是list转到content，不同的item点击只是一个页面，完全可以使用预载。
但如果页面不同且较多，此时不建议预载太多Webview。后台预载太多webview需要耗很长，会抢cpu，此时用户如果在前台显示的Webview里操作比如滚动列表，会感觉到卡。

mui框架的窗体函数封装

mui框架为了简化窗体管理的工作，把一些常用的窗体模型做了简化封装。
但对于复杂的窗体切换，仍需开发者搞明白上面提到的窗体切换原理。
mui的init方法，通过参数封装了preload，这样就可以方便的预载webview。
mui的openWindow方法，封装了显示waiting，载入新页面，处理动画，关闭waiting等工作。
mui的openWindowWithTitle()方法，封装了原生title。
mui的back样式控制，自动封装了窗体的隐藏和关闭。
这些方法具体参考mui的js API。

启动后首页的白屏

首页是没有预加载的概念的。
首页的控制基本都在manifest里进行。
有2个与启动白屏有关的manifest设置。
1.launchwebview
在launchwebview里可以配置首页的titlenview，以及使用subnview制作tab。
这样顶部和底部实际上是由原生引擎渲染的，可以迅速显示。
参考文章：基于subnview模式的原生tab

  1. splashscreen
    启动封面的图片如何关闭是在manifest里配置的。
    默认是在首页的webview的loaded事件发生后关闭。但又提供了若干选项。
    不管你的首页是白屏了还是觉得进入太慢了，都可以控制。
    在工程下manifest.json里找到plus、splashscreen节点，这里有event选项，可以配置是在哪个事件时close splash，默认是loaded，也可以配成titileUpdate、rendering、rendered。
    默认配置loaded事件是偏保守的，避免有的开发者首页代码写的不高效，导致白屏。
    如果你的首页代码效率高、渲染快，则推荐配置成titileUpdate事件。

还有一种手动控制splash关闭的技巧，如果splashscreen节点下的autoclose设置为false，即手动，可以在首页代码里写js控制封面图片的消失时机。
此时在首页合适的位置，比如说联网结束或业务上的其他时间点，调用js关闭封面图片，plus.navigator.closeSplashscreen();
但不管什么方法，5+引擎的splash显示时间不会超过6秒，如果6秒内开发者仍不能做到首页渲染，那么用户会看到白屏。

关于如何优化启动速度，可以参考这篇文章http://ask.dcloud.net.cn/article/571

5+动画详解

这篇文章详细描述了5+提供的各种原生动画的特点及优化技巧，是必读文章http://ask.dcloud.net.cn/article/225

Android5的动画花屏、分块渲染解决方案

如果你遇到了相关问题，可以参考http://ask.dcloud.net.cn/article/12837

后记

不管使用哪种方法，都要注意一点，手机App的HTML页面必须本身性能足够高。
这是老生常谈的问题，但现实中还是大量App因为这个问题而导致性能体验出问题。
编写干净整洁、一次渲染的页面非常重要。
现在太多开发者在研究模式、框架，让页面渲染要经历二次、甚至四五次重绘才能完成。在短短几百毫秒的动画期间，这么干要不让页面卡、要不让渲染慢。
dom层级简单点，不要嵌套太多。
减少css二次渲染，就是少用复杂的选择器，少用padding、margin这些会二次修正页面的css。
如果追求极致的话，那jquery、zepto这些框架也不要使用，手机上都是webkit引擎，直接写document的api操作dom即没有兼容问题又没有效率问题。

2018年8月，DCloud推出了uni-app，这个产品自动优化了预载、原生组件，如果你无法把HTML5+的app优化的足够好，不如直接使用uni-app。无需优化天然达到微信小程序水准。

收起阅读 »
DCloud_heavensoft 发表于 : 2014-06-30 05:21 评论 (58) 分享

为什么应用的输入框点不中，无法输入

input 输入框 Runtime

在CSS中设置
{{{
input {
-webkit-user-select: auto !important;
}
}}}

在CSS中设置
{{{
input {
-webkit-user-select: auto !important;
}
}}}

DCloud 发表于 : 2014-05-27 17:24 评论 (17) 分享

我怎么使用HBuilder编辑JSP、ASP或.vm文件中的HTML代码部分？

JSP ASP HBuilder

HBuilder有很多文件编辑器。
右键点击文件-打开方式，可以看到所有编辑器。
很多不常用的文件后缀名其实都可以通过HTML编辑器打开。

HBuilder有很多文件编辑器。
右键点击文件-打开方式，可以看到所有编辑器。
很多不常用的文件后缀名其实都可以通过HTML编辑器打开。

DCloud 发表于 : 2014-05-27 17:22 评论 (17) 分享

PHP怎么不高亮不提示？

语法高亮 HBuilder PHP

PHP的语法高亮需要安装PHP插件。
在工具-插件安装中，可以安装Aptana PHP插件。
如果确定安装了php插件，那么在工具-选项，搜索文件关联，在里面配置php文件和PHP Editor的关联。
也可以在项目管理器里对文件点右键，打开方式，里面选PHP Editor。

有时插件会因为网络问题安装失败，本地找不到PHP Editor，此时需要重新安装php插件。
如果遇到插件安装界面里显示php插件已安装，但打开方式仍然没有PHP Editor，请先卸载php插件，重启后重新安装。

继续阅读 »

PHP的语法高亮需要安装PHP插件。
在工具-插件安装中，可以安装Aptana PHP插件。
如果确定安装了php插件，那么在工具-选项，搜索文件关联，在里面配置php文件和PHP Editor的关联。
也可以在项目管理器里对文件点右键，打开方式，里面选PHP Editor。

有时插件会因为网络问题安装失败，本地找不到PHP Editor，此时需要重新安装php插件。
如果遇到插件安装界面里显示php插件已安装，但打开方式仍然没有PHP Editor，请先卸载php插件，重启后重新安装。

收起阅读 »
DCloud 发表于 : 2014-05-27 17:20 评论 (13) 分享

PHP怎么运行?外部web服务器如何配？

PHP HBuilder

HBuilder自带的web服务器只能解析html、js、css。
如果想解析php，需要自己安装php服务器，比如Apache。
安装好后，在HBuilder的工具-选项-web服务器中点新建外部web服务器，配置地址和参数，保存后重启HBuilder。
然后点运行或边改边看即可。

目前只有php支持外部web服务器，其他语言不能配外部web服务器。

继续阅读 »

HBuilder自带的web服务器只能解析html、js、css。
如果想解析php，需要自己安装php服务器，比如Apache。
安装好后，在HBuilder的工具-选项-web服务器中点新建外部web服务器，配置地址和参数，保存后重启HBuilder。
然后点运行或边改边看即可。

目前只有php支持外部web服务器，其他语言不能配外部web服务器。

收起阅读 »
深井冰_01 发表于 : 2014-05-27 17:02 评论 (8) 分享

你们会把这个工具做成 eclipse 的插件发布么？

HBuilder

无法变成eclipse插件。
HBuilder里面有4种编程语言，除了java，还有c、HTML、ruby。单纯的java满足不了我们的需求。
另外HBuilder的核心定位就是做最好的HTML5编辑器，而非最好的所有编辑器。
倒是如果大家愿意的话，可以给HBuilder装其他语言的插件。

继续阅读 »

无法变成eclipse插件。
HBuilder里面有4种编程语言，除了java，还有c、HTML、ruby。单纯的java满足不了我们的需求。
另外HBuilder的核心定位就是做最好的HTML5编辑器，而非最好的所有编辑器。
倒是如果大家愿意的话，可以给HBuilder装其他语言的插件。

收起阅读 »
深井冰_01 发表于 : 2014-05-27 17:02 评论 (0) 分享

HBuilder升级失败或长时间无响应？

HBuilder 升级

如果装过其他eclipse插件，其升级服务器可能连不上而导致报错。
此时在工具-插件安装-手动安装eclipse插件-可用软件站点，取消其他插件的升级地址。
重新点击帮助-检查新版本即可。

如果装过其他eclipse插件，其升级服务器可能连不上而导致报错。
此时在工具-插件安装-手动安装eclipse插件-可用软件站点，取消其他插件的升级地址。
重新点击帮助-检查新版本即可。

深井冰_01 发表于 : 2014-05-27 17:00 评论 (0) 分享
友情链接
优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

| | 违法违规信息举报