ctrl+c或x：
如果选中了文字，则复制剪切文字；如果没有选中文字，则复制剪切当前行。

重复插入行或选区的快捷键是ctrl+shift+r：
如果选中文字，则重复插入相同选区的文字；如果没有选中文字，则在下一行插入相同内容的一行。

ctrl+alt+上下在win8以后的系统上被os拦截了，在HBuilder里敲此快捷键会激活windows的屏幕旋转。

导入工程提示“Unable to resolve target 'android-14'”错误

这是因为Android开发环境中没有安装Android4.0（API 14）SDK，可以右键工程“Properties”，在工程配置页面选择Android栏中选择已安装的SDK进行编译：

AndroidManifest.xml文件提示错误

模板应用考虑到对低版本的兼容性，目前设置minSdkVersion值为8（即支持Android2.2），而其他库用到的部分特性在此版本不支持，所以提示错误，解决方法：

1. 如果应用不考虑支持低版本，将minSdkVersion的值改成14（Android4.0），或者其它版本；
2. 忽略操作，在工程上右键 -> “Android Tools” -> “Clear Lint Markers”。

应用启动后一直停留在启动界面

• 确认assets -> apps目录下应用目录名称是否与manifest.json中的id是否一致：
  

  

• 确认assets -> apps 目录下应用目录名称是否与asset -> data下control.xml文件中的appid是否一致：
  

  

编译是提示Multiple dex files define错误

在编译的过程中提示以下错误：

Unable to execute dex: Multiple dex files define Lio/dcloud/feature/aps/APSBootImpl; [2014-11-22 02:53:30 - HBuilder-Hello] Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define Lio/dcloud/feature/aps/APSBootImpl;

这是因为同时引用个推和MKey推送平台，这两个推送平台只能选择一个。
使用个推推送平台，请在工程的libs目录下删除以下jar包：
aps-dhPush.jar、MKeyPush.jar

使用MKey推送平台，请在工程的libs目录下删除以下jar包：
aps-igexin.jar、GetuiExt-.jar、GetuiSdk.jar

MKey推送平台是数字天堂面向企业用户的私有推送平台

应用启动时白屏

必须保持Androidmanifest.xml下的manifest节点中的package属性与build.gradle中的applicationId一致！

新版离线sdk文档已发布，离线打包请参考最新文档

<!--

eclipse集成方式已过期，请改用Android studio方式集成，具体请参考文档：

AndroidStudio打包请参考Android平台使用AndroidStudio离线打包说明

=========================以下为过期的eclipse集成文档=========================

预备环境

• Android开发环境，推荐使用ADT开发工具；
  并要求安装Android4.0（API 14）SDK。

• 下载HBuilder离线打包Android版SDK（5+ SDK下载）。

离线打包SDK目录说明

• HBuilder-Hello：eclipse环境离线打包演示应用；
• HBuilder-Integrate：eclipse环境离线打包带扩展插件演示应用；
• HBuilder-Integrate-AS：Android Studio环境离线打包带扩展插件演示应用；
• libs：SDK库文件目录；
• Feature列表.xls：Android平台各扩展Feature API对应的permission；
• Readme.txt：版本说明文件。

配置编译工程

• 导入演示应用HBuilder-Hello工程

启动带ADT的eclipse程序，菜单中选择“File”-> “Import”，打开Import对话框，选中Android下的“Existing Android Code Inot Workspace”：

点击“Browse...”选择模板应用的目录，并选中“Copy project into workspac”将应用导入到Workspace中：

演示工程中已经配置好HelloH5应用相关资源，完成导入后，可Ctrl+F11直接编译运行：

• 从SDK目录中拷贝要使用的feature库到工程libs目录

参考“Feature列表.xls”文档确定应用中使用到的扩展API，拷贝libs目录中对应的jar/so文件到应用工程的libs目录下。如使用分享功能（新浪微博分享、腾讯微博分享，微信分享），则需要拷贝以下文件：

拷贝完成后在工程中F5刷新可在工程的libs目录下显示：

注意：如果不需要使用到HTML5Plus API，则仅需要pdr.jar包即可。

• 配置应用的权限

参考“Feature列表.xls”文档确定应用中使用到的扩展API，在AndroidManifest.json文件中删除不用到API的权限。如不使用音频（plus.audio.*）相关5+ API，则可删除Audio相关的权限：

• 配置其它第三方库的数据

