智慧养殖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，会导致界面异常。

注意这不意味着不能使用flex，Android4.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，这是一种运行在视图层的js，vue页面通过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)}
})