uni-app でグローバル エラスティック レイヤー コンポーネントを開発する方法 (コード例)

uni-app でグローバル エラスティック レイヤー コンポーネントを開発するにはどうすればよいですか?次の記事では、uni-app でグローバル エラスティック レイヤー コンポーネントを実装する方法を例を用いて紹介します。

この会社には、uni-app フレームワークを使用して書かれたアプリがあります。内部の弾性層は基本的に、公式の uni.showModal API を使用して実装されています。パフォーマンスは、デバイスはネイティブの弾性レイヤーですが、お客様の要望により、設計されたスタイルに置き換える必要があるため、そのようなコンポーネントの実装を開始しました。

弾性層でよく使用されるメソッドとメソッドに従って、必要なプロパティとメソッドを大まかに列挙します。

• タイプ: alert/confirm など
• アイコン icon を表示
• コンテンツ content を表示
• API から呼び出すことができます
• サポート promise、 $api.xx().then

最初のいくつかの項目は簡単に実行でき、data でフィールドを定義し、直接使用するだけです。公式のホイール uni は外層 -popup にあるため、ポップアップを制御するためのロジックを少なくする必要があり (遅延)、一般的な構造は次のように記述されます

// template部分
<uni-popup ref="popup" :maskClick="maskClick">
		<view class="st-layer" :style="{ width: width }">
			<view class="st-layer__content">
				<!-- #ifndef APP-NVUE -->
				<text class="st-layer__icon" :class="option.iconClass || getIconClass()"
					v-if="option.type !== &#39;none&#39; && option.showIcon"></text>
				<!-- #endif -->
				<view class="st-layer__msg" v-if="option.msg">
					<text>{{ option.msg }}</text>
				</view>
			</view>
			<view class="st-layer__footer" :class="{&#39;is-reverse-cofirmcancel&#39; : isReverseConfirmCancel}" v-if="option.showConfirmButton || option.showCancelButton">
				<view class="st-layer__footer__btn st-layer__footer__btn--confirm" @tap.stop="confirmClick"
					v-if="option.showConfirmButton"><text>确认</text></view>
				<view class="st-layer__footer__btn st-layer__footer__btn--cancel" @tap.stop="cancelClick"
					v-if="option.showCancelButton"><text>取消</text></view>
			</view>
		</view>
	</uni-popup>

その後、js最初の部分は、いくつかの open メソッドと close メソッドを実装するだけです。

data() {
    return {
            option: {}
    }
},
methods: {
    open(option) {
        let defaultOption = {
                showCancelButton: false, // 是否显示取消按钮
                cancelButtonText: '取消', // 取消按钮文字
                showConfirmButton: true, // 是否显示确认按钮
                confirmButtonText: '取消', // 确认按钮文字
                showIcon: true, // 是否显示图标
                iconClass: null, // 图标class自定义
                type: 'none', // 类型
                confirm: null, // 点击确认后的逻辑
                cancel: null, // 点击取消后的逻辑
                msg: ''
        }
        this.option = Object.assign({}, defaultOption, option)
        this.$refs.popup.open()
    },
    close() {
            this.$refs.popup.close()
    },
    confirmClick() {
            const confirmHandler = this.option.confirm
            if (confirmHandler && typeof confirmHandler === 'function') {
                    confirmHandler()
            }
            this.close()
            this.$emit('confirm')
    },
    cancelClick() {
            const cancelHandler = this.option.cancel
            if (cancelHandler && typeof cancelHandler === 'function') {
                    cancelHandler()
            }
            this.close()
            this.$emit('cancel')
    }
}

現在他のページで利用可能です

// test.vue  可以使用uni-app的 [easycom组件规范](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83)，不用写import语句
<st-layer ref="stLayer"></st-layer>

