uniapp_06_全局消息提醒（App端）

uniapp 全局消息提醒（App端）

前言

最近在项目中需要用到全局消息提醒，才发现 App.vue 文件虽然是页面入口文件但是 App.vue 文件本身不是页面。
之后试了创建一个全局组件挂载在vue原型上，但是发现在h5中没有问题，但是在app和小程序中由于不存在 document 导致报错。
最后想到了3个解决办法

1. 创建一个背景透明的页面做弹窗页（参考 uview 的压窗）
2. 自定义头部导航栏 然后用全局变量做控制 (可适配多端 推荐用uview)
3. 使用 原生控件对象 plus.nativeObj.View 创建一个（推荐使用）

原生控件对象( plus.nativeObj.View )

View 可以在屏幕上方绘制图形、文本、图片等内如，先创建的会被后创建的覆盖, 调用 Webview窗口对象的 append 方法添加到 Webview 中，不添加到 webView 窗口上面，但是会显示在 则会个 webView 的所有 子 webView 上

具体的介绍请看文档 nativeObj View 文档

示例代码

  class NativeMessage {
      viewStyle = {
        backgroundColor: `#000000`,
        top: "100px",
        left: "2%",
        width: "96%",
        height: `${uni.upx2px(200)}px`
      }
      
      constructor () {}
      
      create () {
          let _view = new plus.nativeObj.View(`id_${ Math.round(Math.random()*100) }`, this.viewStyle);
          // 绘制一个文本
          _view.drawText('需要显示的文本', {
              top:'0px',
              left:'0px',
              width:'100%',
              height: 'wrap_content'
          },{
              color: 'rgba(255,0,0,.6)',
          }, 'ID_Test')
          // 拦截点击事件 不拦截 事件会穿透
          _view.interceptTouchEvent(true);
          // 添加一个点击事件
          _view.addEventListener('click', ()=>{
              uni.showModal({
                  content: "点击了 VIEW",
                  confirmText: '关闭',
                  success: () => {
                      _view.close()
                  }
              })
          })
          _view.show()
          
      }
  }

  const a = new NativeMessage();
  a.create()