目录
跨平台编程技术选型
## 需求
- 主要需要跨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-vue
HBuilderX - 工具 - 插件安装 - ESLint-VUE 插件
compile-es6
HBuilderX - 工具 - 插件安装 - ES6编译插件
templates
在该目录新建你常用的模板或将你常用的模板复制到该目录,新建文件时,模板列表会多出以该文件的文件名命名的模板。模板内容为该文件的内容。若不再需要该模板,请删除该文件。
个人经验
191031 - 在Android手机版本为5.1的手机出现异常"Uncaught TypeError: undefined 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.js
1476: 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版本"将编译转换好后的所有.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
替换成浏览器不兼容的所有polyfill
Babel 编译通常会排除 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
参考资料:
-
🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):
import "core-js/stable";
import "regenerator-runtime/runtime"; -
package.json 文件里的 browserslist 字段这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
现在查阅这里了解如何指定浏览器范围
babel-preset-es2015 -> babel-preset-env · Babel
By targeting specific browsers, Babel can do less work so you can ship native ES2015+ 😎!
对阿里巴巴开源的babel-plugin-import项目的注解 - JavaScript开发社区 | CTOLib码库
在 Babel 配置中引入该插件,可以针对 antd, antd-mobile, lodash, material-ui等库进行按需加载.
-
vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载,一般用于配置 webpack 等编译选项,具体规范参考:vue-config.js
支持情况HBuilderX 2.1.5 及以上版本
部分配置项会被编译配置覆盖
使用了babel但报错object.assign is not a function | zj-john's blog
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。如果想让这个方法运行,必须使用babel-polyfill
-
Object.assign
should be polyfilled. So there are two ways to solve this problem:- Add
babel-plugin-transform-object-assign
following the next steps - Use an npm module like
object-assign
the first option is better
- Add
Uncaught TypeError: Object.assign is not a function · Issue #243 · reactGo/reactGo
Google Chrome 44 get the JavaScript error
Uncaught TypeError: Object.assign is not a function
transform Object.assign for browsers lacking support by psimyn · Pull Request #257 · reactGo/reactGo
fix: … will transform to Object.assign by buble by galenyuan · Pull Request #860 · ElemeFE/mint-ui
把
...
特性降级为merge自定义合并函数, 防止Buble将其转换为Object.assign
报错:Object.assign不是一个函数怎么解决? - meto的回答 - SegmentFault 思否
vue项目使用手机浏览器访问时报错:Uncaught TypeError: Object.assign is not a function - 勿忘初心的博客 - CSDN博客
解决方案1:在 webpack.config.js 文件中,entry 入口处修改,加入即可
解决方案2:不修改webpack的情况下,在你的主入口文件头部加入,例如:app.js中加入即可
import 'babel-polyfill' 或者 require('babel-polyfill');
190917 - H5模式发布后因为网址里多一个分隔符导致的异常
异常信息:
chunk-vendors.780a8936.js:7 RangeError: Maximum call stack size exceeded at ie (chunk-vendors.780a8936.js:7) at ee (chunk-vendors.780a8936.js:7) at ne (chunk-vendors.780a8936.js:7) at Si.An.t.$emit (chunk-vendors.780a8936.js:7) at i.a.config.errorHandler (chunk-vendors.780a8936.js:1) at ie (chunk-vendors.780a8936.js:7) at ee (chunk-vendors.780a8936.js:7) at ne (chunk-vendors.780a8936.js:7) at Si.An.t.$emit (chunk-vendors.780a8936.js:7) at i.a.config.errorHandler (chunk-vendors.780a8936.js:1) chunk-vendors.780a8936.js:7 TypeError: e.__call_hook is not a function at o (chunk-vendors.780a8936.js:1) at Si.s (chunk-vendors.780a8936.js:1) at ne (chunk-vendors.780a8936.js:7) at Si.An.t.$emit (chunk-vendors.780a8936.js:7) at i.a.config.errorHandler (chunk-vendors.780a8936.js:1) at ie (chunk-vendors.780a8936.js:7) at ee (chunk-vendors.780a8936.js:7) at ne (chunk-vendors.780a8936.js:7) at Si.An.t.$emit (chunk-vendors.780a8936.js:7) at i.a.config.errorHandler (chunk-vendors.780a8936.js:1) chunk-vendors.780a8936.js:1 [system] TypeError: Cannot read property 'meta' of undefined at a.showTabBar (chunk-vendors.780a8936.js:1) at ni.get (chunk-vendors.780a8936.js:7) at ni.evaluate (chunk-vendors.780a8936.js:7) at a.showTabBar (chunk-vendors.780a8936.js:7) at a.o (chunk-vendors.780a8936.js:1) at a.t._render (chunk-vendors.780a8936.js:7) at a.i (chunk-vendors.780a8936.js:7) at ni.get (chunk-vendors.780a8936.js:7) at new ni (chunk-vendors.780a8936.js:7) at jn (chunk-vendors.780a8936.js:7)
解决方案
将打开的网址里的多出来的分隔符去掉即可.
例如:原本是
http://127.0.0.1:8888
//H5/dist/index.html
修改为http://127.0.0.1:8888/H5/dist/index.html
就正常了.只有
IP:Port
与Path
之间的分隔符
不能是重复的.Path
里假如存在重复分隔符则没有任何问题.例如:
http://127.0.0.1:8888/H5//dist//index.html
就是正常的.
## taro
官网
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
- Taro | 多端统一开发解决方案
-
- 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。
相关资料
Taro 1.3重磅发布:全面支持JSX语法和Hooks | 前端之巅
Taro 1.3 是我们酝酿最久的版本:经历了横跨 6 个月的开发时间,近 2000 次的代码提交,近百位开发者的共同参与。我们终于在今天骄傲地发布了 Taro 1.3。
Taro 1.3 的特性包括但不限于:
- 支持快应用和 QQ 小程序的开发
- 全面支持 JSX 语法和 React Hooks
- 大幅提高 H5 性能和可用性
- Taro Doctor
我们评测了5个主流跨端框架,这是它们的区别? 跨端框架全面测评,你选哪个?
- 如果不介意尝鲜和学习 DSL 的话,完全可以尝试 WePY 2.0 和 chameleon ,一个是酝酿了很久的 2.0 全新升级,一个有专门针对多端开发的多态协议。
- uni-app 和 Taro 相比起来就更像是「水桶型」框架,从工具、UI 库,开发体验、多端支持等各方面来看都没有明显的短板。
- 而 mpvue 由于开发一度停滞,现在看来各个方面都不如在小程序端基于它的 uni-app 。
## Chameleon
官网
相关资料
新框架太多学不完?chameleon 来拯救这一切 | 前端之巅
- chameleon 基于对跨端工作的积累, 规范了一套跨端标准,称之为 MVVM+ 协议;开发者只需要按照标准扩展流程,即可快速扩展任意 MVVM 架构模式的终端。并让已有项目无缝运行新端。所以如果你希望让 chameleon 快速支持淘宝小程序、React Native?只需按标准实现即可扩展。
Weex
官网
相关资料
现在开发 APP 用 weex 好还是 Vue+ NativeScript 好 - V2EX
封装 weex 的 eros 真心好用
weex 一个传说级巨坑-- 2018最新版weex踩坑指南(weex navigator 多界面跳转) - Jupiterxx的博客 - CSDN博客
2018年04月21日 12:47:10
先说结论,本人极度非常不推荐weex作为任何商用开发
EROS
eros 是基于 weex 封装面向前端的 vue 写法的解决方案,由于 app 开发的特殊性,eros 则更偏重关心于整个 app 项目。
-
但目前我们并不支持开发代码兼容 web 端
>* Android 4.1 (API 16)
>* iOS 8.0+
>* WebKit 534.30+
Ui
Weex Ui (阿里官方库)
BUI-WEEX
-
- 是一套专门为 Weex 前端开发者打造的一套高质量UI框架。为了达到更好的效果,请在 WeexSDK 0.11.0 + 上使用这套UI框架。BUI-Weex致力于为iOS和android平台提供丰富的UI组件,帮助开发者快速构建移动应用。
- 专注于 iOS, android 的效果,对于 PC浏览器的适配目前尚未做到全部兼容,可以简单的预览
Flutter
相关资料
拉美独角兽Nubank:为什么用Flutter做移动开发很酷? | 拉美独角兽Nubank:为什么用Flutter做移动开发很酷?
- Kotlin Native 是唯一不提供 UI 抽象的平台,因此它依赖于 Android 平台进行开发和测试。虽然它在我们的最低优先级标准中得分较高,而且没有明显功能限制或应用商店上架限制的风险,但在测试对专家工程师的支持时,Kotlin Native 还不太适合我们。
Kotlin + MVP + Flutter ,让你可以在自己的项目中集成 Flutter 并使用 - 掘金
demo 中的代码实现,没有考虑实际需求。我的 demo 实现,在 Android 端获取接口数据,然后转化成 json 格式,通过 Flutter 端的调用,以列表形式进行展示。
只是为了验证,android 和 flutter 混合开发,这条路是行得通的。
Flutter + Kotlin Multiplatform, Write Once Run Anywhere - 掘金
本文简单演示了如何使用Flutter和Kotlin Multiplatform来达到Write Once Run Anywhere的效果。
-
总的来说,是由于政策的限制,以及出于对性能和安全性的考虑,暂时不支持了热更新?。
-
用跨平台框架可以只用一份代码就适配所有平台,省钱又省时。
基于JS的高性能Flutter动态化框架MXFlutter - 掘金
手机QQ看点团队尝试使用 Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter 虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了
-
它是一个基于 Redux 数据管理的组装式 flutter 应用框架, 特别适用于构建中大型的复杂应用。
它的最大特点是配置式组装, 一方面将一个大的页面,对视图和数据层层拆解为互相独立的 Component|Adapter,上层负责组装,下层负责实现,另一方面将 Component|Adapter 拆分为 View,Reducer,Effect 等相互独立的上下文无关函数。所以它会非常干净,易编写、易维护、易协作。
Fish Redux 的灵感主要来自于 Redux、React、Elm、Dva 这样的优秀框架,而 Fish Redux 站在巨人的肩膀上,将集中,分治,复用,隔离做的更进一步。 GitHub - alibaba/fish-redux: An assembled flutter application framework.
fish-redux/README-cn.md at master · alibaba/fish-redux · GitHub
GitHub - reduxjs/redux: Predictable state container for JavaScript apps
## NativeScript
使用JavaScript构建真正的本机移动应用程序
NativeScript 是由 Telerik 在 2014 年发布的
官网
- 介绍 - NativeScript-Vue
- GitHub - NativeScript/android-runtime: Android runtime for NativeScript (based on V8)
Play and Try NativeScript on Your Device – {N} Playground
在线编辑器
相关资料
使用 NativeScript 基于 JavaScript 构建原生应用 - 开源中国
- 教程展示了如何开始使用 NativeScript 创建一个简单的移动应用。
- 没有成熟的APP做靠山
- Native Script理念就是复用之前的类库不论是js还是native的,这个看下官方说明就知道了,github上代码也很明确的体现了这个特点
- 学习的文章都很少,反之react native 就一堆
## React Native
相关资料
React Native开发工具推荐——VS Code及常用常用插件详解 - qq_26585943的博客 - CSDN博客
推荐了多款 Visual Studio Code 常用插件.
React Native 已死? - CSDN资讯 - CSDN博客
Airbnb 弃用了 React Native
ReactXP
Xamarin, which is a great solution for cross-platform mobile development, didn’t help us on the web. We ultimately decided to build our new client on top of React JS and React Native.
A library for building cross-platform apps - ReactXP
GitHub - microsoft/reactxp: Library for cross-platform app development.
Xamarin
微软已经开源免费Xamarin,为什么很多公司还是选择用React Native做跨平台app开发? - 知乎
当然是因为微软自己都不用 Xamarin 而用 React 啊
Xamarin, which is a great solution for cross-platform mobile development, didn’t help us on the web. We ultimately decided to build our new client on top of React JS and React Native.
A library for building cross-platform apps - ReactXP
GitHub - microsoft/reactxp: Library for cross-platform app development.
生态圈没RN友好
缺各种开源工具及库,缺经验,缺成功案例,最关键,没有大公司愿意尝试,培养不出人
Swift & Kotlin
Swift & Kotlin 参考资料
-
Swift 是一门面向协议编程的语言呢
-
如果你之前写过 Swift ,那么看完此图,分分钟就可以开启 IDE 写起 Kotlin代码, 反之亦然。
一张图,三分钟,掌握 Swift & Kotlin - Android - 掘金
语言: 到目前为止,有那么多语言,每个语言都在不同平台上展示着自己的优势。
工程师: 擅长不同的语言,在不同平台上去编码。
作为拿工具的我们,可以做到的是,掌握拿工具的姿势,在不同平台环境下只是选择更加合适的工具,去拿刀(Swift)还是拿斧头(Kotlin)而已。语言是用来驾驭的,千万不要被语言牵着鼻子走。
Kotlin
跨平台编程(Multiplatform Programming)
参考资料
平台特定的声明: Platform-Specific Declarations - Kotlin Programming Language
- Multiplatform projects are an experimental feature in Kotlin 1.2 and 1.3. All of the language and tooling features described in this document are subject to change in future Kotlin versions.
- Kotlin provides a mechanism of expected and actual declarations
官方例子: Multiplatform Project: iOS and Android - Kotlin Programming Language
Building Multiplatform Projects with Gradle - Kotlin Programming Language
Building universal frameworks
merged into a single universal (fat) binary using the lipo utility,can be used on both 32-bit and 64-bit devices.
Kotlin/Native as an Apple Framework - Kotlin Programming Language
In this tutorial, we will look at how to use Kotlin/Native code from Objective-C and Swift applications on macOS and iOS. We will build a framework from Kotlin code.
In this tutorial we'll:
- create a Kotlin Library and compile it to a framework
- examine the generated Objective-C and Swift API code
- use the framework from Objective-C and Swift
- Configure Xcode to use the framework for macOS and iOS
Anko
用Kotlin的Anko库优雅开发Android应用--Anko库详细教程 - 掘金
Anko是Kotlin官方开发的一个让开发Android应用更快速更简单的Kotlin库,并且能让我们书写的代码更简单清楚更容易阅读。它包括多个部分
Anko Commons: a lightweight library full of helpers for intents, dialogs, logging and so on;
Anko Layouts: a fast and type-safe way to write dynamic Android layouts;
Anko SQLite: a query DSL and parser collection for Android SQLite;
Anko Coroutines: utilities based on the kotlinx.coroutines library.
参考资料
Kotlin基础:白话文转文言文般的Kotlin常识 - 掘金
Kotlin 资源大全 - 学 Kotlin 看这一篇教程就够了 - 掘金
为了让大家更快了解和上手 Kotlin,掘金技术社区为大家整理了这份 Kotlin 资源大全,希望可以帮助大家用最短时间学习 Kotlin.
最后更新于 2017.5.19开源社区持续更新版本:
忘了RxJava吧—拥抱Kotlin协程(Part 1/2) - 知乎
kotlin的suspend关键字比c#/JavaScript的async await要干净的多。问下使用kotlin能避免rxjava中异常堆栈信息没用的问题吗?
基于KotlinMultiPlatform构建跨平台项目 - 掘金
Kotlin/Native 是一种将 Kotlin 代码编译为无需虚拟机就可运行的原生二进制文件的技术。 它是一个基于 LLVM 的 Kotlin 编译器后端以及 Kotlin 标准库的原生实现。
LLVM
是一种编译器基础结构,它基于具有可重新定位性的三阶段设计的概念。简单来说,这意味着可以为具有LLVM后端编译器的任何目标编译具有前端LLVM编译器的任何语言。(Swift可以编译Android工程也是基于LLVM实现)-
kotlin 很很多语言很类似,目前我知道的像js,像switf,像go,还有像go dart的协程特性,感觉就是java的高级版,集成目前语言的优点,值得一学,还有flutter也相对简单,有空可以两个都学
-
关注重点,仍然是开发出完整而且稳定的 Kotlin/ 多平台方案。
其次,则是提高 Kotlin/Native 的编译性能。
虽然尚处于预览版本,但很多人已经开始使用 Kotlin/Native 以及 Kotlin/ 多平台
:对我来说,Flutter 仍将在其小众市场中得到应用,其中 React Native 是最主要的用例:大家能够在短时间内创建出小巧简单,但又外观漂亮的应用程序。此外,当应用程序的大小不太重要,且没有后续开发计划的情况时(例如会务类应用程序),那么熟悉 Web 框架但又不怎么了解 Kotlin 或者 Swift 的开发者,确实更适合选择 Flutter。
:但在我看来,如果大家关注应用程序的逻辑,那么不妨仅在 UI 部分使用 Flutter,并选择 Kotlin/ 多平台直接编写业务逻辑部分。接下来,大家可以轻松从 Flutter 迁移至 Swift 及 Kotlin 等原生语言。例如,当初创企业获得成功,那么接下来对应用程序的使用需求就会不断增长。
Kotlin 方案提供理想的灵活性,所共享逻辑的百分比可以随时间变化,并根据您的实际需求调整。
- Kotlin 优先型 API 将带来更强大的表达能力与功能水平。
- Kotlin 目前正是 JetBrains 的高优先级项目
能够解决 Java 痛点(例如语法冗长以及可空性)等问题的面向 Java 平台的现代语言。
Swift
参考资料
j2objc
官方资料
GitHub - google/j2objc: A Java to iOS Objective-C translation tool and runtime.
- 下载最新发布版本: 1.05 GB?!!
-
- Only support client-side development
- Only support business logic code, and stay far, far away from user interface APIs