由于第三方库需要使用一些特定的数据，所以在使用时需要将相关参数配置到AndroidManifest.json文件中。如使用分享功能，则需要配置各分享平台的申请应用的相关参数：

如果不使用此类API，则可将此数据删除。

• 配置应用的包名及版本号

打开AndroidManifest.xml文件，在代码视图中修改根节点的package属性值，如下：

其中package为应用的包名，采用反向域名格式，为应用的标识；versionCode为应用的版本号（整数值），用于各应用市场的升级判断，建议与manifest.json中version -> code值一致；versionName为应用的版本名称（字符串），在系统应用管理程序中显示的版本号，建议与manifest.json中version -> name值一致。

注意：因为其它第三方的SDK也使用到包名相关资源配置，所以需要在AndroidManifest.xml将所有“io.dcloud.HBuilder.Hello”替换成要修改成的包名。

• 配置应用名称

打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称：

• 配置应用图标和启动界面

将应用的图标（文件名为icon.png）和启动图片按照对应的尺寸拷贝到工程的res -> drawable-XXX目录下：

• 更新应用资源

打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id字段值，uni-app项目为manifest.json中的appid字段值（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中：

• 配置应用信息

打开assets -> data下的dcloud_control.xml文件，修改appid值：

其中appid值为HBuilder应用的appid，必须与应用manifest.json中的id值完全一致；appver为应用的版本号，用于应用资源的升级，必须保持与manifest.json中的version -> name值完全一致；version值为应用基座版本号（plus.runtime.innerVersion返回的值），不要随意修改。

配置完成编译运行

应用配置完毕，按Ctrl+F11编译运行应用：

选择“Android Application”启动应用，在弹出的设备列表对话框中选择要运行的设备：

点击OK后启动应用：

编译运行后在bin目录下会生成apk，此apk不能提交到应用市场
如果要生成提交到应用市场的正式apk请搜索“android导出apk”

5+SDK广告配置
如果需要关闭广告可在应用的manifest.json文件中增加如下配置

    "plus": {  
        "ads": {  
            "push":"false",       
            "splash":"false",     
            "rp":"false",          
            "spot":"false",       
        }  
    }

说明可参考文档 Manifest.json文档说明 manifest配置ads部分

编译过程中碰到问题可参考Android离线打包常见问题

iOS平台请参考iOS离线打包

AndroidStudio打包请参考Android平台使用AndroidStudio离线打包说明
-->

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

概述

5+引擎集成了分享功能，现在已经集成了“微信”、“QQ”、“新浪微博”分享SDK及OS自带的系统分享功能，用户可通过API调用接口分享消息到指定的分享平台。
用户在使用分享API时需要对应用进行配置，具体配置方法请参考“应用使用分享插件方法”。

注：调用系统分享无需向分享平台厂商申请appkey和配置SDK。

相关代码示例均在Hello H5+示例里的share.html里或hello uni-app的接口-分享里。

配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

申请开通支付

使用分享功能前，首先需要向各分享平台申请开通分享能力。
在申请分享平台的appid/appkey等配置参数时应当注意，在填写iOS和Android包名时，一定要和App云端打包使用的包名一致，否则会导致分享失败。

新浪微博appkey申请步骤

微信appkey申请方法

HBuilderX中配置使用分享功能

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

配置使用分享模块
打开项目的manifest.json文件，在“App模块配置”项中勾选“Share(分享)”：

勾选后会显示支持的分享模块，可根据应用需要进行选择配置

微信分享

在manifest.json文件“App模块配置”项的“Share(分享)”下，勾选“微信分享”项，并输入从微信开放平台申请的参数：

• appid：
  微信开放平台申请应用的AppID值
• UniversalLinks：
  iOS平台通用链接，必须与微信开放平台配置的一致，参考iOS平台微信SDK配置通用链接（Universal Links）

新浪微博分享

在manifest.json文件“App模块配置”项的“Share(分享)”下，勾选“新浪微博分享”项，并输入从微博开放平台申请的参数：

• appkey：
  填写新浪微博开发网站申请的appkey
• appsecret：
  填写新浪微博开发网站申请的appscret
• redirect_url：
  填写申请新浪微博应用时填写的RUL

QQ分享

在manifest.json文件“App模块配置”项的“Share(分享)”下，勾选“QQ分享”项，并输入从QQ开放平台申请的参数：

• appid：
  填写QQ开放平台申请的appid

应用中调用分享功能

