h5调起订阅消息

/**
 * 打开消息授权页面
 * @param {*} templateId 必传唯一参数模板id
 * @param {*} config.mount 挂载元素
 * @param {*} config.successCallback 成功回调
 * @param {*} config.failCallback 失败回调
 * @returns
 */
export function createWxOpenSubscribeDom(templateId: string, config: {
  mount: string;
  successCallback?: () => void;
  failCallback?: () => void;
}) {
  const {
    successCallback = (e) => {
      console.log('success', e.detail);
    },
    failCallback = (e) => {
      console.log('fail', e.detail);
    }
  } = config
  if(!templateId) {
    alert('wxOpenSubscribe缺少参数');
    return;
  }
  const wxTagTemplate = document.createElement('script');
  wxTagTemplate.type = 'text/wxtag-template';
  wxTagTemplate.text = `
  <button style: {width: '100%'; height: '100%';}></button>
  `;

  const wxOpenSubscribeEl = document.createElement('wx-open-subscribe')
  wxOpenSubscribeEl.setAttribute('template', templateId);
  wxOpenSubscribeEl.setAttribute('id', `wx-open-subscribe-${config.mount}`);
  wxOpenSubscribeEl.appendChild(wxTagTemplate)

  wxOpenSubscribeEl.style.width = '100%'
  wxOpenSubscribeEl.style.height = '100%'
  wxOpenSubscribeEl.style.position = 'absolute'
  wxOpenSubscribeEl.style.opacity = '0'
  wxOpenSubscribeEl.style.left = '0'

  wxOpenSubscribeEl.addEventListener('success', successCallback)
  wxOpenSubscribeEl.addEventListener('error', failCallback)

  if (config && config.mount) {
    const mountEl = <HTMLElement>document.querySelector(config.mount);
    if (mountEl) {
      mountEl.style.position = 'relative'
      mountEl.appendChild(wxOpenSubscribeEl);
    }
  }

  return () => {
    removeEventListener('success', successCallback)
    removeEventListener('error', failCallback)
  };
}

使用

  useEffect(() => {
    if (isWechatAndNotMini) {
      const TARGET = '#signIn-remind-btn'
      clearListenerFn.current = createWxOpenSubscribeDom('消息模板id',
        {
          mount: TARGET,
          successCallback: () => {
            console.log('订阅成功')
          },
          failCallback: () => {
            console.log('订阅失败')
          }
        }
      )
    }

    return () => {
      if (clearListenerFn.current && isFunction(clearListenerFn.current)) {
        clearListenerFn.current()
      }
    }
  }, [])

绑定id：

<View className={classNames('calendar-header__right')} id='signIn-remind-btn' onClick={handleShowSignInRemindModal}>
    <Image src={IconGold} className={classNames('calendar-header__right__icon')}></Image>
    <View className={classNames('calendar-header__right__tips')}>提醒我</View>
</View>