Taro项目接手

本来我是用mpvue的，也没接触过react，但人生充满惊喜，写taro的离职了所以我就临时接下了好几个taro的项目···

碰到的问题

1、yarn dev:weapp编译时报错，TARO版本不一致

错误  版本问题  Taro CLI 与本地安装的小程序框架 @tarojs/taro-weapp 版本不一致，
请确保一致
Taro CLI: 1.2.4
@tarojs/taro-weapp: 1.2.26
error Command failed with exit code 1.

因为手上好几个项目，偏偏各个项目用的框架、node版本、taro版本都有些不一样。。。所以遇到这种坑die问题
我第一反应是有没有像NVM那样的，针对taro的版本管理工具，百度了一圈貌似并没有。
然后我检查了一下项目taro版本，package.json里写的tarojs版本都是1.2.26，看了下项目node_modules里的@tarojs版本也是1.2.26，然后taro -v显示的版本是1.2.4。所以只是全局tarojs跟我的项目tarojs版本不匹配。
Emmmm~ 果断yarn global add @tarojs/[email protected] 安装完成taro -v显示的版本是1.2.26。完美~~
再yarn dev:weapp，编译完成！

2、编译运行，开发工具里报错

thirdScriptError
(0 , _index.genCompid) is not a function;at api nextTick callback function
TypeError: (0 , _index.genCompid) is not a function

原因
Tarojs 版本与项目Taro不一致
解决
更新 Taro CLI 工具
$ taro update self
更新项目中 Taro 相关的依赖
$ taro update project
但是这种方式会把原项目里低版本的Taro更新到高版本的Taro，在项目中可能会导致一些方法不支持，或者sass版本依赖问题。
所以出现方法报错或者样式错乱的问题的话，就把node_modules删掉，按上面1的方式修改全局tarojs版本跟项目tarojs版本保持一致，重新yarn

3、其他问题

1) html中通过显示空格，必须要在标签上加上`decode={true}`

2) 自定义组件正常是不能通过`className`来定义样式的，因为自定义组件是用shadow-root包装，而且自定义组件标签上没办法加class

官方解决方案：基础库版本 >= 1.9.90 可以用 externalClasses

//子级
public static externalClasses = ['css-class'];

//父级

3) 自定义组件报错

thirdScriptError
Cannot read property 'apply' of undefined; [Component] Event Handler Error @ core/components/Ico/index#(anonymous)
TypeError: Cannot read property 'apply' of undefined
    at Ico.funPrivateIXScU

表现
自定义了一个图标组件Ico，在页面上点击Ico元素，会报如上错误；
解决
Ico组件中调用了onClick事件，但是没有定义onClick；
加上
```
public static defaultProps = {
  onClick: () => {}
};
```
就可以了

4) windows10 微信PC端打不开小程序问题

具体问题描述看微信PC端（windows），有些小程序打不开? - 微信开放社区
其实微信PC客户端的兼容做的有点问题，但是官方开发小哥哥让我改小程序的语法去解决兼容问题。那好吧~~
我测试时把调试基础库下调到了2.0.4，然后会出现一个警告错误微信小程序暂不支持 getMenuButtonBoundingClientRect，根据开发文档做下兼容处理就好。

主要问题：

1、Object.values is not a function可以这样改：

// Object.values(this.subscriptions).forEach(subscription => {
    //   subscription.unsubscribe();
// });
//不用Object.values,替换成下面的
Object.keys(this.subscriptions).forEach(subscription => {
      this.subscriptions[subscription].unsubscribe();
});

2、Object.getOwnPropertyDescriptors is not a function

//自己定义一个getOwnPropertyDescriptors方法，替换Object.getOwnPropertyDescriptors就OK了
function getOwnPropertyDescriptors(obj) {
  const result = {};
    for (let key of Reflect.ownKeys(obj)) {
    result[key] = Object.getOwnPropertyDescriptor(obj, key);
  }
  return result;
}

3、还有关键就是ES6语法没有被正确解析导致的，可以在开发者工具中打开ES6转ES5,增强编译。
然后报了个错：regeneratorRuntime is not defined，可以安装依赖：

yarn add babel-plugin-transform-runtime --dev
yarn add babel-runtime

并修改config/index.js文件

plugins: [
    'transform-decorators-legacy',
    'transform-class-properties',
    'transform-object-rest-spread',
+   ['transform-runtime', {
+       "helpers": false,
+       "polyfill": false,
+       "regenerator": true,
+       "moduleName": 'babel-runtime'
+   }]
}

然后编译，又报了个错：Cannot read property 'Array' of undefined
这个错是在lodash.js中产生的,这个lodash是个坑；
但我的项目中只有一个地方用到了lodash的merge方法，在utils.ts中引入了import _ from 'lodash/fp';，在assets/index.ts中使用了return _.merge(assets, customAssets);。所以直接替换掉这个merge方法就好了

//就不使用lodash/fp的merge了,转ES5有兼容问题，自己实现一个
function isObject (value) {
  const type = typeof value
  return value !== null && (type === 'object' || type === 'function')
}
 
function merge (source, other) {
  if (!isObject(source) || !isObject(other)) {
    return other === undefined ? source : other
  }
  // 合并两个对象的 key，另外要区分数组的初始值为 []
  return Object.keys({
    ...source,
    ...other
  }).reduce((acc, key) => {
    // 递归合并 value
    acc[key] = merge(source[key], other[key])
    return acc
  }, Array.isArray(source) ? [] : {})
}

const _ = {
  merge
}

好了搞定！完美！
吐槽：我拿着国家发行的新版人民币去TX小店买辣条，店老板居然说这钱我没见过，你不能用。那我能怎么办？回去换个旧版的人民币再过来买呗。哎哟我这个折腾的！你有本事以后也只认旧版的！