一些使用函数工具箱

1.微信h5游览器自动播放媒体文件

function audioAutoPlay(id) {
        let audio = document.querySelector('#'+id)
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, e => {
                    audio.play()
                }, false)
            } else {
                document.addEventListener('WeixinJSBridgeReady', () => {
                    WeixinJSBridge.invoke('getNetworkType', {}, e => {
                        audio.play()
                    })
                }, false)
            }
            audio.play()
            return false
        },
  1. 一些微信h5页面常用设置
import wx from 'weixin-js-sdk'

wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId, // 必填,公众号的唯一标识
                timestamp: shareData.time, // 必填,生成签名的时间戳
                nonceStr, // 必填,生成签名的随机串
                signature: jsapi_ticket, // 必填,签名,见附录1
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'getLocation'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            })
            wx.ready(() => {
                wx.onMenuShareTimeline({
                    title: shareData.tTitle, // 分享标题
                    link: shareData.shareurl, // 分享链接
                    imgUrl: shareData.imgurl, // 分享图标
                    success() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel() {
                        // 用户取消分享后执行的回调函数
                    },
                })
                wx.onMenuShareAppMessage({
                    title: shareData.tTitle, // 分享标题
                    desc: shareData.content, // 分享描述
                    link: shareData.shareurl, // 分享链接
                    imgUrl: shareData.imgurl, // 分享图标
                    type: 'link', // 分享类型,music、video或link,不填默认为link
                    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                    success() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel() {
                        // 用户取消分享后执行的回调函数
                    },
                })
            })

  1. 移动端常用的自适应布局设置
const setRemUnit = () => {
    let html = document.documentElement
    let width = html.clientWidth
    const set_width = width / 3.75
    const now_width = Number(html.style.fontSize.slice(0, -2))
    if (set_width != now_width) {
        html.style.fontSize = width / 3.75 + 'px'
        // 不太强求兼容推荐vw,              3.75是设计图宽度/100
        // document.documentElement.style.fontSize = 100 / 3.75 + 'vw' 
    }
    // 安卓部分机型rem计算不准,二货安卓
    let whileCount = 0
    while (true) {
        let settedFs = Number(html.style.fontSize.slice(0, -2))
        let settingFs = settedFs
        let realFs = Number(window.getComputedStyle(html).fontSize.slice(0, -2))
        let delta = realFs - settedFs
        if (Math.abs(delta) >= 1) {
            if (delta > 0) {
                settingFs--
            } else {
                settingFs++
            }
            html.style.fontSize = settingFs + 'px'
        } else {
            break
        }
        if (whileCount++ > 30) {
            break
        }
    }
}
window.onload = () => {
    let reSet
    setRemUnit()
    window.addEventListener('resize', () => {
        clearTimeout(reSet)
        reSet = setTimeout(setRemUnit, 300)
    })
}

你可能感兴趣的:(一些使用函数工具箱)