// js部分
this.$refs.stLayer.open({
    msg: &#39;测试&#39;,
    confirm: () => {
        console.log(&#39;点击了确认&#39;)
    },
    cancel: () => {
        console.log(&#39;点击了取消&#39;)
    }
})

これで基本的な機能は実装されましたが、このように呼び出すのは不便だと言いたい人がいます。このように呼び出したいです

open(msg).then(() => {
    console.log('点击了确认')
}).catch(() => {
     console.log('点击了取消')
})

実装方法promiseはどうですか?最も簡単な方法は、open メソッドに promise を返させることです。 [確認] または [キャンセル] をクリックするときに then メソッドを入力するにはどうすればよいですか? 次の記述メソッドを参照してください

...
open() {
     return new promise((reoslve, reject) => {
        ...
        this.option.confirm = this.option.confirm || function confirmResolve () {
            resolve()
        }
         this.option.cancel = this.option.cancel || function cancelReject () {
            reject()
        }
     })
 }
...

他の個別のメソッド (confirm など) をカプセル化したい場合は、オープンに基づいて拡張できます:

confirm(msg, option = {}) {
        if (typeof msg === 'object') {
                option = msg
        } else {
                option.msg = msg
        }
        return this.open({
                ...option,
                showCancelButton: true,
                type: 'confirm'
        })
}
// 调用方式
this.$refs.stLayer.confirm('是否确认？').then().catch()

このような基本的な弾性層コンポーネントが実装されています。以下は最後のステップですグローバル使用元の vue プロジェクトに記述されたレイヤー コンポーネントをグローバルに使用するには、通常、次のメソッドを使用してページに挿入されます

import main from './main.vue'

const LayerConstructor = vue.extend(main)

const initInstance = () => {
  instance = new LayerConstructor({
    el: document.createElement('div')
  })

  instance.callback = defaultCallback
  document.getElementById('app').appendChild(instance.$el)
}

直接プルオーバーされます使用すると、結果はエラーとプロンプト エラー: ドキュメントが未定義です でした。その後、uni-app が通常の vue プロジェクトとは大きく異なることを思い出しました。動作原理:

uni-app 論理層とビュー層が分離されており、非 H5 側で実行する場合は、論理層の 2 つの部分に分割されます。そしてビューレイヤー。ロジック層はビジネス ロジックの実行、つまり JS コードの実行を担当し、ビュー層はページのレンダリングを担当します。開発者は vue ページに js と css を記述しますが、実際にはコンパイル中に分割されます。ロジック層は独立した jscore で実行されます。ローカル Web ビューに依存しないため、ブラウザーの互換性の問題がなく、Android 4.4 上で es6 コードを実行できます。一方で、ウィンドウ、ブラウザーを実行することはできません。ドキュメント、ナビゲーター、ローカルストレージなどの特定の js API。

そのため、このグローバル登録方法は利用できなくなりました。では、それを uni-app に実装するにはどうすればよいでしょうか? 公式フォーラムを調べてみると、loadervue-inset-loader の実装を発見しました。実装原理は、sfc テンプレートのコンテンツを取得し、指定された場所 (つまり、は、 global を必要とするコンポーネントです)、使用法は次のとおりです:

// 第一步
npm install vue-inset-loader --save-dev 
// 第二步 在vue.config.js(hbuilderx创建的项目没有的话新建一个)中注入loader
module.export = {
    chainWebpack: config => {
            // 超级全局组件
            config.module
                    .rule('vue')
                    .test(/\.vue$/)
                    .use()
                    .loader(path.resolve(__dirname, "./node_modules/vue-inset-loader"))
                    .end()
	} 
}
// 支持自定义pages.json文件路径  
// options: {  
//     pagesPath: path.resolve(__dirname,'./src/pages.json')  
// } 
// 第三步 pages.json配置文件中添加insetLoader
"insetLoader": {  
    "config":{  
        "confirm": "<BaseConfirm ref=&#39;confirm&#39;></BaseConfirm>",  
        "abc": "<BaseAbc ref=&#39;BaseAbc&#39;></BaseAbc>"  
    },  
    // 全局配置  
    "label":["confirm"],  
    "rootEle":"div"  
}

構成手順

• config (デフォルト: {} )
  定義 ラベル名と内容のキーと値のペア

• label(デフォルト: [])
  パッケージ化後にグローバルに導入する必要があるラベル このタグはすべてのページに導入されます

• rootEle(デフォルト: "div" )
  ルート要素のタグ タイプ、デフォルト値は div で、通常のルールをサポートします。たとえば、任意のラベル ".*"

  label および に一致します。 rootEle は別ページのスタイルでの設定をサポートしており、グローバル設定よりも優先されます。この時点で

を設定した後、コンポーネントはグローバルに使用できるようになります。各ページにタグを記述する必要はなく、API を呼び出すだけで使用できます。

後で使用状況に基づいて最適化できます。レベルは限られていますが、皆さんのアドバイスは大歓迎です。

推奨: 「uniapp チュートリアル 」

以上がuni-app でグローバル エラスティック レイヤー コンポーネントを開発する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。