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。

立即

咨询

400电话

电话咨询

400-1875-778

微信咨询

李经理

微信扫一扫加好友

下载源码

返回顶部