跨平台编程相关技术资料及笔记.md

时间  2019-11-13
标签 跨平台 编程 相关 技术 料及 笔记 繁體版
原文   原文链接

目录javascript

跨平台编程技术选型

## 需求

  • 主要须要跨Android,iOS平台
  • H5 属于中间态,能够做为降级显示方案,或者初期未集成时的快速发布方案.
  • 各大厂家的小程序则暂不在考虑范围.毕竟是2B的产品,假如是2C的产品,则能够考虑.

最终选定的技术方案:uni-app

缘由

  1. 副总决定的.
  2. 有配套开发工具,简化开发难度.
  3. 副总能看得懂,DEMO能直接运行修改.
  4. 生态环境较优

混合或跨平台编程相关资料

  • 2017 跨平台移动应用开发的优点与不足css

    两种类型的跨平台应用：
    • 原生跨平台应用
    • 混合（hybrid）HTML 5 跨平台应用
    • NativeScript 是由 Telerik 在 2014 年发布的
    • 对于 B2B 解决方案和业务流程自动化项目来讲，原生跨平台或 HTML5 混合应用开发技术依然可以提供足够好的性能，同时更能节省成本。

  • 2015年构建混合移动应用的流行框架优缺点对比 - 开源中国html

    框架       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    无

  • 2017混合应用开发现状 | 前端路上前端

    • 云平台方案，但即使平台作的再好，仍然有不少问题须要本身解决

  • 2018 移动端开发的将来 | Lifecyclevue

    • 移动端机器学习
    • AR & VR
    • Android 工具类应用
    • 上面六个（七个）移动端开发方向，是我总结出来的有潜力有前景的方向，各位移动开发同窗能够参考，能够选择一个方向进行深挖，相信必定会有收获。嘴上焦虑是没有意义的，最好的办法就是付出行动。

  • 全网最全 Flutter 与 React Native 深刻对比分析 - 掘金java

    1、环境搭建
    2、实现原理
    3、 编程开发
    3.一、 语言
    3.二、界面开发
    3.三、状态管理
    3.四、原生控件
    4、 插件开发
    5、 编译和产物
    6、性能
    7、发展将来node

## uni-app

官网

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H五、小程序等多个平台react

相关资料

  • 对比其余框架 — Vue.jsandroid

    • 例如 React 庞大的生态系统，或者像是 Knockout 对浏览器的支持覆盖到了 IE6。
    • React 和 Vue 有许多类似之处，它们都有：
      • 使用 Virtual DOM
      • 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
      • 将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库。

  • 跨端开发框架深度横评 - 掘金webpack

    • 若是你想多端开发，提高效率，不想踩太多坑，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工具的目录做用分析

  1. 使用 WinDirStat.exe对开发工具目录?:\Program Files\HBuilderX\Bin进行分析

    分析得出plugins目录里有几个的目录做用:

    1. launcher

      启动整个IDE相关的插件代码

      文件夹大小: 173MB

    2. uniapp-cli

      有关UNI-APP开发编译相关的命令行程序相关代码.

      文件夹大小: 155MB

    3. node_modules

      被plugins\launcher在根目录的package.json显性依赖的文件夹.

      虽然感受文件夹大小有点小.

      "extensionDependencies":["node_modules"]

      文件夹大小: 37MB

    4. jre

      多是为了IDE能正常运行JAVA插件功能而内置的JAVA运行时.

      文件夹大小: 67MB

    5. eslint-vue

      HBuilderX - 工具 - 插件安装 - ESLint-VUE 插件

    6. compile-es6

      HBuilderX - 工具 - 插件安装 - ES6编译插件

    7. templates

      在该目录新建你经常使用的模板或将你经常使用的模板复制到该目录，新建文件时，模板列表会多出以该文件的文件名命名的模板。模板内容为该文件的内容。若再也不须要该模板，请删除该文件。

我的经验

191031 - 在Android手机版本为5.1的手机出现异常"Uncaught TypeError: undefined is not a function"

解决方案: 参考191031 - 部分手机出现或低版本Chrome异常"object.assign is not a function"
异常设备信息:
  1. Android 5.1 华为,VIVO

Android 5.1;
AppleWebKit/537.36(KHTML,like Geoko)
Mobile Safari/537.36

参考资料:

  1. 在部分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:[尝试无效的]
