目录
- 跨平台编程技术选型
- 需求
- 混合或跨平台编程相关资料
- uni-app
- taro
- Chameleon
- Weex
- Flutter
- NativeScript
- React Native
- ReactXP
- Xamarin
- Swift & Kotlin
- j2objc
跨平台编程技术选型
需求
- 主要需要跨Android,iOS平台
- H5 属于中间态,可以作为降级显示方案,或者初期未集成时的快速发布方案.
- 各大厂家的小程序则暂不在考虑范围.毕竟是2B的产品,假如是2C的产品,则可以考虑.
最终选定的技术方案:uni-app
原因
- 副总决定的.
- 有配套开发工具,简化开发难度.
- 副总能看得懂,DEMO能直接运行修改.
- 生态环境较优
混合或跨平台编程相关资料
-
两种类型的跨平台应用：
- 原生跨平台应用
- 混合（hybrid）HTML 5 跨平台应用
- NativeScript 是由 Telerik 在 2014 年发布的
- 对于 B2B 解决方案和业务流程自动化项目来说，原生跨平台或 HTML5 混合应用开发技术依然能够提供足够好的性能，同时更能节省成本。
-
2015年构建混合移动应用的流行框架优缺点对比 – 开源中国
框架 Native体验 依赖 社区 文档 工具
Ionic 7/10 AngularJS (可选) 9/10 8/10 强大的 CLI, Ionic SDK
Onsen UI 6/10 AngularJS (可选) 4/10 9/10 Monaca Cloud IDE(有免费方案)
Framework 7 8/10 只需HTML, CSS 和JS 6/10 8/10 无
React Native 8/10 React 8/10 5/10 Chrom的扩展工具React Developer Tools
jQuery Mobile 3/10 jQuery 8/10 5/10 无
Native Script 8/10 TypeScript 5/10 9/10 免费的 CLI, 其他的付费可选
Famous 7/10 WebGL, AngularJS 3/10 5/10 无 -
- 云平台方案，但即便平台做的再好，仍然有很多问题需要自己解决
-
- 移动端机器学习
- AR & VR
- Android 工具类应用
- 上面六个（七个）移动端开发方向，是我总结出来的有潜力有前景的方向，各位移动开发同学可以参考，可以选择一个方向进行深挖，相信一定会有收获。嘴上焦虑是没有意义的，最好的办法就是付出行动。
-
全网最全 Flutter 与 React Native 深入对比分析 – 掘金
一、环境搭建
二、实现原理
三、 编程开发
3.1、 语言
3.2、界面开发
3.3、状态管理
3.4、原生控件
四、 插件开发
五、 编译和产物
六、性能
七、发展未来
uni-app
官网
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台
相关资料
-
- 例如 React 庞大的生态系统，或者像是 Knockout 对浏览器的支持覆盖到了 IE6。
- React 和 Vue 有许多相似之处，它们都有：
-
- 使用 Virtual DOM
-
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
-
- 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
-
- 如果你想多端开发，提升效率，不想踩太多坑，uni-app相对更完善。
- 如果你主要为了微信端和H5端，那么uni-app和taro都可以
- 如果你主要需要跨App端，uni-app兼容性更好，其他框架的App端差异过大
个人笔记
HBuilderX压缩JS用的插件是webpack的TerserPlugin
'--minimize': `Tell webpack to minimize the bundle using the TerserPlugin.`
HBuilderX工具的目录作用分析
-
使用
WinDirStat.exe对开发工具目录?:\Program Files\HBuilderX\Bin进行分析分析得出
plugins目录里有几个的目录作用:-
launcher启动整个IDE相关的插件代码
文件夹大小: 173MB
-
uniapp-cli有关UNI-APP开发编译相关的命令行程序相关代码.
文件夹大小: 155MB
-
node_modules被
plugins\launcher在根目录的package.json显性依赖的文件夹.虽然感觉文件夹大小有点小.
"extensionDependencies":["node_modules"]文件夹大小: 37MB
-
jre可能是为了IDE能正常运行JAVA插件功能而内置的JAVA运行时.
文件夹大小: 67MB
-
eslint-vueHBuilderX – 工具 – 插件安装 – ESLint-VUE 插件
-
compile-es6HBuilderX – 工具 – 插件安装 – ES6编译插件
-
templates在该目录新建你常用的模板或将你常用的模板复制到该目录，新建文件时，模板列表会多出以该文件的文件名命名的模板。模板内容为该文件的内容。若不再需要该模板，请删除该文件。
-
个人经验
191031 – 在Android手机版本为5.1的手机出现异常"Uncaught TypeError: undefined is not a function"
解决方案: 参考[191031 – 部分手机出现或低版本Chrome异常"object.assign is not a function"](#191031 – 部分手机出现或低版本Chrome异常"object.assign is not a function")
异常设备信息:
- Android 5.1 华为,VIVO
Android 5.1;
AppleWebKit/537.36(KHTML,like Geoko)
Mobile Safari/537.36
参考资料:
-
在部分x5内核的浏览器上会报Uncaught TypeError: undefined is not a function · Issue #3069 · NervJS/taro
旧机型自带的浏览器和在qq浏览器app下，浏览的页面是空白页，通过spy-debugger得到错误:Uncaught TypeError: undefined is not a function.
可以继续升级试试。有部分代码调用了findIndex，已经去掉。
191031 – 部分手机出现或低版本Chrome异常"object.assign is not a function"
解决方案1:[尝试无效的]
操作步骤
-
HBuilderX – 右键当前项目 – 使用命令行窗口打开所在目录
-
在>符号后执行
"d:\Program Files\HBuilderX\Bin\plugins\npm\npm.cmd" init -y -
在>符号后执行
"d:\Program Files\HBuilderX\Bin\plugins\npm\npm.cmd" i babel-plugin-transform-object-assign -
在当前项目的
main.js里增加以下代码import Vue from 'vue'
import App from './App'// 以下为新添加的代码
require('./node_modules/core-js/fn/object/assign')Vue.config.productionTip = false -
重新编译打包即可.
无效的原因
-
编译后[始终]会添加代码到
main.js文件的第一行.//以下为编译后[始终]添加到第一行的代码.
//node_modules\@dcloudio\vue-cli-plugin-uni\lib\configure-webpack.js:215行
import 'uni-pages';import 'uni-h5';import '@dcloudio/uni-stat';// 以下为用户在项目中自定义添加的代码
import './node_modules/core-js/fn/object/assign';
import './node_modules/babel-plugin-transform-object-assign/lib/index';import Vue from 'vue'
import App from './App' -
然后崩溃的地方就在
import 'uni-h5'; -
导致用户在项目中自定义添加的代码的执行时机 太晚,导致修复失败.
解决方案2:[√部分有效的]
操作步骤
-
通过使用Chrome 44版本调试得知崩溃的代码为VUE-H5-ROUTER组件导致的:
-
plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\h5-vue-router\vue-router.js1476: record = Object.assign({}, record); -
对应的实际文件名为
vue-router.esm.js(ES Module (基于构建工具使用))
-
-
通过上Github下载VUE-ROUTER对应的原始版本进行交差对比
-
发现UNI-APP里的版本存在好多
fixed by xxxxxx的额外代码.而出问题的代码行1476刚好出现在新增的代码中. -
源代码地址: GitHub – vuejs/vue-router at v3.0.1 Latest commit=2017年10月14日
-
初步猜测: 是UNI-APP的开发团队在其基础上进行修复修改后仅适用的版本.
-
-
尝试把
vue-router.esm.js移动到别的文件夹结果=编译会直接报错
-
尝试将
packages\h5-vue-router目录改名结果=编译会直接报错
-
报错文件
D:/Program Files/HBuilderX/Bin/plugins/uniapp-cli/node_modules/@dcloudio/uni-h5/dist/index.umd.min.js代码中有直接引用
require("vue-router") -
报错文件
"D:\Program Files\HBuilderX\Bin\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\src\core\service\plugins\index.js"文件里有此文件引用import VueRouter from 'vue-router'
-
-
将
vue-router.esm.js文件使用babel重新编译转换为ES5版本 -
将转换好的
vue-router.esm.js替换原目录里的同名文件 -
再次编译UNI-APP项目 和 发布即可
-
在Chrome 44版本打开测试,发现问题已经成功解决.
优点
- 可将该JS文件里所有的代码都转换成ES5版本,一次性"可能出现的同类型低版本不兼容导致的异常"
缺点
- 略微繁琐
- 无法解决项目中其它JS文件里"可能出现的同类型低版本不兼容导致的异常"
如何使用babel重新编译转换为ES5版本
-
创建
YeTest目录 -
将
plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\h5-vue-router\vue-router.esm.js文件复制到YeTest\src子目录 -
执行命令
npm init -
执行命令
npm install --save-dev @babel/core @babel/cli参考资料:Babel – Installation
-
在package.json增加
{
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.0.0"
}
} -
执行命令
npm install @babel/preset-env --save-dev -
在package.json增加
{
"devDependencies": {
},
+ "babel": {
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "useBuiltIns": "usage",
+ "corejs": 3
+ }
+ ]
+ ]
+ },
+ "browserslist": "Android>=4.0, IOS>=7"
} -
执行命令
npm install core-js@3 --save -
最终package.json内容为
{
"name": "yetest",
"version": "1.0.0",
"description": "",
"main": "vue-router.esm.js",
"scripts": {
"build": "babel src -d lib",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3"
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
},
"browserslist": "Android>=4.0, IOS>=7",
"dependencies": {
"core-js": "^3.3.6"
}
} -
执行命令
npm run build -
则
lib目录下的文件就是转换后的版本.
解决方案3:[理论上应该部分有效]
操作步骤
- 经过尝试解决方案2可知道问题出在哪个具体的JS
- 将JS里具体使用到的代码直接改写为ES5版本可用的代码函数即可.
优点
- 简单粗暴
缺点
- 无法解决可能出现的同类型低版本不兼容导致的异常.
- 无法解决项目中其它JS文件里"可能出现的同类型低版本不兼容导致的异常"
解决方案4:[尝试无效的]
操作步骤
-
不修改原有UNI-APP的原有编译流程
-
直接HBuilderX – 发布 – 网站-H5手机版本发行
-
将最终发布的所有文件复制到
YeTest\src目录参考解决方案2的"[如何使用
babel重新编译转换为ES5版本](#如何使用babel重新编译转换为ES5版 本)" -
将编译转换好后的所有.JS文件覆盖同名文件即可
-
将
node_modules目录也要上传到服务器 -
结果使用Chrome 44版本出现异常:
Uncaught ReferenceError: require is not defined
优点
-
一次性解决项目中所有JS文件里"可能出现的同类型低版本不兼容导致的异常"
-
不修改原有UNI-APP的原有编译流程
只在最终发布后的H5版本基础上再次处理即可.
缺点
-
增加下发文件数量
-
略微增加原JS文件的大小
-
需要使用JS 相关 压缩minify工具再次压缩.
原本发布的JS文件都压缩的状态, 重新编译转换后被格式化了,增加了大量换行和空格.
-
发布时需要将
node_modules目录也要上传到服务器node_modules目录尺寸很大,很杂
解决方案5:[√有效的 最终采用的方案]
操作步骤
-
使用 VSCode 打开
D:\Program Files\HBuilderX\Bin\plugins\uniapp-cli目录 -
修改babel配置项
uniapp-cli\babel.config.js修改前
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
}
]
]
}修改后
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry'
}
]
]
}修改原因:
-
编译后[始终]会添加代码到
main.js文件的第一行.//以下为编译后[始终]添加到第一行的代码.
//node_modules\@dcloudio\vue-cli-plugin-uni\lib\configure-webpack.js:215行
import 'uni-pages';import 'uni-h5';import '@dcloudio/uni-stat';import Vue from 'vue' -
查看
node_modules\@dcloudio\vue-cli-plugin-uni\lib\configure-webpack.js:215行let useBuiltIns = 'entry'
if (process.env.UNI_PLATFORM === 'h5') { // 兼容旧版本 h5
useBuiltIns = 'usage'
try {
const babelConfig = require(path.resolve(process.env.UNI_CLI_CONTEXT, 'babel.config.js'))
useBuiltIns = babelConfig.presets[0][1].useBuiltIns
} catch (e) {}
}
let beforeCode = ''
if (process.env.UNI_PLATFORM === 'h5') {
beforeCode = (useBuiltIns === 'entry' ? `import '@babel/polyfill';` : '') +
`import 'uni-pages';import 'uni-${process.env.UNI_PLATFORM}';`
} -
发现原本的H5模式下配置
useBuiltIns永远等于usage -
所以只要修改
uniapp-cli\babel.config.js让其等于entry即可间接的添加@babel/polyfill从而解决兼容性问题.
参考资料:
-
添加到
vue.config.js中的transpileDependencies选项。这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。 -
usage会根据配置的浏览器兼容，以及你代码中用到的 API 按需添加entry会自动根据browserslist替换成浏览器不兼容的所有polyfillBabel 编译通常会排除 node_modules，所以
"useBuiltIns": "usage"存在风险，可能无法为依赖包添加必要的polyfill。
-
修改
browserslist兼容性uniapp-cli\package.json原始值:
"browserslist": [
"last 3 versions",
"Android >= 4.4",
"ios >= 8"
],修改后
"browserslist": [
"Android >= 4.0",
"ios >= 7"
],参考资料:
- GitHub – browserslist/browserslist: 璉 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
defaults: Browserslist’s default browsers (> 0.5%, last 2 versions, Firefox ESR, not dead).- 浏览器兼容性 | Vue CLI
疑惑点:
-
为啥作为
uniapp-cli项目的package.json会最终影响到 个人的项目 发布时的browserslist配置.初步猜测: VUE-CLI 工具向上找配置文件时,最终找到了它? 那么有没有可能试用 个人项目 里的配置?
-
重新编译打包发布再用Chrome 44 版本测试即可.
-
结果不再白屏,能正常加载数据,
-
可惜UNI-APP的
picker内置组件无法使用,点击没有任何效果,而且没有任何报错信息.
优点
-
不需要修改项目本身源码
只需要修改的是编译工具的源码和配置即可.
-
理论上一次性解决项目中所有JS文件里"可能出现的同类型低版本不兼容导致的异常"
-
一次修改,未来的项目也能一劳永逸
除非HBuilderX 发布新版本,然后修改的源码和配置被覆盖了.
缺点
- 未来HBuilderX 发布新版本会导致修改的源码和配置被覆盖
- 需要修改的地方不在项目可控范畴
- 需要修改的是编译工具的源码和配置
- 修改后的副作用未知
- 为啥修改了能生效的具体代码作用原理未知
- 可惜UNI-APP的
picker内置组件无法使用,点击没有任何效果,而且没有任何报错信息.
异常设备信息:
-
天天模拟器 v3.2.7 Android v6.0.1
下肢地址: 天天模拟器官网
-
Chrome 44
异常详情:
Uncaught TypeError: Object.assign is not a function
