vue wx-open-launch-app封装

import {initConfig} from './weiChatUtils'
import {getAppType} from '@/utils/app'
import {getBrowserType,getIosVersion, isEmpty} from '@/utils/common'

const browserType: string = getBrowserType(),

/** 
 * 打开App(appId 在微信平台配的，这里的写死了，也可通过参数动态设置)
 * @param info {
 *  boxId:  盒子元素ID
 *  boxWidth 盒子元素宽度
 *  boxHeight 盒子元素高度
 *  domId:  待添加元素ID - 非必填，默认open_app_btn
 *  extinfo  传给app参数
 * }
*/
const openApp = (info:any) => {
    let btn = document.getElementById(info.boxId) as HTMLElement
    if(isEmpty(info.domId)) {
        if(btn.querySelector('#open_app_btn')) {
            return 
        }
    } else {
        if(btn.querySelector(`#${info.domId}`)) {
            return 
        }
    }
    if(browserType == 'browser') {
        let dom = document.createElement('div')
        dom.setAttribute('id',isEmpty(info.domId)?'open_app_btn':info.domId)
        dom.setAttribute('style',`position:absolute; top: 0; left:0; width:${info.boxWidth}px; height: ${info.boxHeight}px;`)
        dom.addEventListener('click',()=>{
            downloadApp()
        })
        btn.appendChild(dom)
        return
    } else if(browserType == 'wechat') {
        async function initDom(){
            let status
            if(isEmpty(sessionStorage.weichatConfig)) {
                status = await initConfig()
                sessionStorage.weichatConfig = status?1:0
            } else {
                status = sessionStorage.weichatConfig == 1?true: false
            }
            if(!status) {
                let dom = document.createElement('div')
                dom.setAttribute('id',isEmpty(info.domId)?'open_app_btn':info.domId)
                dom.setAttribute('style',`position:absolute; top: 0; left:0; width:${info.boxWidth}px; height: ${info.boxHeight}px;`)
                dom.addEventListener('click',()=>{
                    downloadApp()
                })
                btn.appendChild(dom)
                return
            }
            let dom = document.createElement('wx-open-launch-app')
            dom.setAttribute('style',`position:absolute; top: 0; left:0; width:${info.boxWidth}px; height: ${info.boxHeight}px;`)
            dom.setAttribute('id',isEmpty(info.domId)?'open_app_btn':info.domId)
            dom.setAttribute('appid','wx0964356f5aed5205')
            dom.setAttribute('extinfo',info.extinfo)
            dom.innerHTML = `<script type='text/wxtag-template'>
                    <style scoped>
                        .open_btn{
                            position: relative;
                            width:${info.domWidth}px; height: ${info.boxHeight}px;
                            opacity: 0;
                        }
                    </style>
                    <div class='open_btn'></div>
                </script>`
    
            btn.appendChild(dom)
            dom.addEventListener('launch', (e:any)=> {})
            dom.addEventListener('error', (e:any)=> {
                alert(JSON.stringify(e.detail))
                downloadApp()
            })
        }
        initDom()
    }
}

/**
    下载app
    @param 
    @return
 */
const downloadApp = ()=> {
    无法使用wx-open-launch-app的处理
}
export {
    openApp,
    downloadApp
}

调用import {openApp} from ‘@/utils/openApp’
openApp({
boxId: ,
boxWidth:,
boxHeight: ,
extinfo: ,
})

注意：
如果要用该元素，需在微信公众平台配置，且引入该模块的页面在配置的安全域名下
安全域名配置：aa.bb.cc

weiChatUtils看另一篇，有详细说明
添加链接描述