重生之新手村的我在抖音小程序的踩坑日记

前言

公司想把现有项目从H5转变到抖音小程序(项目使用vue2，通过vue-cli创建)，一开始有尝试直接把H5的项目打包成抖音小程序发版上线的，但是！！！总是有意外，首先本身H5项目的包大小超限制了，其次这个项目用了Vue的动态组件，在打包的时候就明确说了小程序不支持动态组件，所以，只能重新创建一个抖音小程序项目，听起来好像不难，毕竟都是用uniapp开发，但是但是但是，架不住从来没搞过啊...反正这个就专门拿来记录，抖音小程序开发中遇到的坑和怎么填坑吧（希望坑都能填上）。

踩坑①：

项目运行在抖音开发者工具中，控制台报错提示1："Cannot read properties of undefined (reading 'sendBeacon')"，但是整个项目里都没有找到【sendBeacon】，控制台报错提示2："Cannot set properties of undefined (setting 'query')"

        问题产生原因：错误原因是vconsole引起的，因为我们原有H5项目是有vconsole的，谁知道这小程序不支持，node_modules里面搜不到，

        解决方案：把这个依赖从项目删除就行了，或者给定特地运行环境下再使用

// #ifdef H5
import vconsole from "vconsole"
if(process.env.NODE_ENV !== 'production') {
	const vConsole = new vconsole({ maxLogNumber: 1000 });
}
// #endif

踩坑②：

uniapp的uni-mescroll（v1.3.8版本）插件在抖音小程序无法正常运行，在H5环境下，无控制台报错，可以正常运行，在微信小程序内也可能正常运行，同样的代码在抖音小程序就无法正常运行。一开始我以为是代码中有不兼容或者错误的情况，所以我就把mescroll官方的示例代码下载后通过抖音开发者工具运行，结果发现还是同样的报错且无法正常运行，我就确定不是我自己代码问题了，是这个组件本身可能在抖音小程序的兼容上没有那么完善（当然，都是我猜的）。具体报错如下：

页面效果（无法正常运行的情况下）：

正常情况下应该是从上一个页面跳转过来时自动下拉刷新列表，并展示数据，但是由于mescroll兼容性问题，在抖音开发者工具里没法正常显示数据（也只在初始化的时候无法正常显示，当你点击其他类目时又可以正常显示），所以根本问题我自我感觉就是初始化那里。

   原代码逻辑（此代码在H5以及微信小程序可以正常运行）

所需业务的.vue文件中：（抖音开发者工具不能正常运行）

        解决方案：多引入一个mixin，虽然控制台还是会报错，但是页面初始化的时候可以正常显示页面，并且能够正常运行，emmm...，不懂但是大为震惊（如果有知道原因的，可以告诉我一下哈哈哈）

踩坑③：

问题：通过接口获取到的富文本的图片在抖音小程序中显示过大，只显示图片原有大小。

具体情况：不出意外又是兼容性或者适配性的问题，同样的代码和css样式在H5、微信小程序里运行毫无异常，但是编译在抖音开发者工具后，通过css样式并不能控制到接口获取到的富文本样式。

html代码：

解决方案：

在接口拿到数据时，利用正则表达式对该富文本内容进行格式处理：

this.data= this.data.replace(/\<img/gi, '<img style="max-width:100%;height:auto" '); //处理富文本图片过大问题