关于前端:关于字节小程序踩过的坑快来一起避坑吧

字节小程序避坑指南

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

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 也有同样的问题。