Uniapp是一个基于Vue.js的跨平台开发框架,可以帮助开发者将一个代码库同时用于编写微信小程序、H5、App和支付宝小程序等,在开发效率及代码复用性方面有不错的表现。
其中,uni-app 组件库提供的异构容器功能则是允许我们在同一个组件内使用多个平台组件,从而在使开发人员可以随时切换平台。
目前,uniapp跨小程序的开发与其亲属--微信小程序的开发非常相似。不过,为了让uniapp更好地兼容各平台,开发者需要了解uni-app 提供的所有兼容平台 API,下面我们就具体聊一下uniapp开发的兼容原理。
uniapp开发原理
1、跨平台组件
uni-app 将 H5、微信小程序、支付宝小程序、APP 等平台中的组件进行了封装,在开发时只需要通过 $platform 进行判断,再通过不同的方式调用对应的组件即可。
2、跨平台 API
uni-app 提供了一套跨平台的 API,开发者可用它们来实现一些特定平台依赖的操作,而无需关注不同平台之间的差异。包括路由、导航栏、图片、设备信息等。
3、异构容器
uni-app 的异构容器是基于小程序的iframe标签所开发的,这个组件可以将小程序的页面嵌套到其他小程序或非小程序中,甚至是一些HTML页面中。
但是,微信小程序并不支持iframe标签,具体操作是通过在微信小程序中创建一个Web-view来模拟iframe。因为这样,异构容器并不能在小程序中快速使用,如果你想在小程序中使用它,还需要安装 uni-app 插件。
uni-app 的微信小程序兼容:
1、体验渲染效果
通常情况下,uni-app 的H5端渲染效果最佳,微信小程序排在第二,而支付宝则排在第三。
2、小程序端路由跳转
uni-app 提供了 $route 跳转 API,可以同时无感知地兼容微信小程序和H5端的路由跳转,跳转时会自动判断是否为小程序环境。
3、请求
uni-app 的请求通过 uni.request({}) 请求方法统一处理配置和请求,可以多端共用,同时,也兼容微信小程序中的 wx.request()。
4、wxss 兼容
uni-app 包含了一套兼容微信小程序的样式表,可以使原来的小程序 WXSS 快速转换到 uni-app。
总结
uni-app 可以快速开发跨平台应用程序,其中兼容微信小程序和公众号的开发原理非常简单,基本实现了一个代码库在 H5、微信小程序、支付宝小程序、APP 等平台中的兼容。
同时,需要注意的是,虽然代码不用大幅更改,但是不同平台中的接口及渲染效果等会有所不同,因此在实际应用中,还需要根据不同平台及自己的需求对代码进行细微的修改和调整。