집 > 기사 > 웹 프론트엔드 > Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.

Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.

青灯夜游앞으로: 2022-06-22 18:24:216653검색

Uniapp에서 글로벌 메시지 프롬프트 및 구성 요소를 구현하는 방법은 무엇입니까? 다음 글에서는 Uniapp 글로벌 메시지 프롬프트와 그 구성 요소를 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

최근에는 H5 및 미니 프로그램에서 메시지를 실시간으로 새로 고칠 수 있어야 하고 프롬프트 구성 요소도 먼저 스타일을 사용자 정의해야 하는 프로젝트 요구 사항이 있습니다. 실시간 메시지 새로 고침에는 두 가지 유형이 있습니다. 하나는 짧은 폴링이고 다른 하나는 긴 폴링입니다.
소위 짧은 폴링은 실제로 프런트 엔드가 타이머를 사용하여 특정 간격 내에 백엔드에 대한 요청을 시작하고 백엔드가 폴링 요청을 최적화해야 함을 의미합니다.
긴 폴링은 백엔드에 메시지 요청을 보낸 후 요청이 일시 중지되고 백엔드에서 새 메시지가 반환될 때까지 기다린 다음 메시지 요청을 다시 시작하는 것을 의미합니다. 프로젝트 시작 시간 및 비용, 짧은 폴링이 최종적으로 선택되었으며 App.vue에서 글로벌 메시지 프롬프트가 수행되었습니다.

Implementation