用户可以调用API分享信息。用户调用分享API分享消息时，设备是否存在相应的应用，调用的效果不同。如用户没有安装“新浪微博”等应用，HBuilder应用则会在应用内调用SDK的分享页面。如安装了“新浪微博”等应用，则调用API会调用该应用进行分享。
5+App使用分享API的一般步骤如下，uni-app另见专属开发文档：

1. 获取分享服务对象列表
   首先要在plusready事件之后获取分享列表，获取分享服务列表可以调用
   plus.share.getServices()接口。用户可以在回调中获取到分享服务对象的列表。用户需要保存返回的分享对象。在调用分享和授权接口时需要使用到该对象。

   plus.share.getServices(function(s) {  
   shares = ss;  
   for (var i in ss ) {  
       var s = ss[i];  
       var item = document.createElement("li");  
       item.setAttribute("class", "ditem");  
       item.setAttribute("onclick", (s.id == "weixin") ? "shareWeiXin(this.plusShare)" : "shareAction(this.plusShare)");  
       item.innerText = s.description;  
       item.plusShare = s;  
       list.appendChild(item);  
   }  
   }, function(e) {  
   alert("获取分享服务列表失败：" + e.message);  
   });

2. 用户分享信息前需要对分享平台是否授权过进行判断，如果已经授权则可直接分享消息，如没有授权则需要调用已保存的分享对象的“authorize”接口对客户端进行授权。授权成功后再调用分享接口分享消息。

   function shareAction(s, ex) {  
   outSet("分享操作：");  
   if (!s) {  
       outLine("无效的分享服务！");  
       return;  
   }  
   if (s.authenticated) {  
       outLine("---已授权---");  
       shareMessage(s, ex);  
   } else {  
       outLine("---未授权---");  
       s.authorize(function() {  
           shareMessage(s, ex);  
       }, function(e) {  
           outLine("认证授权失败：" + e.code + " - " + e.message);  
       });  
   }  
   }

3. 对客户端授权成功之后用户可以调用分享对象的“send”方法发送要分享的消息，用户创建JSON对象设置要分享的数据。
   用户如需要在分享信息中插入图片，可以在消息中添加pictures节点，属性值为图片地址，图片地址可以为网络地址或者本地图片地址。

   function shareMessage(s,ex){  
   var msg={content:sharecontent.value,extra:{scene:ex}};  
   if(pic&&pic.realUrl){  
       msg.pictures=[pic.realUrl];  
   }  
   
   s.send( msg, function(){  
       alert( "分享到\""+s.description+"\"成功！ " );  
   }, function(e){  
       alert( "分享到\""+s.description+"\"失败: "+e.code+" - "+e.message );  
   } );  
   }

4. 如用户需要取消授权可以调用分享对象方法“forbid”，取消分享服务。

   function cancelAuth(){try{  
   
   for ( var i in shares ) {  
       var s = shares[i];  
       if ( s.authenticated ) {  
           outLine( "取消\""+s.description+"\"");  
       }  
       s.forbid();  
   }  
   // 取消授权后需要更新服务列表  
   updateServices();  
   outLine( "操作成功！" );}catch(e){alert(e);}  
   }

常见问题

1.真机运行时新浪微博为什么分享失败
答：因为HBuilder应用在新浪开发平台还在审核中，目前仅有部分测试账号可成功 分享消息。如用户需要测试新浪微博的分享功能需要使用App云端打包生成安装 包测试。

2.“新浪微博”应用审核未通过时分享消息会失败，如何测试分享？
答： 用户需要在开发者账号下添加测试要使用的账号，具体使用步骤如下：

• 登陆“新浪微博”开放平台
• 找到要测试的应用，点击“应用信息”下的“测试信息”
  
  
• 点击“编辑”添加测试用户的昵称。
• 保存。

3.真机运行时分享的消息应用名为“HBuilder”如何修改？
答： 真机调试时应用内置的分享平台配置使用的应用名为“HBuilder”，真机联调时不能修改。用户需要使用App云端打包修改应用名称。

1. android平台打包后为什么微信分享失败？
   答： 微信分享申请appkey时需要同时填写打包使用证书的MD5值，如果Android打包使用的证书和申请微信appkey时使用的证书不一致会导致微信分享失败，表现是微信登陆后点击“分享到朋友圈”，微信页面一闪就关闭

概述

