uni-app 的使用体验总结
使用体验
我的体验是,跟正常的用vue开发网页差不多但又差的多,有种vue和小程序结合的感觉。
uni-app 需要注意看注意事项,文档给出了和 Vue 使用的区别。例如动态的 Class 与 Style 绑定,在 H5 能用,APP 和小程序的体现就不一样。
配置项跟着文档来,开发环境也是现成的,下载 HBuilderX 导入项目就能运行。
路由
uni-app 的路由全部配置在 pages.json
文件里,就会导致多人开发的时候,路由无法拆分,如果处理的不好,就会发生冲突。
导航
导航栏需要注意的一个问题就是不同端的展示形式会不同,所以要处理兼容问题,导航栏可以自定义,用原生,框架,插件但是兼容性都不同,多端需求一定要在不同设备跑一下看效果。
例如在小程序和 APP 中,原生导航栏取消不了,就不能用自定义的导航栏,要在 pages.json
中配置原生导航栏。
兼容方法就是用 uni-app 提供的条件编译,处理各端不同的差异,我们支付的业务逻辑也是通过条件编译,区分不同端调用不同的支付方式。
生命周期
分为 应用的生命周期
、页面的生命周期
、组件的生命周期
。写过Vue 的很好理解,大致上和 Vue 的还是差不多的,页面生命周期针对当前的页面,应用生命周期针对小程序、APP。这些过程可能都要踩一下!
网络请求和环境配置
官方提供了 uni.request
, 当然也可以选择第三方库的使用,如 flyio、axios。
Web-View 组件
在 uni-app 中使用 Web-View,可以使用本地的资源和网络的资源,不同平台也是有差异的,小程序不支持本地 HTML,且小程序端 Web-View 组件一定有原生导航栏。
需要注意的是网页向应用 postMessage
的时候需要引入 uni.web-view.js
,不然是没办法通信拿不到数据。
全局状态
Vue.prototype
它的作用是可以挂载到 Vue 的所有实例上,供所有的页面使用。
// main.js Vue.prototype.$globalVar = "Hello";
然后在 pages/index/index
中使用:
<template> <view>{{ useGlobalVar }}</view> </tempalte> <script> export default { data (){ return { useGlobalVar: $globalVar } } } </script>
globalData
<!-- App.vue --> <script> export default { globalData:{ data:1 } onShow() { getApp().globalData.data; // 使用 getApp().globalData.data = 1; // 更新 }; </script>
插件市场
uni-app 的主要特色也源自于它的插件市场十分丰富。
用得比较好的组件:
ColorUI-UniApp:样式库
uCharts 高性能跨全端图表:
最后:各端的差异性,很多东西,H5 挺好的,上真机就挂了,真机好着的,换小程序就飘了,不同小程序之间也有差异,重点是仔细阅读文档。
云打包限制,云打包(打 APK) 的每天做了限制,超出次数需要购买。
虽然可能一些原生可以实现的功能 uni-app 实现不了,不过整体开发下来还行,很多的坑还是因为多端不兼容,除了写起来麻烦一点,基本上都还是有可以解决的策略