1. Short Polling request-App.vue

   async created(){const _this=thissetInterval(async ()=>{
                const res=await _this.$ajax({                
                url:`/api/notice/status`
              })             
              if(res.data.code===200){
                const value=res.data.data.hasNew
		_this.$store.commit({type: &#39;changeNew&#39;, value})
              }
         },6000)	
    }

2. 글로벌 메시지 프롬프트 컴포넌트

메시지를 표시하려면 글로벌 커스텀 컴포넌트가 필요한데, 하나를 만났습니다. 문제는 Unipp에서 uni-app의 주요 컴포넌트는 App.vue이지만 페이지 항목 파일인 App.vue 아래에서 모든 페이지가 전환됩니다. 하지만 App.vue 자체는 페이지가 아니며 여기에 뷰 요소를 작성할 수 없습니다. 이 파일의 기능에는 애플리케이션 라이프사이클 기능 호출, 글로벌 스타일 구성, 글로벌 스토리지 globalData 구성이 포함됩니다. 즉, App.vue는 js와 css만 작성할 수 있지만 뷰 요소를 마운트할 수는 없습니다. 그러면 this.$message와 같이 js에서 사용할 수 있습니까? 구성 요소의 경우 Vue의 vue.prototype.$message를 사용하여 전역 구성 요소를 마운트하려고 생각했습니다. App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。也就是App.vue中只能进行js以及css的编写，而不能挂载视图元素，那么是否可以在js中像使用this.$message一样使用组件呢，我想到了Vue中使用vue.prototype.$message挂载全局组件的方式。

(1)定义一个GlobalMessage.vue组件

自定义一个消息提示组件，text将会是我们传入的提示消息参数

<template>
	<div class=&#39;message-container&#39;>
		全局消息提示 {{text}}
	</div>
</template>

<script></script>

<style lang="scss" scoped>
	.message-container{
		position: fixed;		
		top: 10%;		
		z-index: 2000;		
		left: 10%;		
		width: 200px;		
		height: 200px;		
		background-color: red;
	}
</style>

（2）新建GlobalMessage.js

将自定义组件引入，vue.extend可以使用基础的Vue构造器，创建一个子类，参数是一个包含组件的对象。对象示例如下：

{
template:&#39;&#39;,
data(){
    return {
        属性
    }
  }
}

但此时创建的并非组件实例，需要通过new 方式创建组件实例，参数包括创建的组件Dom节点，组件内部属性。然后使用document.body.appendChild将组件渲染到body中，此时我们已经可以调用此方法，将自定义组件挂载到全局。

function showMessage(text,duration){
	const MessageDom=new MessageConstructor({
		el:document.createElement(&#39;div&#39;),data(){
			return {text:text,
			}
		}
	})document.body.appendChild(MessageDom.$el)
}

接下来我们需要将该方法挂载到vue原型上，从而能够像this.$message一样使用，我们在vue.prototype上挂载$message，并将此方法导出。

function registryMessage(){
	vue.prototype.$message=showMessage
}
export default registryMessage

GlobalMessage.js全部代码

import vue from "vue"
import GlobalMessage from  './GlobalMessage.vue';
const MessageConstructor= vue.extend(GlobalMessage)
function showMessage(text,duration){
	const MessageDom=new MessageConstructor({
		el:document.createElement('div'),data(){
			return {text:text,
			}
		}
	})
	document.body.appendChild(MessageDom.$el)
}
function registryMessage(){
	vue.prototype.$message=showMessage
}
export default registryMessage

（3）main.js中

将我们抛出的方法引入，使用Vue.use进行全局注册，这样就可以愉快的使用this.$message了。

import GlobalMessage from "./GlobalMessage.js";
// 这里也可以直接执行 
toastRegistry()Vue.use(GlobalMessage);

使用

this.$message(&#39;测试数据&#39;)

3.小程序中如何实现

超导马得，刚刚能够全局使用this.$message，但是又遇到一个问题，小程序中没有document，我们看uni-app官方文档：

uni-app的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。
标准ECMAScript的js仅是最基础的js。浏览器基于它扩展了window、document、navigator等对象。小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。node也扩展了fs等模块。
uni-app基于ECMAScript扩展了uni对象，并且API命名与小程序保持兼容。
uni-app
(1) GlobalMessage.vue 구성 요소 정의

메시지 프롬프트 구성 요소를 사용자 정의합니다. 텍스트는 우리가 전달하는 프롬프트 메시지 매개 변수가 됩니다

import GlobalMessage from '@/components/common/GlobalMessage.vue';
Vue.component('GlobalMessage',GlobalMessage)

(2) 새로운 GlobalMessage.js를 생성합니다

사용자 정의 구성 요소를 도입합니다. vue.extend는 기본 Vue 생성자를 사용하여 하위 클래스를 생성할 수 있으며 매개 변수는 다음을 포함하는 객체입니다. 구성 요소. 객체 예시는 다음과 같습니다.

module: {
    rules: [
      {        
          test: /.vue$/,
        use:{       
             loader: "vue-inset-loader"            
             // // 针对Hbuilder工具创建的uni-app项目            
             // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")
        }
      }
    ]
},
// 支持自定义pages.json文件路径
// options: {
//     pagesPath: path.resolve(__dirname,&#39;./src/pages.json&#39;)
// }
그러나 이때 생성되는 것은 컴포넌트 인스턴스가 아닙니다. 새로운 메소드를 통해 컴포넌트 인스턴스를 생성해야 합니다. 매개변수에는 생성된 컴포넌트 Dom 노드와 컴포넌트의 내부 속성이 포함됩니다. . 그런 다음 document.body.appendChild를 사용하여 구성 요소를 본문에 렌더링합니다. 이때 이미 이 메서드를 호출하여 사용자 정의 구성 요소를 전역적으로 마운트할 수 있습니다.
"insetLoader": {
    "config":{
        "message": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "测试页面",
            // 单独配置，用法跟全局配置一致，优先级高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]
🎜다음으로 this.$message처럼 사용할 수 있도록 이 메서드를 vue 프로토타입에 마운트해야 합니다. vue.prototype code>$에 마운트합니다. message를 선택하고 이 메서드를 내보냅니다. 🎜rrreee🎜🎜GlobalMessage.js 전체 코드🎜🎜rrreee
🎜(3) main.js🎜🎜🎜에서 우리가 던지는 메소드를 소개하고 Vue.use 를 사용하세요. code><code>this.$message를 즐겁게 사용할 수 있도록 전역적으로 등록하세요. 🎜rrreee🎜🎜 🎜🎜rrreee
🎜3. 애플릿에서 🎜🎜🎜초전도 말을 구현하는 방법은 방금 this.$message인데 또 다른 문제가 발생했습니다. 미니 프로그램에 <code>document가 없습니다. uni-app의 공식 문서를 살펴보겠습니다. 🎜🎜🎜🎜uni-appjs API는 표준 ECMAScript js API와 uni 확장 API의 두 부분으로 구성됩니다. 🎜표준 ECMAScript js는 가장 기본적인 js일 뿐입니다. 브라우저는 창, 문서, 탐색기 및 이를 기반으로 하는 기타 개체를 확장합니다. 미니 프로그램은 또한 표준 js를 기반으로 하는 다양한 wx.xx, my.xx 및 swan.xx API를 확장합니다. Node는 또한 fs 및 기타 모듈을 확장합니다. 🎜uni-app은 ECMAScript를 기반으로 uni 객체를 확장하며 API 이름 지정은 애플릿과 호환됩니다. 🎜uni-app의 js 코드인 h5 end는 브라우저에서 실행됩니다. h5가 아닌 쪽(작은 프로그램 및 앱 포함)에서 Android 플랫폼은 v8 엔진에서 실행되고 iOS 플랫폼은 iOS와 함께 제공되는 jscore 엔진에서 실행됩니다. 둘 다 브라우저나 웹뷰에서 실행되지 않습니다. 🎜H5가 아닌 쪽에서는 창, 문서, 탐색기 및 기타 브라우저의 js API를 지원하지 않습니다🎜🎜🎜🎜🎜uni-app의 js API🎜🎜🎜그런 다음 요구 사항이 충족되어야 하며 다른 솔루션을 채택하고 vuex를 사용합니다. 상태 머신은 전역 상태 제어를 수행하고, 필수 페이지에 사용자 정의 구성 요소를 배치하고, 상태 머신을 사용하여 메시지 프롬프트 내용, 표시 및 숨기기를 제어합니다. 참고: vuex를 직접 설치하고 구성하세요. 🎜🎜🎜main.js에 전역적으로 등록된 구성 요소🎜

import GlobalMessage from '@/components/common/GlobalMessage.vue';
Vue.component('GlobalMessage',GlobalMessage)

在需要的页面放置GlobalMessage组件，但是我们需要每个页面都要加组件标签，实在是一个难以忍受的方式，于是在翻阅一些文档后，在jy文章中发现一个工具vue-inset-loader

4.vue-inset-loader的使用

我们来看该loader的提示：编译阶段在sfc模板指定位置插入自定义内容，适用于webpack构建的vue应用，常用于小程序需要全局引入组件的场景。（由于小程序没有开放根标签，没有办法在根标签下追加全局标签，所以要使用组件必须在当前页面引入组件标签），该插件刚好能够帮助我们全局追加组件标签。

vue-inset-loader

（1）安装

npm install vue-inset-loader --save-dev

（2）vue.config.js注入loader

没有vue.config.js请新建文件。

module: {
    rules: [
      {        
          test: /.vue$/,
        use:{       
             loader: "vue-inset-loader"            
             // // 针对Hbuilder工具创建的uni-app项目            
             // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")
        }
      }
    ]
},
// 支持自定义pages.json文件路径
// options: {
//     pagesPath: path.resolve(__dirname,&#39;./src/pages.json&#39;)
// }

（3）pages.json配置文件中添加insetLoader

"insetLoader": {
    "config":{
        "message": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "测试页面",
            // 单独配置，用法跟全局配置一致，优先级高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]

配置说明

config (default: {}) 定义标签名称和内容的键值对
label(default: []) 需要全局引入的标签，打包后会在所有页面引入此标签
rootEle(default: "div") 根元素的标签类型，缺省值为div，支持正则，比如匹配任意标签 ".*"

✔ label 和 rootEle 支持在单独页面的style里配置，优先级高于全局配置

总结

虽然实现了全局消息的提示，但是在小程序中，该方法还是过于麻烦，需要在每个页面追加全局组件标签，希望大家有更好的方法能够不吝赐教。

Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.

Implementation

1. Short Polling request-App.vue

2. 글로벌 메시지 프롬프트 컴포넌트

(1)定义一个GlobalMessage.vue组件

（2）新建GlobalMessage.js

（3）main.js中

3.小程序中如何实现

🎜(3) main.js🎜🎜🎜에서 우리가 던지는 메소드를 소개하고 `Vue.use 를 사용하세요. code><code>this.$message`를 즐겁게 사용할 수 있도록 전역적으로 등록하세요. 🎜rrreee🎜🎜 🎜🎜rrreee

4.vue-inset-loader的使用

（1）安装

（2）vue.config.js注入loader

（3）pages.json配置文件中添加insetLoader

总结

관련 기사

Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.

Implementation

1. Short Polling request-App.vue

2. 글로벌 메시지 프롬프트 컴포넌트

(1)定义一个GlobalMessage.vue组件

（2）新建GlobalMessage.js

（3）main.js中

3.小程序中如何实现

🎜(3) main.js🎜🎜🎜에서 우리가 던지는 메소드를 소개하고 Vue.use 를 사용하세요. code><code>this.$message를 즐겁게 사용할 수 있도록 전역적으로 등록하세요. 🎜rrreee🎜🎜 🎜🎜rrreee

4.vue-inset-loader的使用

（1）安装

（2）vue.config.js注入loader

（3）pages.json配置文件中添加insetLoader

总结

관련 기사

🎜(3) main.js🎜🎜🎜에서 우리가 던지는 메소드를 소개하고 `Vue.use 를 사용하세요. code><code>this.$message`를 즐겁게 사용할 수 있도록 전역적으로 등록하세요. 🎜rrreee🎜🎜 🎜🎜rrreee