uni-app中如何使用5+的原生界面控件（包括map、video、livepusher、 barcode、nview）
uni-app可以调用plus的api操作扩展能力，这块很简单，在app的条件编译里直接写就好了，也不需要plus ready。
但是HTML5 里有很多原生的可视化控件，包括map、video、livepusher、barcode、nview（包括原生头、原生tab），获取这些对象和操作他们需要有特殊写法。
5+app开发时，我们可以用plus.webview.currentWebview获取当前页面，但uni-app里用法不一样，需要这样取当前显示的webview：
const currentWebview = this.$mp.page.$getAppWebview();
//注意相关操作写在APP-PLUS条件编译下
还有一种写法比较冗余，可以获取页面栈中任意一个webview对象：
var pages = getCurrentPages();
var page = pages[pages.length – 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview(); //页面栈最顶层就是当前
webview
// #endif
注意uni-app不需要像5+App那样等待plus ready，可以直接用。
有了这个currentWebview ，我们就可以做很多事情了，比如：
例子1 创建直播推流
虽然uni-app的nvue页面已经提供了直播组件。但uni-app的vue页面还没有封装，在app里的vue页面使用直播推流就得用这种写法了。（这里指的是推流，如果是拉流，在app侧可直接使用video标签）
var pusher = plus.video.createLivePusher(“”, {
url:‘rtmp://testlivesdk.v0.upaiyun.com/live/upyunb’,
top:‘100px’,
left:‘0px’,
width: ‘100%’,
height: ‘300px’,
position: ‘static’
});
currentWebview.append(pusher);
在之前的5+app里，可以使用占位div来布局位置，但在uni-app里，因为没有dom，也没有占位id，所以通过js自己设置原生控件的大小和位置。
例子2 自定义扫码
uni-app的扫码api自带的扫码界面无法有效自定义，大家可以在一个自己的页面里放置一块区域显示扫码控件。
var barcode = plus.barcode.create(‘barcode’, [plus.barcode.QR], {
top:‘100px’,
left:‘0px’,
width: ‘300px’,
height: ‘300px’,
position: ‘static’
});
//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
//注意扫码区域需为正方形，否则影响扫码识别率
currentWebview.append(barcode);
当然如果使用app-nvue的话，有自带的barcode组件。
例子3 自定义地图
uni-app的原则是vue语法+小程序api。但小程序的api不如plus.map丰富，地图的重度开发者仍然需要plus的map。
uni-app中单独优化了这个地图的获取，通过$getAppMap可直接得到map对象。
例子4 给tabbar加个凸起
本例子仅适用于非自定义组件模式
注意tabbar的获取，不是走getCurrentPages，而是用plus.webview.currentWebview()
var centerButtonOnTab = new plus.nativeObj.View(“”,{top:‘500px‘,left:‘160px‘,height:‘50px,width:’50px’,backgroundColor:’#FF0000′});
plus.webview.currentWebview().append(centerButtonOnTab);
这里只是基础演示，大小位置、点击事件，在实际开发中都得自己处理。
如果app端想要高性能的tabbar凸起，建议使用nvue在前端自绘tabbar。
例子5 操作titleNView，给titleNView右上角加个红点
var nTitle = currentWebview.getTitleNView();
nTitle.drawBitmap(“static/reddot.png”,{}, {top:‘3px’,left:‘340px’,width:‘4px‘,height:‘4px’}); //具体尺寸在商用时需自行计算。红点图在附件里。
清除刚才绘制的红点
nTitle.reset();
更新：1.5版的HBuilderX已经支持titleNView的button直接设红点了，hello uni-app的模板里运行到app时也能看到相应示例源码。所以本例子实际作用已经过期，此处纯粹演示用。
5+的plus.nativeObj.view，本质是一种类canvas的画布，可以自由的draw内容上去，更新管理也需要自己维护操作。
包括想在原生控件比如视频、地图上加点什么东西，因为HTML的组件是盖不住原生组件的，都可以使用nview来做。
例子6 uni-app可以在vue页面里写web-view组件，这个组件如何用plus api操作？
vue页面里的web-view 组件其实是一个子webview。
在vue里，通过本文开头的代码，先得到当前页面的webview。
然后调用currentWebview.children()方法来获得所有子webview。
因为执行代码的时机不同，可能执行太早会返回空结果。
如果确定页面里有web-view，则可以再延时一下然后再获取一次children。
这样就能拿到这个子webview。
有了子webview对象后，可以用5+丰富的api来进行前进、后退、拦截资源、禁用schema跳转、注入js等各种操作。
<来客推（www.laiketui.com）是国内知名商城系统及商城网站建设提供商，为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购商城系统、微信分销系统、小程序商城、微分销系统等多端商城网站建设解决方案>
申明：本网站部分文章和图片来源网络编辑，如有侵权及时沟通删除，来客电商原创文章，转载请注明来源。