HBuilder|HBuilderX集成了常用的推送平台，包括个推推送和小米推送。
从HBuilderX1.7.2版本开始支持UniPush推送服务（支持华为、小米、OPPO、魅族厂商推送通道），解决APP离线时因为三方推送进程被杀而导致无法推送的问题，参考UniPush使用指南。

Push推送功能需配置SDK参数后提交云端打包后才能生效，如需真机运行生效请使用自定义基座

使用须知

push是一个可用但不可依赖的功能。

• Android平台
  Push推送通道不可依赖，Android rom厂商为了省电会禁止push进程开机自启、三方清理软件会杀掉push进程。不止是个推，所有非大厂的app，没有进入rom厂商和三方清理软件白名单的app，不管用哪个推送方案都可能会被杀。当然集成了小米推送后在小米手机上肯定不会被杀，但在其他平台被杀的概率可能更高。
  本质上推送是一个有利于开发商但却很容易造成用户骚扰和费电的功能，所以大多数主流app里的push的实际用处都是拉激活的非实时活动推送。必要时要补充发短信通知的方式。
  关于三方推送服务商，其实发展多年内后，技术、服务差距都不大，核心还在于用户量，因为集成的sdk越多，保活和看护机制越有效果。从个推、极光等公司在ipo时披露的数据来看，还是个推占据优势。
• iOS平台
  手机用户有自主关闭APP推送的权利，如果被关闭自然无法收到push。
  可以参考iOS平台检查是否关闭通知消息，并提醒用户开启通知消息

整体架构

推送消息类型

通常推送消息分以下两种类型：

• 通知栏消息（推送通知）
  UniPush推送服务定义好的推送样式、后续动作的推送方式，客户端接收到后显示在系统通知栏，用户点击通知栏消息启动APP（激活到前台）。

• 透传消息
  即自定义消息，UniPush推送服务只负责消息传递，不做任何处理，客户端在接收到透传消息后需要自己去处理消息的展示方式或后续动作。

使用5+ API处理推送消息

uni-app应用中使用推送服务参考：http://ask.dcloud.net.cn/article/35726。

获取APP终端标识

在应用安装后第一次运行时应该调用5+ API的plus.push.getClientInfo方法获取客户端标识，并将此标识提交到开发者的业务服务器进行注册设备，以便在用户登录时可绑定设备，实现向登录用户推送专属消息。
示例代码如下：

document.addEventListener('plusready', function(){  
    // 页面加载时触发  
    var pinf = plus.push.getClientInfo();  
    var cid = pinf.clientid;//客户端标识  
}, false );

如果获取的cid为空，说明客户端向推送服务器注册还未完成，可以使用setTimeout延时重试。

监听推送消息事件

通常在应用入口页面（首页）中调用5+ API的plus.push.addEventListener方法监听消息事件，在回调函数中处理消息的响应业务逻辑，如下示例：

//监听系统通知栏消息点击事件  
plus.push.addEventListener('click', function(msg){  
    //处理点击消息的业务逻辑代码  
}, false);  
//监听接收透传消息事件  
plus.push.addEventListener('receive', function(msg){  
    //处理透传消息的业务逻辑代码  
}, false);

启动回调函数的参数msg为PushMessage对象，保存消息的标题(title)、内容(content)、自定义数据(payload)等。

推送消息包括以下事件类型：

• click
  用户点击系统通知栏中的消息，APP启动或者激活到前台运行，触发click事件。
• receive
  客户端接收到透传消息时（在系统通知栏中不显示消息），触发receive事件。

注意：特殊情况

• Android平台
  推送服务器下发的透传消息符合以下json格式:

  {title:"标题",content:"内容",payload:"自定义数据"}

  时，会作为普通推送通知处理，在系统通知栏创建消息，点击消息激活APP触发"click"事件。

• iOS平台
  如果应用在前台运行，并且监听了"receive"事件，此时接收到APNs通道下发的消息时，会触发"receive"事件。此时可在回调的参数PushMessage对象中获取aps属性值来判断是否是APNs下发的消息。

  // 监听在线消息事件  
  plus.push.addEventListener( "receive", function( msg ) {  
  if ( msg.aps ) {  // Apple APNS message  
      //APNS下发的消息，应用在前台  
  } else {  
      //其它情况接收消息  
  }  
  //其它逻辑  
  }, false );

通知栏消息操作

5+ Push模块还提供一系列API操作系统通知栏，解决比较少见的业务场景需求。

