网站建设一般流程,wordpress怎么做二级导航栏,大庆医院网站建设,做网站上传资源智慧养殖APP及小程序多端跨平台技术选型分析
1. 框架选择
------Uniapp------ 优势#xff1a;使用Vue.js语法#xff0c;学习成本较低#xff1b;一套代码#xff0c;能同时支持APP/H5/小程序#xff0c;是较为全面的跨平台框架。 开发小程序的不二选择#xff0c;…智慧养殖APP及小程序多端跨平台技术选型分析
1. 框架选择
------Uniapp------ 优势使用Vue.js语法学习成本较低一套代码能同时支持APP/H5/小程序是较为全面的跨平台框架。 开发小程序的不二选择考虑到国内小程序应用广泛之后可能会有所涉及。 劣势开发App端时性能有瓶颈但是也可以胜任大部分的场景天花板并不低。 HbuilderX开发体验较差可以使用VSCode代为开发目前已有可行方案。 可以通过vue-cli命令行创建uni-app项目使用VSCode代为开发使用网页进行H5模式查看效果使用HbuilderX进行真机调试。
采用vue-cli创建项目和使用HbuilderX可视化界面创建项目并没有本质区别cli创建的项目是传统的node项目HbuilderX创建的项目只能在HbuilderX中运行。具体可查看官网介绍。
// 全局安装vue-cli
npm install -g vue/cli// 创建node项目
npx degit dcloudio/uni-preset-vue#vite my-vue3-project------Taro------
京东团队多端统一开发解决方案个人感觉和Uniapp各有各的优势现阶段已经同时支持React和Vue在App端使用的是React Native渲染引擎。
Taro框架同样有很多人在用和Uniapp一样搜索引擎资料较多。
同Uniapp一样跨平台方案目前都不完善适合以小程序、H5为主App为辅不涉及太过复杂的交互的项目。
------Flutter------ 优势google出品渲染引擎强大性能优异上限高。 新兴技术栈反响较好在开发效率、性能以及跨平台体验上都有不错表现。 劣势最大的劣势是不支持小程序的开发。 使用的是dart开发语言虽然属于强类型语言相比js有独特的优势但是需要一定的学习成本。 ------原生开发------
官方原生支持功能强大健全性能和体验是最好的。但是学习成本高Android和IOS需要分别开发开发测试维护成本都偏高直接淘汰。
------其他------
其他App跨平台方案比如React Native、Hippy学习成本较高也没有明显优势不推荐。
------总结------
简单需求的App和小程序开发可以使用Uniapp或者Taro这两个框架目前来说是使用人数最多的小程序框架社区活跃可以满足开发需求随着硬件的越来越好H5的体验也会越来越好。
Flutter的优势在于APP端渲染性能高Android/IOS跨平台体验好。
2. Uniapp注意事项
H5正常但App异常的可能性 css异常 不支持的选择器 非H5端不支持*选择器 body的元素选择器请改为page同样div和ul和li等改为view、span和font改为text、a改为navigator、img改为image… 组件和页面样式相互影响 非H5端默认并未启用 scoped如需要隔离组件样式可以在 style 标签增加 scoped 属性H5端为了隔离页面间的样式默认启用了 scoped webview浏览器兼容性 vue页面在App端默认是被系统的webview渲染的不是手机自带浏览器是rom的webview在较老的手机上比如Android4.4、5.0或iOS8很多css是不支持的所以不要使用太新的css会导致界面异常。 注意这不意味着不能使用flexAndroid4.4也支持flex只是不要使用太新的css。 可以找Android4.4手机或使用pc模拟器实际测试下大多数国产Android模拟器都是4.4或5.0。 从 uni-app 2.5.3 起Android端支持引入腾讯x5浏览器内核可以抹平低端Android的浏览器兼容性问题详见x5使用指南 小程序不存在浏览器兼容问题它自带了一个很大的Webview。所以如果你的H5和小程序界面正常而Android低端机App界面异常且App没有使用x5引擎那基本就可以判定是因为css兼容性。 app端nvue页面不存在浏览器兼容问题它自带一个统一的原生渲染引擎不依赖webview。 Android4.4对应的webview是chrome37。各端浏览器内核的详情查阅参考关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性 原生组件层级问题 H5没有原生组件概念问题非H5端有原生组件并引发了原生组件层级高于前端组件的概念要遮挡video、map等原生组件请使用cover-view组件。 使用了非H5端不支持的API 小程序和App的js运行在jscore下而不是浏览器里没有浏览器专用的js对象比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。 如果你的代码没有直接使用这些那很可能是引入的三方库使用了这些。如果是后者去插件市场搜索替代方案。要知道非H5端的js是运行在一个独立的js core或v8下并不是运行在浏览器里。 从HBuilderX 2.6起App端新增了renderjs这是一种运行在视图层的jsvue页面通过renderjs可以操作浏览器对象进而可以让基于浏览器的库直接在uni-app的App端运行诸如echart、threejs详见renderjs 使用了非H5端不支持的vue语法受小程序自定义组件限制的写法详见不要在引用组件的地方在组件属性上直接写 style“xx”要在组件内部写样式url(//alicdn.net)等路径改为url(https://alicdn.net)因为在App端//是file协议很多人在H5端联网时使用本地测试服务地址(localhost或127.0.0.1)这样的联网地址手机App端是无法访问的请使用手机可访问的IP进行联网 3. 选择Vue3进行开发
UniApp同样支持Vue3现阶段可能会存在各种问题但是相比Vue2拥有全方位的优势。
4. 请求接口的封装
框架内自带uni.request请求方法但是为了对接口进行统一管理对请求方法进行封装同时在请求之前和返回的数据做相应的处理类似于常规Vue项目中对axios进行封装并添加拦截器。
5. Vue2和Vue3中API Promise化 的区别
// Vue 3 转 Vue 2, 在 main.js 中写入以下代码即可
function isPromise(obj) {return (!!obj (typeof obj object || typeof obj function) typeof obj.then function)
}uni.addInterceptor({returnValue(res) {if (!isPromise(res)) {return res}const returnValue [undefined, undefined]return res.then((res) {returnValue[1] res}).catch((err) {returnValue[0] err}).then(() returnValue)}
})
加粗样式
