应用场景

HBuilder8.0重大更新中提到，非必要不推荐使用同屏多webview中的title场景。
过去使用了父子webview模式，现在推荐使用nativeView方案，可以进一步提升应用整体性能。

具体实现

创建nativeView

参考相关文档原生控件对象

// 创建nativeView  
var headView = new plus.nativeObj.View('test_view', {  
    height: '45px',  
    position: 'dock',  
    dock: 'top'  
});

这里需要注意，将position设置为dock，并且dock设置为top。这样，nativeView就会在整个webview的最上方，并且挤压webview的高度。

绘制标题

参考相关文档绘制文本

// 绘制标题  
headView.drawText('title', {}, {  
    color: '#000000',  
    size: '16px'  
});

这里的目标区域，采用默认的整个view的区域即可。

设置背景颜色

参考相关文档绘制矩形区域

// 绘制背景颜色  
headView.drawRect('#ffffff');  
// 绘制边框  
headView.drawRect('#ff0000', {  
    top: '44px',  
    height: '1px'  
});

绘制icon

参考相关文档绘制图片
这里以绘制back箭头为例

// 绘制back箭头  
var backIcon = new plus.nativeObj.Bitmap('icon_back');  
var BACK_BASE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=';  
backIcon.loadBase64Data(BACK_BASE, function() {  
    headView.drawBitmap(backIcon, {}, {  
        width: '25px',  
        height: '25px',  
        top: '10px',  
        left: '5px'  
    });  
});

如果需要绘制其它更多的icon等内容，可以根据需求继续添加。

事件监听

参考相关文档添加事件监听器
这里以click事件为例

// 事件监听  
headView.addEventListener('click', function(e) {  
    var x = e.clientX;  
    console.log('触摸目标在view控件中的x坐标：' + x);  
});

事件对象中，主要用到的属性就是clientX，其它更多属性请参考文档说明。

添加至webview

nativeView创建完成后，需要添加到webview上，有些属性才会生效，例如：dock等。

plus.webview.currentWebview().append(headView);

通用方法

看完上面的例子，可能很多小伙伴会觉得步骤很多，操作很繁琐。
这里提供一个简单的封装的方法，适用于部分场景，实际开发中还是要自己根据需求进行进一步的定制。
参数说明：

{  
    "id": "nativeView的id",  
    "height": "导航栏高度",  
    "title": "标题",  
    "titleColor": "标题文字颜色",  
    "fontSize": "标题字体大小",  
    "backgroundColor": "导航栏背景颜色",  
    "borderColor": "导航栏边框颜色",  
    "back": "是否绘制back箭头，Boolean"  
}

详细的方法，请见附件中的demo.html。

更多

为了方便开发者使用，html5plus还提供了titleNView方案，并且mui也提供了相应的扩展方法。
参考原生导航栏控件titleNView使用说明以及打开带原生导航栏的新页面

关于nativeObj的使用，如果大家在实际开发中，有更好的应用例子，欢迎在社区中分享学习交流。

最后附上源码

需求

使用多webview，实现选项卡的切换。

普通方案

hello mui->tab bar（选项卡）->底部选项卡-webview模式，提供了多webview实现选项卡切换的方案。
实际开发中，如果页面内容过多，一次性加载多个webview并不是最优的方案。

更优方案

微信这款应用，大家都非常熟悉。微信首页的选项卡切换，未切换过的选项内容，第一次会有个加载的过程。也就是所谓的“按需加载”，或者叫做“动态加载”。

思路

思路其实很清晰，首次只加载首个选项对应的webview，其它选项在切换时判定其对应的webview是否存在，从而决定是否需要创建webview。

具体实现

html部分

<header class="mui-bar mui-bar-nav">  
    <h1 class="mui-title">首页</h1>  
</header>  
<nav class="mui-bar mui-bar-tab">  
    <a class="mui-tab-item mui-active" data-id="home">  
        <span class="mui-icon mui-icon-home"></span>  
        <span class="mui-tab-label">首页</span>  
    </a>  
    <a class="mui-tab-item" data-id="contact">  
        <span class="mui-icon mui-icon-phone"></span>  
        <span class="mui-tab-label">电话</span>  
    </a>  
    <a class="mui-tab-item" data-id="email">  
        <span class="mui-icon mui-icon-email"></span>  
        <span class="mui-tab-label">邮件</span>  
    </a>  
    <a class="mui-tab-item" data-id="setting">  
        <span class="mui-icon mui-icon-gear"></span>  
        <span class="mui-tab-label">设置</span>  
    </a>  
