踩坑记：微信小程序适配企业微信

工作原因，也参与到小程序的开发了，后续也会陆续记录小程序踩的坑，这个是第一篇

背景

产品反馈企业微信打开小程序有异常，显示白屏，截图如下

想提个小程序要支持企业微信的需求，我自己试了下，发现Android手机的企业微信打开正常的，ios的企业微信打开才有问题

问题梳理

收到这个需求后，先去做了下了解，发现官方的告知如下

企业微信移动客户端从2.5.8版本开始，已内置微信小程序基础库，开发者无需适配（部分接口需要适配），即可将微信小程序移植到企业微信上运行，同时开发者也可以针对企业微信提供的扩展接口开发出更适用于企业内部场景的小程序。

https://developers.weixin.qq.com/miniprogram/dev/dev_wxwork/

然后我又新建了一个demo的小程序，发现企业微信可以正常打开，只好确认，这不是需求，而是一个bug

首次Bug分析

既然是bug的话，首先是定位错误的log，先安装企业微信模拟器，验证看下

跑起来后，果然报错了，错误log如下

可以看到，是components/basic/button这个组件报错了，但是看不到具体错误的代码，于是多次尝试，发现移除了这行代码后，这个组件没报错了

但是其他组件，有这行代码的也报错了，不过这个代码本身是没有问题了，这个不是真实的错误；多次尝试，最终发现用模拟器无法定位到准确的错误

再次分析

ios会白屏，其实是报错了，所以还是要找到准确的错误log，思路打开了，于是打了一个开发包，在ios手机上的企业微信验证，打开调试模式，果然看到了错误log，激动

这里log可以看到报错的组件是这个component/hint/search/index.js，既然是这个组件有问题，打开js文件查看，截取部分代码如下

Component({
  externalClasses: ['class'],
  options: { virtualHost: true },
  properties: {
    hidden: Boolean,
    value: String,
    clearable: { type: Boolean, value: true },
    placeholder: { type: String, value: '' },
    placeholderStyle: String,
    disabled: Boolean,
    maxLength: { type: Number, value: 140 },
    focus: Boolean,
    wordType: Number, // 1：店铺 2：商品
    currentWordType: Number, // 当前的类型，因为observers会回调多次，这里做个容错
    searchHint: null, // 店铺跟商品静默词数组
    hintPositions: null, // 轮播的位置
    timeInterval: { type: Number, value: 3000 }, // 轮播时间间隔
    current: Number, // 当前位置
  },

初步看，没有明显的问题，再细看下，发现了嫌疑的地方了，在searchHint跟hintPositions的声明上，其他参数，都是声明为特定的类型，而这个却声明为null，于是做了下修复，修改前

searchHint: null, // 店铺跟商品静默词数组
hintPositions: null, // 轮播的位置

修改后

searchHint: Array, // 店铺跟商品静默词数组
hintPositions: Array, // 轮播的位置

跟其他地方保持一致，统一声明为类型，再次验证，果然正常了

关键是properties的变量后面跟的是属性，而data里面的变量后面是初始值，这里两个有差别

然后信心满满，高高兴兴的打个体验包给产品验收，产品反馈还是白屏，哭死，然后对比了下，机型差别如下

我验证的手机：ios 14.7.1 企业微信4.0.1 产品的手机：ios 15.3.1 企业微信 4.0.1

小程序的js，在ios设备上是运行在JavaScriptCore中，估计是不同的ios系统，JavaScriptCore的版本不同导致的，不过找到了解题思路，于是让产品大大也安装了开发包，打开调试模式，看下错误log

这里，可以看到，还有一个组件有问题pages/registerPhone/registerPhone.js，看下代码

Component({
  behaviors: [navigator],
  properties: {
    backUrl: String,
    defaultPhone: '',
  },

这里也可以明显的看到，是defaultPhone的格式错了，修复如下

  properties: {
    backUrl: String,
    defaultPhone: String,
  },

然后再次打包给产品，验收通过了

总结

这个问题，解决方案很简单，不过中间排查过程中，走了些弯路，特此记录下