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

青灯夜游
풀어 주다: 2022-06-22 22:00:54
앞으로
6677명이 탐색했습니다.

Uniapp에서 글로벌 메시지 프롬프트 및 구성 요소를 구현하는 방법은 무엇입니까? 다음 글에서는 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: 'changeNew', value})
              }
         },6000)	
    }
로그인 후 복사

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

메시지를 표시하려면 글로벌 커스텀 컴포넌트가 필요한데, 하나를 만났습니다. 문제는 Unipp에서 uni-app의 주요 컴포넌트는 App.vue이지만 페이지 항목 파일인 App.vue 아래에서 모든 페이지가 전환됩니다. 하지만 App.vue 자체는 페이지가 아니며 여기에 뷰 요소를 작성할 수 없습니다. 이 파일의 기능에는 애플리케이션 라이프사이클 기능 호출, 글로벌 스타일 구성, 글로벌 스토리지 globalData 구성이 포함됩니다. 즉, App.vue는 js와 css만 작성할 수 있지만 뷰 요소를 마운트할 수는 없습니다. 그러면 this.$message와 같이 js에서 사용할 수 있습니까? 구성 요소의 경우 Vuevue.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  &#39;./GlobalMessage.vue&#39;;
const MessageConstructor= vue.extend(GlobalMessage)
function showMessage(text,duration){
	const MessageDom=new MessageConstructor({
		el:document.createElement(&#39;div&#39;),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 구성 요소 정의

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

(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 global>인데 또 다른 문제가 발생했습니다. 미니 프로그램에 <code>document가 없습니다. uni-app의 공식 문서를 살펴보겠습니다. 🎜🎜🎜🎜uni-app</code >js API는 표준 ECMAScript js API와 uni 확장 API의 두 부분으로 구성됩니다. 🎜표준 ECMAScript js는 가장 기본적인 js일 뿐입니다. 브라우저는 창, 문서, 탐색기 및 이를 기반으로 하는 기타 개체를 확장합니다. 미니 프로그램은 또한 표준 js를 기반으로 하는 다양한 wx.xx, my.xx 및 swan.xx API를 확장합니다. Node는 또한 fs 및 기타 모듈을 확장합니다. 🎜uni-app은 ECMAScript를 기반으로 uni 객체를 확장하며 API 이름 지정은 애플릿과 호환됩니다. 🎜<code>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 &#39;@/components/common/GlobalMessage.vue&#39;;
Vue.component(&#39;GlobalMessage&#39;,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"
        }
    },
]
로그인 후 복사
로그인 후 복사
  1. 配置说明
  • config (default: {}) 定义标签名称和内容的键值对
  • label(default: []) 需要全局引入的标签,打包后会在所有页面引入此标签
  • rootEle(default: "div") 根元素的标签类型,缺省值为div,支持正则,比如匹配任意标签 ".*"

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

总结

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

推荐:《uniapp教程

위 내용은 Uniapp을 사용하여 글로벌 메시지 프롬프트와 해당 구성요소를 구현하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