</nav>

子页面信息

var subInfos = [{  
    url: 'html/home.html',  
    id: 'home'  
}, {  
    url: 'html/contact.html',  
    id: 'contact',  
}, {  
    url: 'html/email.html',  
    id: 'email'  
}, {  
    url: 'html/setting.html',  
    id: 'setting'  
}];  
var subStyles = {  
    top: '45px',  
    bottom: '51px'  
};

为了方便后面的操作，提供一个简单的方法来获取子页面信息。

// 根据id查询子页面的信息  
var getSubInfoById = function(infoList, id) {  
    var result = null;  
    for(var i = 0, len = infoList.length; i < len; i++) {  
        var _info = infoList[i];  
        if(_info.id === id) {  
            result = _info;  
            break;  
        }  
    }  
    return result;  
};

加载首选项webview

var mainWv = plus.webview.currentWebview();  
var titleEL = document.querySelector('.mui-title');  
var activeTab = '';  

// 默认只加载首页webview  
var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);  
mainWv.append(homeWv);  
activeTab = subInfos[0].id;

选项卡切换

// 点击切换，动态创建其它webview；  
mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {  
    var _self = this;  
    var targetTab = _self.getAttribute('data-id');  
    if(targetTab === activeTab) {  
        return;  
    }  
    titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;  
    var _subWv = plus.webview.getWebviewById(targetTab);  
    // 若webview不存在，则创建；  
    if(!_subWv) {  
        var _subInfo = getSubInfoById(subInfos, targetTab);  
        _subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);  
        mainWv.append(_subWv);  
    }  
        _subWv.show();  
    // 隐藏之前的webview  
    plus.webview.getWebviewById(activeTab).hide('none');  
        activeTab = targetTab;  
    });  
});

双首页方案

除了上面提供的方案，还可以使用HBuilder8.0后提供的双首页配置来进一步加快加载速度。也就是把第一个选项对应的webview，作为secondwebview，直接在manifest.json中配置即可。
参考双首页secondwebview配置的使用

更多

关于5+app和流应用开发过程中的问题及需求，每个开发者都有自己的实现及优化方案。
如果大家有更多更好的方案，欢迎在社区分享以供学习交流。

附上源码，真机运行即可预览效果。

最近有这样一个需求，就是用户推荐我们的app给其他用户，让其他用户扫描个二维码安装app，安装好后能得到是通过谁推荐安装的，所以安装的时候需要传参数，并且安装后能得到这个参数，找了下，发现openinstall能实现这样的功能，但是需要加入他们的sdk，所以用hbuilder开发的app就麻烦一些，希望这个功能能在hbuilder中实现，其实原理也很简单，相信很多开发者也很需要这样的功能。

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布！
总计10节：
1、入口页面布局子页面布局（含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发（涵盖：下拉刷新、上拉加载等知识点）
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时，包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识！
收费50元，有经济困难的在校学生可以联系客服 1265928288 进行优惠（不是勿扰）。
购买方式
腾讯课堂：
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含：源码、素材、文字资料，购买后即可下载！ 观看时候选择超清模式，代码清晰可见！

hcoder 一直致力于奉献高质量 教程，官网上 mui h5+ 等免费教程播放量已经达到5万，收点费用为了做的更好，希望大家理解。
免费教程地址
http://www.hcoder.net/course

JPushService.java文件：
private String mRegistrationId; 应该为private static String mRegistrationId；
JPushReceiver.java文件：
String rId = JPushInterface.getRegistrationId(context) 应该为private static String mRegistrationID(context)

这里的是ios的 http://ask.dcloud.net.cn/question/4497
安卓的怎么写呢