操做步骤

  1. HBuilderX - 右键当前项目 - 使用命令行窗口打开所在目录

  2. 在>符号后执行"d:\Program Files\HBuilderX\Bin\plugins\npm\npm.cmd" init -y

  3. 在>符号后执行"d:\Program Files\HBuilderX\Bin\plugins\npm\npm.cmd" i babel-plugin-transform-object-assign

  4. 在当前项目的main.js里增长如下代码

    import Vue from 'vue'
import App from './App'

// 如下为新添加的代码
require('./node_modules/core-js/fn/object/assign')

Vue.config.productionTip = false

  5. 从新编译打包便可.

无效的缘由

  1. 编译后[始终]会添加代码到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'

  2. 而后崩溃的地方就在import 'uni-h5';

  3. 致使用户在项目中自定义添加的代码的执行时机 太晚,致使修复失败.

解决方案2:[√部分有效的]
操做步骤

  1. 经过使用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 (基于构建工具使用))

  2. 经过上Github下载VUE-ROUTER对应的原始版本进行交差对比

  3. 尝试把vue-router.esm.js移动到别的文件夹

    结果=编译会直接报错

  4. 尝试将packages\h5-vue-router目录更名

    结果=编译会直接报错

    1. 报错文件D:/Program Files/HBuilderX/Bin/plugins/uniapp-cli/node_modules/@dcloudio/uni-h5/dist/index.umd.min.js

      代码中有直接引用require("vue-router")

    2. 报错文件"D:\Program Files\HBuilderX\Bin\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\src\core\service\plugins\index.js"文件里有此文件引用

      import VueRouter from 'vue-router'

  5. 将vue-router.esm.js文件使用babel从新编译转换为ES5版本

  6. 将转换好的vue-router.esm.js替换原目录里的同名文件

  7. 再次编译UNI-APP项目 和 发布便可

  8. 在Chrome 44版本打开测试,发现问题已经成功解决.

优势
  1. 可将该JS文件里全部的代码都转换成ES5版本,一次性"可能出现的同类型低版本不兼容致使的异常"
缺点
  1. 略微繁琐
  2. 没法解决项目中其它JS文件里"可能出现的同类型低版本不兼容致使的异常"
如何使用babel从新编译转换为ES5版本

  1. 建立YeTest目录

  2. 将plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\h5-vue-router\vue-router.esm.js 文件复制到YeTest\src子目录

  3. 执行命令npm init

  4. 执行命令npm install --save-dev @babel/core @babel/cli

    参考资料:Babel - Installation

  5. 在package.json增长

    {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

  6. 执行命令npm install @babel/preset-env --save-dev

    参考资料:@babel/preset-env · Babel - CoreJS

  7. 在package.json增长

    {
 "devDependencies": {
  },
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "useBuiltIns": "usage",
+          "corejs": 3
+        }
+      ]
+    ]
+  },
+  "browserslist": "Android>=4.0, IOS>=7"
}

  8. 执行命令npm install core-js@3 --save

    参考资料:@babel/preset-env · Babel - useBuiltIns

  9. 最终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"
  }
}

  10. 执行命令npm run build

  11. 则lib目录下的文件就是转换后的版本.

解决方案3:[理论上应该部分有效]
操做步骤
  1. 通过尝试解决方案2可知道问题出在哪一个具体的JS
  2. 将JS里具体使用到的代码直接改写为ES5版本可用的代码函数便可.
优势
  1. 简单粗暴
缺点
  1. 没法解决可能出现的同类型低版本不兼容致使的异常.
  2. 没法解决项目中其它JS文件里"可能出现的同类型低版本不兼容致使的异常"
解决方案4:[尝试无效的]
操做步骤

  1. 不修改原有UNI-APP的原有编译流程

  2. 直接HBuilderX - 发布 - 网站-H5手机版本发行

  3. 将最终发布的全部文件复制到YeTest\src目录

    参考解决方案2的"如何使用babel从新编译转换为ES5版本"

  4. 将编译转换好后的全部.JS文件覆盖同名文件便可

  5. 将node_modules目录也要上传到服务器

  6. 结果使用Chrome 44版本出现异常:Uncaught ReferenceError: require is not defined

优势

  1. 一次性解决项目中全部JS文件里"可能出现的同类型低版本不兼容致使的异常"

  2. 不修改原有UNI-APP的原有编译流程

    只在最终发布后的H5版本基础上再次处理便可.

