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

目录

• 跨平台编程技术选型
  • 需求
    • 最终选定的技术方案:uni-app
      • 原因
  • 混合或跨平台编程相关资料
  • uni-app
    • 官网
    • 相关资料
    • 个人笔记
      • HBuilderX压缩JS用的插件是webpack的TerserPlugin
      • HBuilderX工具的目录作用分析
    • 个人经验
      • 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")
        • 异常设备信息:
        • 参考资料:
      • 191031 - 部分手机出现或低版本Chrome异常"object.assign is not a function"
        • 解决方案1:[尝试无效的]
          • 操作步骤
          • 无效的原因
        • 解决方案2:[√部分有效的]
          • 操作步骤
          • 优点
          • 缺点
          • 如何使用babel重新编译转换为ES5版本
        • 解决方案3:[理论上应该部分有效]
          • 操作步骤
          • 优点
          • 缺点
        • 解决方案4:[尝试无效的]
          • 操作步骤
          • 优点
          • 缺点
        • 解决方案5:[√有效的 最终采用的方案]
          • 操作步骤
          • 优点
          • 缺点
        • 异常设备信息:
        • 异常详情:
        • 参考资料:
      • 190917 - H5模式发布后因为网址里多一个分隔符导致的异常
        • 解决方案
  • taro
    • 官网
    • 相关资料
  • Chameleon
    • 官网
    • 相关资料
  • Weex
    • 官网
    • 相关资料
    • EROS
    • Ui
      • Weex Ui (阿里官方库)
      • BUI-WEEX
  • Flutter
    • 相关资料
  • NativeScript
    • 官网
    • 相关资料
  • React Native
    • 相关资料
  • ReactXP
  • Xamarin
  • Swift & Kotlin
    • Swift & Kotlin 参考资料
    • Kotlin
      • 跨平台编程(Multiplatform Programming)
        • 参考资料
      • Anko
      • 参考资料
    • Swift
      • 参考资料
  • j2objc
    • 官方资料
    • 相关资料

跨平台编程技术选型

需求

---

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

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

---

原因

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

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

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

  两种类型的跨平台应用：

  • 原生跨平台应用
  • 混合（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    无
  

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

  • 云平台方案，但即便平台做的再好，仍然有很多问题需要自己解决

• 2018 移动端开发的未来 | Lifecycle

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

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

  一、环境搭建
  
  二、实现原理
  
  三、 编程开发
  
  3.1、 语言
  
  3.2、界面开发
  
  3.3、状态管理
  
  3.4、原生控件
  
  四、 插件开发
  
  五、 编译和产物
  
  六、性能
  
  七、发展未来

uni-app

---

官网

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

• 开放生态 - uni-app官网

相关资料

• 对比其他框架 — Vue.js

  • 例如 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工具的目录作用分析

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"](#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对应的原始版本进行交差对比

   • 发现UNI-APP里的版本存在好多fixed by xxxxxx的额外代码.而出问题的代码行1476刚好出现在新增的代码中.

   • 源代码地址: GitHub - vuejs/vue-router at v3.0.1 Latest commit=2017年10月14日

   • 初步猜测: 是UNI-APP的开发团队在其基础上进行修复修改后仅适用的版本.

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版本](#如何使用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"
   ],
   

   参考资料:

   • 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

   疑惑点:

   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

参考资料:

• @babel/polyfill · Babel