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

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

青灯夜游

リリース： 2022-06-22 22:00:54

転載

6646 人が閲覧しました

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: &#39;changeNew&#39;, 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:&#39;&#39;,
data(){
    return {
        属性
    }
  }
}

ログイン後にコピー

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

function showMessage(text,duration){
	const MessageDom=new MessageConstructor({
		el:document.createElement(&#39;div&#39;),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  &#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);

ログイン後にコピー

Use

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

ログイン後にコピー

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

ログイン後にコピー