缺点

  1. 增长下发文件数量

  2. 略微增长原JS文件的大小

  3. 须要使用JS 相关 压缩minify工具再次压缩.

    本来发布的JS文件都压缩的状态, 从新编译转换后被格式化了,增长了大量换行和空格.

  4. 发布时须要将node_modules目录也要上传到服务器

    node_modules目录尺寸很大,很杂

解决方案5:[√有效的 最终采用的方案]
操做步骤

  1. 使用 VSCode 打开D:\Program Files\HBuilderX\Bin\plugins\uniapp-cli目录

  2. 修改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'
   }
 ]
]
}

    修改缘由:

    1. 参考解决方案1:无效的缘由

    2. 编译后[始终]会添加代码到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'

    3. 查看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}';`
    }

    4. 发现本来的H5模式下配置useBuiltIns永远等于usage

    5. 因此只要修改uniapp-cli\babel.config.js让其等于entry便可间接的添加@babel/polyfill 从而解决兼容性问题.

    参考资料:

    1. 浏览器兼容性 | Vue CLI

      添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法语法转换和根据使用状况检测 polyfill。

    2. Babel 7 升级实践 | HK Talk

      usage 会根据配置的浏览器兼容，以及你代码中用到的 API 按需添加

      entry会自动根据 browserslist 替换成浏览器不兼容的全部 polyfill

      Babel 编译一般会排除 node_modules，因此 "useBuiltIns": "usage" 存在风险，可能没法为依赖包添加必要的 polyfill。

  3. 修改browserslist兼容性uniapp-cli\package.json

    原始值:

    "browserslist": [
"last 3 versions",
"Android >= 4.4",
"ios >= 8"
],

    修改后

    "browserslist": [
"Android >= 4.0",
"ios >= 7"
],

    参考资料:

    疑惑点:

    1. 为啥做为uniapp-cli项目的package.json会最终影响到 我的的项目 发布时的browserslist配置.

      初步猜想: VUE-CLI 工具向上找配置文件时,最终找到了它? 那么有没有可能试用 我的项目 里的配置?

  4. 从新编译打包发布再用Chrome 44 版本测试便可.
  5. 结果再也不白屏,能正常加载数据,

  6. 惋惜UNI-APP的picker内置组件没法使用,点击没有任何效果,并且没有任何报错信息.

优势

  1. 不须要修改项目自己源码

    只须要修改的是编译工具的源码和配置便可.

  2. 理论上一次性解决项目中全部JS文件里"可能出现的同类型低版本不兼容致使的异常"

  3. 一次修改,将来的项目也能一劳永逸

    除非HBuilderX 发布新版本,而后修改的源码和配置被覆盖了.

缺点
  1. 将来HBuilderX 发布新版本会致使修改的源码和配置被覆盖
  2. 须要修改的地方不在项目可控范畴
  3. 须要修改的是编译工具的源码和配置
  4. 修改后的反作用未知
  5. 为啥修改了能生效的具体代码做用原理未知
  6. 惋惜UNI-APP的picker内置组件没法使用,点击没有任何效果,并且没有任何报错信息.
异常设备信息:

  1. 每天模拟器 v3.2.7 Android v6.0.1

    下肢地址: 每天模拟器官网

  2. Chrome 44

    下载地址:chrome_win64_stable_44.0.2403.107离线安装包下载

异常详情:

Uncaught TypeError: Object.assign is not a function

参考资料:

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)
解决方案

  1. 将打开的网址里的多出来的分隔符去掉便可.

    例如:本来是http://127.0.0.1:8888//H5/dist/index.html 修改成http://127.0.0.1:8888/H5/dist/index.html就正常了.

  2. 只有 IP:Port 与 Path 之间的分隔符不能是重复的.

  3. Path 里假如存在重复分隔符则没有任何问题.

    例如:http://127.0.0.1:8888/H5//dist//index.html 就是正常的.

## taro

官网

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。

相关资料

  • 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

官网

相关资料

EROS

eros 是基于 weex 封装面向前端的 vue 写法的解决方案，因为 app 开发的特殊性，eros 则更偏重关心于整个 app 项目。

  • EROS

    但目前咱们并不支持开发代码兼容 web 端
    >* Android 4.1 (API 16)
    >* iOS 8.0+
    >* WebKit 534.30+