• 清空消息
  5+ API提供[plus.push.clear]()方法可用于清空系统通知栏中属于当前应用的所有消息，示例代码如下：

  plus.push.clear();

• 创建本地消息
  开发者在业务逻辑中如需创建本地消息可以调用plus.push.createMessage接口，可以指定消息的标题，显示消息的时间或者使用延迟时间。
  示例代码如下：

  var options = {cover:false};    
  var str = dateToStr(new Date());    
  str += ": 欢迎使用Html5 Plus创建本地消息！";    
  plus.push.createMessage(str, "LocalMSG", options);  

  <a id="receive" />
  iOS平台创建本地消息也会触发监听的"receive"事件，此时需要添加特殊参数来标识本地创建的消息。

  // 监听在线消息事件  
  plus.push.addEventListener( "receive", function( msg ) {  
  if ( msg.aps ) {  // Apple APNS message  
      //APNS下发的消息，应用在前台  
  } else if ( 'LocalMSG' == msg.payload ) {   // 特殊payload标识本地创建的消息  
      //本地创建的消息，通常不需要处理  
      //注意：不要在这种情况下再此调用plus.push.createMessage，从而引起循环创建本地消息  
  } else {  
      //接收到在线透传消息  
  }  
  //其它逻辑  
  }, false );

• 获取所有消息
  可以调用plus.push.getAllMessage获取系统通知栏中属于当前应用的所有消息，示例代码如下：

  var msgs = plus.push.getAllMessage();  
  for(var i in msgs){    
  var msg = msgs[i];    
  console.log( i+": "+msg.title+" - "+msg.content );    
  }

  iOS平台不支持获取系统通知栏消息，返回空数组。

推送平台申请

使用推送前需要向推送平台申请应用，并获取推送参数（提交云端打包时需配置），如appid、appkey等。

个推推送

登录个推消息推送开放平台：
如果已经申请过个推的消息推送应用，打开“个推·消息推送”页面，在应用列表中找到申请的应用，点击“应用配置”打开应用信息页面，可获取个推的AppID、AppKey、AppSecret等信息。
如果没有申请过应用，打开“应用管理”页面选择“创建应用”申请新应用，申请成功后再通过上面的方法获取AppID、AppKey、AppSecret等参数。

个推推送平台相关问题可直接咨询个推客服，企业QQ：2880983159。也可以在ask中@getui_johny

小米推送

登录小米开放平台，进入“管理控制台”页面，在“应用服务”栏选择“消息推送”，打开推送运营平台：
如果已经在小米开放平台申请应用，则在应用列表中点击相应应用的“应用信息”按钮，打开应用信息页面可查看小米推送的AppID、AppKey、AppSecret等信息；若应用没有启用推送服务，则点击“启用推送”按钮申请开通。
如果没有申请过应用，则点击页面左上角的“创建应用”按钮创建新应用，创建成功后再他通过上面的方法“启用推送”功能并获取小米推送的AppID、AppKey、AppSecret等参数。
小米推送需要为Android和iOS平台分别创建两个应用

云端打包配置

HBuilder|HBuilderX中提交云端打包前，需在manifest.json文件中配置Push推送模块的参数。

1. 模块配置、

打开应用的manifest.json文件，选择“模块权限配置”项，勾选“Push(消息推送)”，如下图所示：

2. SDK参数配置

打开应用的manifest.json文件，选择“SDK配置”项，选择应用使用的推送平台，并输入从此推送平台申请获取的配置参数，如下图所示：

Android平台云端打包时需要确认填写的app包名和在推送平台创建应用时填写的包名一致
iOS平台云端打包时需要确人打包填写的Bundle ID（Apple AppID）和提交给推送平台的APS证书内包含的AppID一致

常见问题

1.为什么真机运行时不能收到推送的消息
答： 如果需要测试推送功能，需要使用HBuilder云打包生成安装包进行测试。

2.推送消息到安卓平台为什么没有在消息中心中显示
答： 如果推送到安卓平台的消息是透传消息，并且格式不符合规范则会触发监听页面的receive事件，消息不会进入消息中心。

3. IOS平台本地创建本地消息会触发“receive”事件，如何和服务器发送的消息进行区分。
答： 用户在创建IOS本地消息是可以在“payload”节点添加特殊标记对消息进行区分

4. Android平台如何配置推送消息图标
答：参考https://ask.dcloud.net.cn/article/35537

配置系统状态栏样式

