关于字节小程序踩过的坑~快来一起避坑吧！

字节小程序避坑指南

最近公司要做一个抖音的小程序，废话不多说，直接说说我遇到的坑。
首先说明，我没有小程序的编写经验，从头开始的，所以一些 基础的错误，我在这里只作记录，勿喷。
先上文档 字节小程序文档

---

1. 关于抖音小程序音频播放的若干问题

字节小程序没有<audio>组件，所以我刚开始以为没有办法播放声音，后来在API看到，可以用api来进行媒体的管理。小程序媒体管理API 我这里主要说声音的播放，分为两个1.BackgroundAudioManager 2.InnerAudioContext。其中第一个是作为背景音乐播放，第二个则只能在小程序内部使用，退出小程序，就会自动停止播放。

1. 设置src后闪退问题

项目完成时，安卓测试没有任何问题，但是在苹果ios上，每次一播放音频就闪退，后来发现是因为音频的网络地址有中文还有空格之类的，所以在设置之前使用encodeURI(url)一下就可以了，就不会闪退了。

2.使用事项

音频播放全局只有一个变量，所以只能播放一个音频，在设置src后会自动替换原来的播放内容。
获取全局唯一的背景音频管理器 BackgroundAudioManager。
该 api 多次调用时返回的是同一个实例，在多页面使用时，会操作到同一个上下文对象。
小程序切入后台时，如果音频处于播放状态，可以继续播放。
但是后台状态不能通过调用 API 操纵音频的播放状态。

---

2. 获取用户隐私数据解密问题

我是用js写的解密，直接上代码吧

var CryptoJS = require("/wrdes.js");

//解密敏感信息
function decryptInfo(encryptedData, sessionKey, iv) {
    // console.log("encryptedData:" + encryptedData);
    // console.log("sessionKey:" + sessionKey);
    // console.log("iv:" + iv);
    var aeskey = CryptoJS.enc.Base64.parse(sessionKey);
    //解密方法
    var desiv = CryptoJS.enc.Base64.parse(iv);

    var decrypted = CryptoJS.AES.decrypt(encryptedData, aeskey, {
        iv: desiv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    console.log(decrypted.toString(CryptoJS.enc.Utf8));
    return decrypted.toString(CryptoJS.enc.Utf8);
}

3. 其他小问题

1. app.js 里设置的全局变量在其他页面被改变时，不会引发其他页面的更新，需要手动来更新，我是在onshow方法里直接重新赋值。
2. 网络请求必须是https，为了安全吧应该。
3. 不要忘记设置域名白名单
4. 又想到一个，字节小程序css默认box-size是content，这让我写页面的时候难受死，一直明白自己为什么页面老是错，特别是widt：100%后在设置padding啥的总是会挤出去，height也有同样的问题。
5. page里使用数据可以直接this，component里需要使用this.data