uniapp中plus的使用
什么是plus?
以plus开头的方法都是属于HTML5+环境调用的方法。
plus不能在浏览器环境下使用,它必须在手机APP上才能使用,因为以安卓为例,他是操纵webview的API。在5+中,我们在使用plus之前要监听HTML5+环境是否已经加载完毕,而在uniapp中,则可以直接调用,可以参看uni-app使用plus注意事项。
什么是webview?
WebView是android中一个非常重要的控件,它的作用是用来展示一个web页面。它使用的内核是webkit引擎,4.4版本之后,直接使用chrome作为内置网页浏览器。它的作用是显示和渲染页面,可与页面JavaScript加护,实现混合开发。
什么是HTML5+?
HTML5+是中国HTML5产业联盟的扩展规范,基于HTML5扩展了大量调用设备的能力,使得web语言可以像原生语言一样强大。
uni-app
App 端内置 HTML5+ 引擎,让 js 可以直接调用丰富的原生能力。
条件编译调用 HTML5+
小程序及 H5 等平台是没有 HTML5+ 扩展规范的,因此在 uni-app
调用 HTML5+ 的扩展规范时,需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined
错误。
// #ifdef APP-PLUS var appid = plus.runtime.appid; console.log('应用的 appid 为:' + appid); // #endif
uni-app
不需要 plus ready
在html中使用plus的api,需要等待plus ready。 而uni-app
不需要等,可以直接使用。而且如果你调用plus ready,反而不会触发。
uni-app
中的事件监听
在普通的 H5+ 项目中,需要使用 document.addEventListener
监听原生扩展的事件。
uni-app
中,没有 document。可以使用 plus.globalEvent.addEventListener
来实现(注意manifest中需开启新编译器,即自定义组件模式"usingComponents":true)。
// #ifdef APP-PLUS // 监听设备网络状态变化事件 plus.globalEvent.addEventListener('netchange', function(){}); // #endif
同理,在 uni-app
中使用 Native.js 时,一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。
注意:旧编译器(非自定义组件模式)不支持 plus.globalEvent
这个对象。
跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app
参考这个思路,为 uni-app
提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
条件编译
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
- #ifdef:if defined 仅在某平台存在
- #ifndef:if not defined 除了某平台均存在
- %PLATFORM%:平台名称
条件编译写法 | 说明 |
---|---|
#ifdef APP-PLUS
需条件编译的代码 #endif |
仅出现在 App 平台下的代码 |
#ifndef H5
需条件编译的代码 #endif |
除了 H5 平台,其它平台均存在的代码 |
#ifdef H5 || MP-WEIXIN
需条件编译的代码 #endif |
在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集) |
%PLATFORM% 可取值如下:
值 | 平台 |
---|---|
APP-PLUS | App |
APP-PLUS-NVUE或APP-NVUE | App nvue |
H5 | H5 |
MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付宝小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字节跳动小程序 |
MP-QQ | QQ小程序 |
MP-360 | 360小程序 |
MP | 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序 |
QUICKAPP-WEBVIEW | 快应用通用(包含联盟、华为) |
QUICKAPP-WEBVIEW-UNION | 快应用联盟 |
QUICKAPP-WEBVIEW-HUAWEI | 快应用华为 |
注意
- Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持
ifios
、ifAndroid
代码块,可方便编写判断。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)