跨平台编程技术选型

跨平台编程技术选型

需求

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

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

原因

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

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

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官网

个人笔记

HBuilderX压缩JS用的插件是webpack的`TerserPlugin`

'--minimize': `Tell webpack to minimize the bundle using the TerserPlugin.`

HBuilderX工具的目录作用分析

使用 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")

异常设备信息:

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目录改名
结果=编译会直接报错
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'
将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

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

在package.json增加

{

 "devDependencies": {

  },

+  "babel": {

+    "presets": [

+      [

+        "@babel/preset-env",

+        {

+          "useBuiltIns": "usage",

+          "corejs": 3

+        }

+      ]

+    ]

+  },

+  "browserslist": "Android>=4.0, IOS>=7"

}

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

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

最终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'

   }

 ]

]

}
修改原因:
参考解决方案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 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 CLI

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

Babel 7 升级实践 | HK Talk

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
疑惑点:
1. 为啥作为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

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

异常详情:

Uncaught TypeError: Object.assign is not a function

参考资料:

@babel/polyfill · Babel
跨平台编程相关技术资料及笔记.md的更多相关文章
1. graph slam BACK END 相关技术资料收集
  学习SLAM首推2个网站: 1. WIKI上的SLAM介绍与资源总结:http://en.wikipedia.org/wiki/Simultaneous_localization_and_mappin ...
2. 从技术小白到收获BAT研发offer，分享我的学习经验和感悟（赠送相关学习资料）
  去年秋季参加了校园招聘,有幸拿到了BAT.头条.网易.滴滴.亚马逊.华为等offer,经过研究生两年的学习积累,终于达成了自己的目标,期间也经历了很多,谨以此文,聊表感叹,也会分享很多我的Java学习 ...
3. 关于Web开发里并发、同步、异步以及事件驱动编程的相关技术
  一.开篇语我的上篇文章<关于如何提供Web服务端并发效率的异步编程技术>又成为了博客园里“编辑推荐”的文章,这是对我写博客很大的鼓励,也许是被推荐的原因很多童鞋在这篇文章里发表了评论,有 ...
4. Cloud Foundry技术资料汇总
  来自:http://cnblog.cloudfoundry.com/2012/05/ 本文是Cloud Foundry的一个简单上手指南和资料汇总,内容将根据产品的发布定期更新. Cloud Foun ...
5. BLE资料应用笔记 -- 持续更新
  BLE资料应用笔记 -- 持续更新 BLE 应用笔记小书匠简而言之,蓝牙无处不在,易于使用,低耗能和低使用成本.'让我们'更深入地探索这些方面吧. 蓝牙无处不在-,您可以在几乎每一台电话.笔记本电 ...
6. 【转】COM技术内幕（笔记）
  COM技术内幕(笔记) COM--到底是什么?--COM标准的要点介绍,它被设计用来解决什么问题?基本元素的定义--COM术语以及这些术语的含义.使用和处理COM对象--如何创建.使用和销毁COM对象 ...
7. 转：微博"收藏/赞/转发"技术资料汇总
  书籍 HTTP权威指南 <- @Fenng Introduction to Information Retrieval <- @陈利人 Lua 源码欣赏 <- @简悦云风 The A ...
8. BLE资料应用笔记 -- 持续更新（转载）
  简而言之,蓝牙无处不在,易于使用,低耗能和低使用成本.’让我们’更深入地探索这些方面吧. 蓝牙无处不在—,您可以在几乎每一台电话.笔记本电脑 .台式电脑和平板电脑中找到蓝牙.因此,您可以便利地连接键盘 ...
9. Hbase技术详细学习笔记
  注:转自 Hbase技术详细学习笔记最近在逐步跟进Hbase的相关工作,由于之前对Hbase并不怎么了解,因此系统地学习了下Hbase,为了加深对Hbase的理解,对相关知识点做了笔记,并在组内进行 ...
随机推荐
1. winfrom 自动关闭重新MessageBox.Show("Test");
  复制代码自动关闭调用 AutoClosingMessageBox.Show("添加失败", "提示", 1000); #region alert p ...
2. css优化和重排
  转:http://caibaojian.com/css-reflow-repaint.html
3. FFmpeg常用命令学习笔记（二）录制命令
  录制命令 1.FFmpeg录屏命令 ffmpeg -f avfoundation -i 1 -r 30 out.yuv -f:指定使用avfoundation采集数据 -i:指定从哪采集数据,它是一个 ...
4. dcm4che-core导包失败！ mvn pom文件导包总是失败
  原因可能是所导的包不在共有项目中,可能在个人项目中,需要添加远程仓库 <repositories> <repository> <id ...
5. 【转】深入理解Spring的两大特征（IOC和AOP）
  原文链接:https://blog.csdn.net/gloomy_114/article/details/68946881 众所周知,Spring的核心特性就是IOC和AOP,IOC(Inversi ...
6. javascript内置对象一：String
  <script> //string.split("-"),以字符"-"把string拆分成一个数组.返回一个数组 //array.joi ...
7. OFDM符号速率与子载波间隔的关系
  一般采样速率fs等于符号速率Rb: 采样速率表示采样的快慢,现有N个采样点: 类似于路程(N)除以速度(fs)等于时间(Tb): 采样一个点所需时间Tb = N/fs: 即一个子载波持续时间为Tb = ...
8. OFDM发端硬件实现原理图
  OFDM时域削峰法的详细说明可参考:https://www.cnblogs.com/achangchang/p/11037498.html
9. Spring详解------事务管理
  目录 1.事务介绍 2.事务的四个特性(ACID) 3.Spring 事务管理的核心接口 4. PlatformTransactionManager 事务管理器 5.TransactionStatu ...
10. HDU 5974 A Simple Math Problem ——（数论，大连区域赛）
  给大一的排位赛中数论的一题.好吧不会做...提供一个题解吧:http://blog.csdn.net/aozil_yang/article/details/53538854. 又学了一个新的公式..如 ...

跨平台编程相关技术资料及笔记.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:[√有效的 最终采用的方案]

操作步骤

优点

缺点

异常设备信息:

异常详情:

参考资料:

跨平台编程相关技术资料及笔记.md的更多相关文章

随机推荐

热门专题

HBuilderX压缩JS用的插件是webpack的`TerserPlugin`

如何使用`babel`重新编译转换为ES5版本

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