实战： MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 ： HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 ： APP开发教程 - 启动动画
知识点 ： APP开发实例教程 - 窗口切换
知识点 ： 移动端图片剪裁、上传视频教程
知识点 ： app开发教程-用户注册、登录
实战 ： APP开发实战 - 新闻客户端
知识点 ： HTML 5 + 开发教程
知识点 ： mui 全套教程

视频教程观看地址
http://www.hcoder.net

h.js - mui 操作的小伙伴，效率极高的dom操作js框架（免费开源、文档、视频教程）

有psd效果图已做好，需要切mui框架，来个能稳定长期合作的联系下QQ503576543

太黑的离谱的就算了哦~

HBuilder 8.1.1-alpha版发布，解决若干5+App问题，​查看详情。

微信小程序内测期间曾被万众期待，但上线后却有众多被开发者诟病的地方：

1. 不开放线上流量，导致很多开发者撤出
2. 体积受限1M以内，很多App只能做裁剪版
3. 开放的API太少，很多原生功能无法实现
4. 界面UI被框死，无法与原生一致
5. 不能方便安装到手机桌面
6. 开发和运维工作只能单独一条线为微信服务，投资大回报不佳

开发者的不满，体现在小程序的应用上就是功能不全、体验不佳、没有维护运营，进而导致用户不满。
此外每次从微信里点击数次才能启动小程序，还是比在桌面启动应用麻烦太多。

毕竟微信是一个社交软件，而不是OS，很多事情做起来别扭，让微信不限制小程序的体积和能力，也勉为其难，自动在桌面创建图标也是场景不顺。
那么手机厂商们的“小程序”是什么样的？
3月20日下午，工信部下属的HTML5中国产业联盟，联合8家手机制造商宣布，基于HTML5+开放标准推出即点即用的流应用。

众多手机厂商表示，将在手机rom原生支持HTML5+规范，达到真正原生级体验。
HTML5+规范是对HTML5的扩展，让js可以调用到OS的各种能力，包括对体验提升很重要的原生动画、渲染能力。
基于HTML5+规范的即点即用应用叫流应用，也就是像流媒体的即点即看一样，把App流式发行到手机上（并非在线web页面，而是安装到手机本地的js）
流应用和微信小程序一样可以即点即用，但功能是全开放的，操作系统的API大多可以调用，也没有体积和UI方面的各种限制，可以支撑开发者做出和原生功能体验一致的App。
更重要的是手机厂商们设计的使用方式继承了用户现有的习惯，在应用市场里找一个应用，点一下直接启动，然后在桌面创建图标，下次可以在桌面二次使用。

会议现场大咖云集，精彩观点纷呈。
中国信息通信研究院技术与标准研究所所长王志勤、W3C中国技术负责人 北航计算机学院副院长胡春明在开场致辞。

中国信通院标准所所长王志勤致辞

W3C中国技术负责人胡春明致辞

HTML5中国产业联盟秘书长、DCloud CEO王安讲解了HTML5+即点即用应用的特点和优势。
华为、唯品会等手机厂商和开发商代表分享了即点即用应用的现状数据和未来计划。

CSDN创始人蒋涛作为圆桌主持人，与华为消费者BG用户经营开发部部长叶文武、vivo互联网开发部部长张飞、金立的应用商店总经理杨骏慷及DCloud CEO王安，探讨了后App时代的发展方向。

对于开发者而言，目前原生应用流量越来越贵。在应用市场里激活率也只有30-50%，也就是100个下载里只有40个人完整操作完了下载、安装、权限确认、启动并联网等所有步骤，有60人在中间环节折损掉了。
在移动互联网用户总体量趋于饱和时，研究如何把折损掉的60人拉回来，成为产业的新增长点。
即点即用的流应用，把下载和激活的折损抹平，为开发商新增一倍多的激活用户，这对开发者而言非常有吸引力。也大幅降低了投放时的CPA成本。

4月下旬，第一批手机厂商支持流应用的应用商店将上线。目前联盟正在鼓励开发者积极提交应用，并计划为前30个高品质应用提供充足流量扶持。

开发者开发流应用有3种开发方式：

