uniapp之快手小程序踩坑纪要-五八三

题主当前项目的配置：

uniapp：2.0.1-alpha-36920221121001
vue: 2.6.11
hbuidler: 3.8.4
mp开发工具: 1.32.1

1. 设置小程序appid

hbuilder可以在配置文件中输入appid，但是实际小程序开发工具中需要反复输入appid才能进行扫码预览和真机预览。

解决： uniapp的配置文件manifest.json中手动加入 (hello uniapp的demo中没有对应的字段)

    "mp-kuaishou" : {
        "appid": "ksxxxxxxxxxxxxxxx",
        "usingComponents" : true
    }

2. unzip解压图片包不完整的问题(安卓)

项目中将一个zip文件使用downloadFile + unzip获取一系列图片资源，但是发现安卓设备解压出来的图片总是不完整，具体表现为：图片的底部会出现不定高度的缺失。但是ios设备表现正常。

解决: 手动下载文件并逐个存储。(存的时候需要使用await保证依次执行，否则会大大增加耗时)

//package.json ->     "jszip": "^3.10.1",
uni.request({
    url: 'xxxxxxxxx',
    method: 'GET',
    responseType: 'arraybuffer', //貌似并没有用
    success: (img:any)=> {
        JSZip.loadAsync(Buffer.from(img.data, 'base64')).then(async (res)=> {
            for (const fileName of Object.keys(res.files)) {
                let file = res.files[fileName]
                await file.async('arraybuffer').then(async buffer=> {
                    let path = `${dir}/${fileName}`
                    await this.writeFileToPath(buffer, path)
                })
            }
        });
    }, fail: err=> {
        console.log(`fetch zip fail`, this.remote_url, err)
    }
})

3. mkdir失败

不管是安卓设备还是ios都会mkdir失败。
首先快手的默认临时目录为: kwfile://tmp 。这个可以在开发工具的项目详情-文件系统中看到。用户目录为 kwfile://usr 。但是实际项目中我们想要创建一个tmp/xxx文件夹的时候，真机预览和体验版会返回错误。

解决
通过unzip解压路径来绕过这个问题，下载一个很小的zip文件，将解压路径指定为需要创建的目录即可。

ps: 三级目录可能无法直接创建（kwfile://tmp/abc可以解压，但kwfile://tmp/abc/dfe可能无法解压）

    _mkdir2 (dir:string) {
        return new Promise(async (resolve)=> {
            uni.downloadFile({
                url: 'xxxxx.zip',
                success: (res)=> {
                    fs.unzip({
                        zipFilePath: res.tempFilePath,
                        targetPath: dir,
                        success:(res)=> {
                            console.log(`unzip zip success for mkdir`, dir, res)
                            resolve(true)
                        },
                        fail:(err)=> {
                            console.log(`unzip zip fail for mkdir`, dir, err)
                            resolve(!true)
                        },
                    })
                },
                fail: (err)=> {
                    console.log(`download zip file for mkdir fail`, err)
                    resolve(!true)
                }
            })
        })
    }

4. innnerAudioContext播放buffer/base64数据

在H5上我们可以给audio.src赋值base64字符串来播放音频，快手开发工具上也是可以播放的，但是当真机预览的时候，会提示播放不了。base64字符串中的斜杠会被认为是文件路径…

还有一个需要注意的问题，ios设备上会偶尔无法解析base64的音频文件，audiocontext播放这些音频的时候也不会报错，duration时长显示为0。可以设置base64对应的临时文件后缀为mp3来解决。

解决
将base64写入文件，让audio.src指向临时文件地址

  let tmpfilePath = "kwfile://tmp/" + Date.now() + '.mp3';
  this.fs.writeFile({
    data: data, //这个base64字符串不用带data:audio/wav;base64,标头
    encoding: "base64",
    filePath: tmpfilePath,
    success: (res) => {
      console.log(`write audio file success => ${Date.now() - st}`, res);
      this.queueMapForAudio.set(keyInQueueMap, tmpfilePath);
    },
  });

5. requestAnimationFrame

小程序上没办法获得我们在H5上用来定时渲染的requestAnimationFrame方法。但是setInterval相对来说还比较靠谱。
canvas倒是提供了一个平替的api来处理渲染前的逻辑。但是这个requestAnimationFrame不是每次都执行，而是执行一次。这里的createSelectorQuery方法可以参考快手开发平台的KSML说明

    this?.createSelectorQuery().select('#canvas_shot').node((res)=> {
        console.log(`Get canvas Node`, res.node)
        if(res.node) {
            this.canvasNode = res.node
            this.canvasAnimationFrameId = this.canvasNode.requestAnimationFrame(()=> {
                console.log(`FIRST requestAnimationFrame1 at => ${Date.now()}`)
            })
        }
    }).exec()