Uniapp を使用してグローバル メッセージ プロンプトとそのコンポーネントを実装する方法について話しましょう

Uniapp でグローバル メッセージ プロンプトとコンポーネントを実装するにはどうすればよいですか?次の記事では、Uniapp グローバル メッセージ プロンプトとそのコンポーネントを実装する方法を紹介します。

#最近、プロジェクトの要件があり、H5 およびミニ プログラムでメッセージをリアルタイムでグローバルに更新し、メッセージ プロンプトをグローバルに作成できます。スタイルもカスタマイズする必要があります。 まず、リアルタイム メッセージの更新には 2 種類あり、1 つはショート ポーリング、もう 1 つはロング ポーリングです。
いわゆるショート ポーリングとは、実際には、フロントエンドがタイマーを使用して特定の間隔内でバックエンドへのリクエストを開始することを意味し、バックエンドはポーリング リクエストを最適化する必要があります。
ロング ポーリングとは、メッセージ リクエストをバックエンドに送信した後、リクエストが一時停止され、バックエンドから新しいメッセージが返されるのを待ってから、メッセージ リクエストを再開することを意味します。実際には、これは WebSocket 通信です。プロジェクトの起動時間とコストを考慮し、最後にショート ポーリング方法を選択すると、App.vue でグローバル メッセージ プロンプトが実行されます。

実装

1. ショート ポーリング リクエスト - 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 で問題が発生しました。 App.vue は uni-app の主要コンポーネントですが、すべてのページはページ エントリ ファイルである App.vue の下で切り替わります。ただし、App.vue自体はページではないため、ここにビュー要素を記述することはできません。このファイルの機能には、アプリケーション ライフ サイクル関数の呼び出し、グローバル スタイルの構成、およびグローバル ストレージ globalData の構成が含まれます。つまり、 App.vue は js と css しか書けず、view 要素をマウントできないので、 this.$message のようなコンポーネントを js で使用できないでしょうか? Vue で vue.prototype.$message を使用してグローバル コンポーネントをマウントする方法について説明します。

(1) GlobalMessage.vue コンポーネントを定義します

メッセージ プロンプト コンポーネントをカスタマイズします。テキストは渡したプロンプト メッセージ パラメーターになります

<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:'',
data(){
    return {
        属性
    }
  }
}

ただし、この時点で作成されるのはコンポーネントのインスタンスではありません。新しいメソッドでコンポーネントのインスタンスを作成する必要があります。パラメーターには、作成されたコンポーネントの Dom ノードと内部のコンポーネントのプロパティ。次に、document.body.appendChild を使用してコンポーネントを本体にレンダリングします。この時点で、このメソッドを呼び出してカスタム コンポーネントをグローバルにマウントすることができます。

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

次に、このメソッドを this.$message のように使用できるように、このメソッドを vue プロトタイプにマウントする必要があります。これを 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);

Use

this.$message('测试数据')

3. 世界中で使用できる

超電導ホースをアプレットに実装する方法this.$message ですが、別の問題が発生しました。ミニ プログラムには document がありません。uni-app 公式ドキュメントを見てみましょう:

##uni-app の js API は、標準 ECMAScript js API と uni 拡張 API の 2 つの部分で構成されます。 標準 ECMAScript js は最も基本的な js にすぎません。ブラウザは、それに基づいてウィンドウ、ドキュメント、ナビゲータ、およびその他のオブジェクトを拡張します。このミニ プログラムは、標準 js に基づいたさまざまな wx.xx、my.xx、および swan.xx API も拡張します。 Node は fs やその他のモジュールも拡張します。
uni-app は ECMAScript に基づいて uni オブジェクトを拡張し、API の命名はアプレットとの互換性を維持します。

uni-app の js コード、h5 エンドはブラウザで実行されます。 h5 以外の側 (小規模なプログラムやアプリを含む) では、Android プラットフォームは v8 エンジンで実行され、iOS プラットフォームは iOS に付属の jscore エンジンで実行されますが、どちらもブラウザーや Web ビューでは実行されません。 非 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,'./src/pages.json')
// }

（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"
        }
    },
]

4. 配置说明

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

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

总结

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

推荐：《uniapp教程》

以上がUniapp を使用してグローバル メッセージ プロンプトとそのコンポーネントを実装する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。