uniapp 小程序转donut多端shareVideoMessage of undefined的解决大法
看到微信官方推出的小程序 donut 多端框架,找个了uniapp demo想去体验一下,想看下能不能直接转,转出来的效果性能如何之类的。好家伙,没想到,竟然跑都跑不起来。。。。
话不多说,直接上图,白屏,根本跑不起来
[图片]
我只是用了一个简单的demo,且小程序模式我的项目运行得很正常,所以不是我的代码问题。
[图片]
但,一切换到多端项目就直接白屏,并且报错 [代码]TypeError: Cannot read property 'shareVideoMessage' of undefined[代码] 。一脸蒙圈。。。
更奇怪的是,我并没有使用 [代码]shareVideoMessage[代码] 的相关接口。。。。这瞬间就引起了我的好奇心。
看下报错堆栈,发现出错的地方是 uniapp 框架的 [代码]vendor.js[代码] 的下面的内容。 uniapp 会判断运行的 env 环境如果为 [代码]SAAASDK[代码] (小程序多端模式的时候 env 就是这个值,详情可参考小程序多端框架接口wx.getSystemInfo文档),则使用 [代码]wx.miniapp.shareVideoMessage[代码] 。否则是小程序的 [代码]wx.shareVideoMessage[代码]。
[代码]const wx$2 = initWx();
let baseInfo = wx$2.getAppBaseInfo && wx$2.getAppBaseInfo();
if (!baseInfo) {
baseInfo = wx$2.getSystemInfoSync();
}
const host = baseInfo ? baseInfo.host : null;
const shareVideoMessage = host && host.env === "SAAASDK" ? wx$2.miniapp.shareVideoMessage : wx$2.shareVideoMessage;
var shims = /* @__PURE__ */ Object.freeze({
__proto__: null,
createSelectorQuery,
getProvider,
shareVideoMessage
});
[代码]
难道 [代码]wx.miniapp.shareVideoMessage[代码] 在小程序多端模式场景,微信小程序基础库没有具体实现,所以是 undefined 的?跑去看了下微信小程序官方文档,发现是有对应的接口 wx.miniapp.shareVideoMessage 吖?那,为啥会有问题呢???
于是进一步测试,试了下新建的普通小程序项目转成多端应用模式的时候,发现 [代码]wx.miniapp[代码] 这些接口都是正常的。
[图片]
只有在使用了 uniapp 框架的项目,去console运行的的时候 [代码]wx.miniapp[代码] 出现的是 [代码]undefined[代码]
[图片]
于是我继续去看了下 uniapp 官方的代码,原来 uniapp 会去初始化小程序基础库的 wx 对象(代码位置)。只放出对应的 key 属性。然而由于这里并没有允许 [代码]miniapp[代码] 这个 key。所以导致 [代码]wx.miniapp[代码] 就没有初始化进来。
[图片]
这样整个问题就清楚了。问题原因应该就是:
uniapp 初始化的时候会判断环境是否是 [代码]SAAASDK[代码], 是的话则使用 [代码]wx.miniapp.shareVideoMessage[代码]
然而 uniapp 初始化小程序基础库的 wx 对象,但并没有放开 [代码]miniapp[代码] 这个属性,导致访问不到,就出现报错了
解决办法
因为 uniapp 官方到现在并没有处理这个问题,估计不是他们的业务场景。这里只能我自己手动解决了。
在生成的 vendor.js 的我搜索下 [代码]objectKeys[代码],然后加入了 [代码]miniapp[代码] 的属性 key 值,确保 initWx 的时候能够 保证 [代码]wx.miniapp[代码] 能够正常使用。
[图片]
最终重新编译了下,能够正常运行,十分完美!
[图片]
并且 wx.miniapp也可以运行了
[图片]
但整个过程太折腾了太麻烦了呀,不知道后续这个问题 uniapp 官方会不会解决或者出其他解决方案。
最后,还有个有意思的地方是,我去问了微信官方人员,他们反馈说这个 shareVideoMessage 接口是在今年 03 月底实现的。然后我去因为看了下 uniapp 官方代码提交,找到了具体的 commit 。发现这个使用 [代码]wx.miniapp.shareVideoMessage[代码] 的 commit 提交时间是 1月多的时候,竟然比微信官方还提前了两个月多。。。。
此外,既然使用了这个[代码]wx.miniapp.shareVideoMessage[代码] 方法,为啥不适配多几个多端的接口?以及为啥不放出 [代码]wx.miniapp[代码] 这个属性,这里的原因就不得而知了。。希望有 uniapp 框架的大佬帮忙解答下咯。