1. 对于有H5站点的开发者，略加改造几天内即可完成一个接近原生体验的流应用。DCloud推出一个wap2app框架，在新版Hbuilder alpha里新建项目时，多了一个wap2app项目的选项，此框架可快速帮助开发者完成升级工作。
2. 对于一个有微信小程序的开发者，可通过DCloud提供的小程序转换流应用工具，把微信小程序转为HTML，进而略加改造也可提交到流应用平台。
3. 对于还没开始做App的创业者，则使用js编程，大约3、4周可以完成，一套代码即有了流应用版，又有了安卓、iOS原生版，还有了H5站点。也就是HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载，实现了跨平台开发。

详见开发指南。

现场体验唯品会流应用，很难看出与原生应用的区别。
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=o0376ky6123&tiny=0&auto=0" allowfullscreen></iframe>
如视频无法播放，点击此链接观看唯品会流应用的操作视频
根据唯品会代表演讲提供的数据，流应用版本的唯品会付费转化率高、新客成本低，成为唯品会公司级项目。

对于开发者而言，通过跨平台开发降低开发成本，通过即点即用降低获客成本，是很好的事情。
对于用户而言，应用可以随用随取，非常方便。尤其是安卓手机装多了应用变卡的问题，终于可以解决了。流应用提供的打破原生App孤岛，按需重组服务的理念也颇吸引人。

移动互联网已经发展多年，遇到了瓶颈，流量向寡头App集中。后App时代的开启将重新激活产业，带来更多新的想象空间。
不似微信反复强调小程序没有红利，HTML5中国产业联盟是会在业务发展初期重点扶植一批高品质应用，希望开发者抓紧时机，成为iOS初期的“愤怒的小鸟”。

下载体验流应用

常见FAQ

Q: 流应用的秒开按钮是打开一个轻应用吗？
A: 不是。秒开是流应用App从下载到安装到启动的3步合一简称秒开，流应用虽然是js编程语言，但并不是b/s网页，不是web，而是一个典型的c/s客户端，它是原生App一样的c/s结构。虽然可以通过wap2app强化改造把一个M站改造为流应用，经过改造后可达到原生的功能和体验，方能接入流应用平台。

Q: 流应用只能从360手机助手里进入和使用吗？
A: 不是。流应用从360手机助手里下载安装，以后的启动是从手机桌面直接启动，不是每次到360手机助手里启动。

Q: 流应用在没网络的时候会不会404白屏？
A: 不会。可以体验下36Kr资讯的流应用，没有网络时（比如打开飞行模式），之前的新闻照样离线看。参考视频https://v.qq.com/x/page/h0386sphgpt.html

Q: 流应用的离线能力是缓存吗？是不是三方清理软件清除缓存后流应用就不能用了？
A: 不是。流应用虽然是js，但是可以调用操作系统40万原生API，可以使用原生存储，不会被清理。
当然开发者也可以使用网页缓存，DCloud的开发工具并不限制，只是使用网页缓存是真的可能会被三方清理软件清除掉。

Q: 流应用和原生应用可以在一个应用市场并存吗？
A: 可以并存。也可以改名字、或图标加修饰。

Q: 流应用仅支持360手机助手吗？其他渠道能发行流应用吗？
A: 目前集成流应用引擎并上线的发行渠道有360手机助手、金立软件商店、360手机浏览器，还有很多发行渠道已经加入HTML5中国产业联盟，陆续在集成流应用引擎，上线后我们会公开通告。

Q: 流应用是否支持iOS
A: Appstore上搜索“流应用”，下载DCloud的流应用管理器，在里面使用流应用。
另外流应用在iOS上无法自动创建桌面图标，需要用户启动一个流应用后在右下角点菜单，选择添加到桌面主屏，根据向导手动添加桌面快捷方式。

Q:流应用所需要的权限依赖主引擎，如果用户不给主引擎权限怎么办
A: 在原生开发里，当用户不给app权限时，app可以检测到并提醒用户赋权。在流应用里流程是一样的，js代码可以检测到赋权状态，并给用户提示，还可以跳转到相应设置界面。另外在金立手机上，由于原厂的特殊支持，流应用引擎权限是完整齐备的。

Q:分享时如果被分享者手机上没有流应用引擎会怎么样？
A: 此时选项由开发者设定，或者提示用户下载原生App，或者提示用户下载流应用引擎。如果涉及直通车业务，则建议提示用户下载流应用引擎。仅1M大小，下载后仍然可自动启动相应的流应用的指定界面。