Ui

Weex Ui (阿里官方库)

BUI-WEEX

  • BUI-WEEX

    • 是一套专门为 Weex 前端开发者打造的一套高质量UI框架。为了达到更好的效果，请在 WeexSDK 0.11.0 + 上使用这套UI框架。BUI-Weex致力于为iOS和android平台提供丰富的UI组件，帮助开发者快速构建移动应用。
    • 专一于 iOS, android 的效果，对于 PC浏览器的适配目前还没有作到所有兼容，能够简单的预览

Flutter

相关资料

## NativeScript

使用JavaScript构建真正的本机移动应用程序
NativeScript 是由 Telerik 在 2014 年发布的

官网

相关资料

  • 使用 NativeScript 基于 JavaScript 构建原生应用 - 开源中国

    • 教程展现了如何开始使用 NativeScript 建立一个简单的移动应用。
    • 没有成熟的APP作靠山
    • Native Script理念就是复用以前的类库不管是js仍是native的，这个看下官方说明就知道了，github上代码也很明确的体现了这个特色
    • 学习的文章都不多，反之react native 就一堆

## 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

Swift & Kotlin

Swift & Kotlin 参考资料

  1. Swift vs. Kotlin 漫谈系列之接口 - 简书

    Swift 是一门面向协议编程的语言呢

  2. Swift is like Kotlin

    若是你以前写过 Swift ，那么看完此图，分分钟就能够开启 IDE 写起 Kotlin代码， 反之亦然。

  3. 一张图，三分钟，掌握 Swift & Kotlin - Android - 掘金

    语言： 到目前为止，有那么多语言，每一个语言都在不一样平台上展现着本身的优点。

    工程师： 擅长不一样的语言，在不一样平台上去编码。
    做为拿工具的咱们，能够作到的是，掌握拿工具的姿式，在不一样平台环境下只是选择更加合适的工具，去拿刀（Swift）仍是拿斧头（Kotlin）而已。语言是用来驾驭的，千万不要被语言牵着鼻子走。

Kotlin

跨平台编程(Multiplatform Programming)

参考资料

  1. 平台特定的声明: 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

  2. 官方文档: Multiplatform Projects - Kotlin Programming Language

  3. 官方例子: Multiplatform Project: iOS and Android - Kotlin Programming Language

  4. 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.

  5. 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

  1. 用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.

参考资料

  1. Kotlin基础：白话文转文言文般的Kotlin常识 - 掘金

  2. Kotlin 资源大全 - 学 Kotlin 看这一篇教程就够了 - 掘金

    为了让你们更快了解和上手 Kotlin，掘金技术社区为你们整理了这份 Kotlin 资源大全，但愿能够帮助你们用最短期学习 Kotlin.
    最后更新于 2017.5.19

    开源社区持续更新版本:

    1. GitHub - KotlinBy/awesome-kotlin: A curated list of awesome Kotlin related stuff Inspired by awesome-java.
    2. Kotlin is Awesome!

  3. 忘了RxJava吧—拥抱Kotlin协程（Part 1/2） - 知乎

    kotlin的suspend关键字比c#/JavaScript的async await要干净的多。问下使用kotlin能避免rxjava中异常堆栈信息没用的问题吗？

  4. 基于KotlinMultiPlatform构建跨平台项目 - 掘金

    Kotlin/Native 是一种将 Kotlin 代码编译为无需虚拟机就可运行的原生二进制文件的技术。 它是一个基于 LLVM 的 Kotlin 编译器后端以及 Kotlin 标准库的原生实现。

    LLVM是一种编译器基础结构，它基于具备可从新定位性的三阶段设计的概念。简单来讲，这意味着能够为具备LLVM后端编译器的任何目标编译具备前端LLVM编译器的任何语言。(Swift能够编译Android工程也是基于LLVM实现)

  5. 9012年，铁汁你为何还不上手Kotlin？ - 掘金

    kotlin 很不少语言很相似，目前我知道的像js，像switf，像go，还有像go dart的协程特性，感受就是java的高级版，集成目前语言的优势，值得一学，还有flutter也相对简单，有空能够两个都学

  6. Kotlin为跨端开发带来哪些影响？

    • 关注重点，仍然是开发出完整并且稳定的 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

官方资料

相关资料

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程