iOS平台可支持对系统状态栏样式的配置，在应用manifest.json文件的plus->distribute->apple下添加UIStatusBarStyle进行控制，默认值为"UIStatusBarStyleDefault"。

App云端打包设置系统状态栏样式操作方式：
双击应用的manifest.json文件，切换到“代码视图”，在plus->statusbar下添加style节点：

Ctrl+S保存，并提交App云端打包

设置系统状态栏背景颜色（iOS7及以上生效）

iOS平台可支持对系统状态栏背景颜色的配置，在应用manifest.json文件的plus->statusbar下添加background进行控制：
值为字符串类型，格式为"#RRGGBB"格式，如红色为"#FF0000"；默认值为白色。

App云端打包设置系统状态栏背景颜色操作方式

双击应用的manifest.json文件，切换到“代码视图”，在statusbar节点下添加background节点：

Ctrl+S保存，并提交App云端打包

运行期动态设置系统状态栏背景颜色

调用plus.navigator.setStatusBarBackground(rgb)动态修改系统状态栏背景颜色：
rgb为颜色字符串值，格式为#RRGGBB。

function setStatusbarRed(){  
        // 设置系统状态栏背景色为红色  
        plus.navigator.setStatusBarBackground("#FF0000");  
}

注：仅在iOS7.0及以上版本才支持设置系统状态栏背景色

设置状态栏透明并且页面内容通顶，参考http://ask.dcloud.net.cn/article/118

Android平台
Android平台自定义系统状态栏样式，参考状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别。

Android离线打包在AndroidManifest.xml中配置主Activity的皮肤(android:theme)来设置：

        <activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|screenSize"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:screenOrientation="sensor"  
            android:windowSoftInputMode="adjustResize"  
            android:theme="主Activity的皮肤"  
            android:exported="true">  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN"/>  
                <category android:name="android.intent.category.LAUNCHER"/>  
            </intent-filter>  
        </activity>

后续云端打包会封装常用的皮肤样式。参考:http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/238

首先全屏并非状态栏透明或变色，而是没有状态栏，也就是看不见电量、信号那条了。
全屏常见于横屏游戏，一般场景应该使用状态栏变色或状态栏透明。
状态栏透明、变色及消失的区别，参考文章http://ask.dcloud.net.cn/article/1150

如果想要全屏模式，在应用的manifest.json文件中添加“fullscreen”节点：
Boolea值类型，true表示全屏，false表示非全屏，默认值为false。

App云端打包支持全屏操作方式：
双击应用的manifest.json文件，切换到“代码视图”，在根节点下添加fullscreen节点：**

Ctrl+S保存，并提交App云端打包

在应用中可调用5+ API动态改变应用是否全屏显示的状态

function fullscreen(){  
        // 设置应用全屏显示！  
        plus.navigator.setFullscreen(true);  
}  
function unfullscreen(){  
        // 设置应用非全屏显示！  
        plus.navigator.setFullscreen(false);  
}  
function isfullscreen(){  
        // 查询应用当前是否全屏显示！  
        console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );  
}

在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>

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>

此文档将不再维护，请参考新文档：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：

• 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，在应用下可获取：

在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_android”编辑框中

添加iOS平台应用的KEY

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

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

点击“提交”后生成新Key，在应用下可获取：

在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“高德定位或地图”项下的“appkey_ios”编辑框中

百度LBS开放平台申请应用

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

创建Android平台应用

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

• 应用名称
  根据规则而填入应用名称，如“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：

在HBuilderX中将此Key填入到manifest.json文件“（App）SDK配置”页面的“百度定位或地图”项下的“appkey_android”编辑框中

创建iOS平台应用

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

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

点击“提交”后生成新应用，在应用列表界面会添加新创建的应用项，在“访问应用（AK）”列中点击复制按钮获取AppKey：

在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(地图，只能选一个)”下，勾选“高德地图”项，并输入从高德开放平台申请的参数：

配置参数

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

百度地图

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

配置参数

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

谷歌地图

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

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

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

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

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保存，并提交云端打包即可使用分享功能。

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

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

系列文章目录导航：

• 提升HTML5的性能体验系列之一 避免切页白屏
• 提升HTML5的性能体验系列之二 列表流畅滑动
• 提升HTML5的性能体验系列之三 流畅下拉刷新
• 提升HTML5的性能体验系列之四 使用原生UI（nativeUI）
• 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
• 提升HTML5的性能体验系列之六 降低内存占用

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的性能体验系列之三 流畅下拉刷新