Q: 流应用是否可以给原生App导流？
A: 流应用代码如何实现取决于开发者自己，检测到wifi下并下载apk这些代码都可以自己实现。但如果功能一样，则一般不推荐导流原生，打扰用户又没有给用户带来新价值。
另外流应用不是wap页面，不能像wap一样挂一个banner条来引导用户下载原生app，这种方式太影响流应用的用户体验，所以带这种banner的不能上线到流应用正式平台里。
除了流应用平台的要求，360等平台还有额外上线要求，一般在流应用里给原生导流都是不允许上线的。渠道还是希望开发者专注于优化流应用的体验，而不是简单的把流应用当做导量工具。

Q: 开发流应用，又多一套产品，研发成本又增加了？
A: 一旦流应用试点成功，可以做到原生iOS、Android、流应用、HTML5手机站一套架构。研发成本大幅下降而不是增加。
如果已经有了原生版又开发流应用，一般是与HTML5版本合并管理，通过条件编译比如glup来实现一套源码。这样可以有效同步业务逻辑。此时研发成本虽有所增加，但市场成本、获取用户的成本大幅下降，也是非常值得的。

Q: 流应用的渠道考核走HTML5的还是走原生的，还是单独？
A: 流应用与原生一样，启动后通过同样的接口给服务器传递激活信息，同样上报IMEI。
标准的c/s流应用，因为不是b/s网页，没有PV、UV概念，也无法走传统的HTML5网页统计。所以一般是走到了原生的统计口径，当然也可以给流应用一个单独参数标志，以区隔这种推广方式的效果。
对于wap站转换的流应用，如果嫌麻烦，也可以继承之前wap站的pc、uv统计接口。

更多问题可加入流应用QQ交流群471285299继续沟通，也可以在问答系统里发帖提问。

开发者在HBuilder调试基座、DCloud的流应用管理器、及不同渠道如360手助、金立应用商店里的运行效果可能不同。
差异原因一般有2方面：三方sdk差异（如个推、qq登陆等），5+引擎版本差异。

三方sdk差异：

三方sdk是否集成以及需要在manifest中配置什么，是由流应用的集成渠道决定的，会产生差异。

上图的中微信H5支付的链接，单独摘出来：https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1。（重要更新：微信已经开放H5支付申请，推荐使用H5支付方式）

权限：

和5+应用不同，流应用作为一个公共平台，对用户安全和数据隐私需要负责，会有一些策略限制。

1. plus.contact模块在流应用中不存在，也就是不能访问通讯录；
2. 流应用中对涉及用户隐藏的操作有二次弹框询问，比如相册、录音、定位、安卓直发短信、安卓直拨电话、安卓快捷方式创建、Native.js调用；
3. 流应用中，不支持远程web页面访问Native.js，仅本地页面才可以使用Native.js。但远程页面仍然可以使用非Native.js的plus api。

如果开发者发现还有其他差异，一般是因为运行环境的5+引擎版本不同，可以使用plus.runtime查询5+引擎版本。
5+引擎每次升级，首先是DCloud的HBuilder调试基座和DCloud流应用管理器升级，三方渠道逐渐升级。

不同平台的流应用的UA是不同的，比如360手助里的流应用，UA里包含qihoo特征字符串。可以根据 if (mui.os.stream) {} 或UA 来判断当前的运行环境，隐藏不支持的功能的使用，如去掉语音输入的麦克风图标或微信登录的图标。

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布！
总计10节：
1、入口页面布局子页面布局（含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发（涵盖：下拉刷新、上拉加载等知识点）
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时，包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识！
收费50元，有经济困难的在校学生可以联系客服 1265928288 进行优惠（不是勿扰）。
购买方式
腾讯课堂：
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含：源码、素材、文字资料，购买后即可下载！ 观看时候选择超清模式，代码清晰可见！

hcoder 一直致力于奉献高质量 教程，官网上 mui h5+ 等免费教程播放量已经达到5万，收点费用为了做的更好，希望大家理解。
免费教程地址
http://www.hcoder.net/course