跨平臺編程相關技術資料及筆記.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教程