前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >踩坑记:微信小程序适配企业微信

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

作者头像
韦东锏
发布2022-04-11 17:51:01
2.8K0
发布2022-04-11 17:51:01
举报
文章被收录于专栏:Android码农

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

背景

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

想提个小程序要支持企业微信的需求,我自己试了下,发现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文件查看,截取部分代码如下

代码语言:javascript
复制
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, // 当前位置
  },

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

代码语言:javascript
复制
searchHint: null, // 店铺跟商品静默词数组
hintPositions: null, // 轮播的位置

修改后

代码语言:javascript
复制
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,看下代码

代码语言:javascript
复制
Component({
  behaviors: [navigator],
  properties: {
    backUrl: String,
    defaultPhone: '',
  },

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

代码语言:javascript
复制
  properties: {
    backUrl: String,
    defaultPhone: String,
  },

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

总结

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-02-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Android码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 问题梳理
  • 首次Bug分析
  • 再次分析
  • 总结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档