Eine kurze Analyse der Methoden zum Anpassen von Komponenten in WeChat-Miniprogrammen

KomponentenkommunikationAufgrund der geschäftlichen Verantwortung müssen wir häufig eine große Seite in mehrere Komponenten aufteilen, und zwischen mehreren Komponenten ist eine Datenkommunikation erforderlich. Für die generationsübergreifende Komponentenkommunikation kann die globale Zustandsverwaltung in Betracht gezogen werden. Hier diskutieren wir nur die gemeinsame Kommunikation zwischen Eltern und Kindern:Methode 1 WXML-Datenbindung Wird von der übergeordneten Komponente verwendet, um Daten auf die angegebenen Eigenschaften der untergeordneten Komponente festzulegen. Das untergeordnete Element deklariert das Eigenschaftenattribut

const sender = JSON.parse(getParam('sender') || '{}');

Nach dem Login kopieren

Nach dem Login kopieren

Die übergeordnete Komponente ruft auf:

// 返回当前页面 export function getCurrentPage() { const pageStack = wx.getCurrentPages(); const lastIndex = pageStack.length - 1; const currentPage = pageStack[lastIndex]; return currentPage; } // 获取页面 url 参数 export function getParams() { const currentPage = getCurrentPage() || {}; const allParams = {}; const { route, options } = currentPage; if (options) { const entries = objectEntries(options); entries.forEach( ([key, value]) => { allParams[key] = decodeURIComponent(value); } ); } return allParams; } // 按字段返回值 export function getParam(name) { const params = getParams() || {}; return params[name]; }

Nach dem Login kopieren

Nach dem Login kopieren

Methode 2-Ereigniswird für die untergeordnete Komponente verwendet Übertragen Sie Daten an die übergeordnete Komponente. Es können beliebige Daten übergeben werden. Um Ereignisse von einer Unterkomponente auszulösen, binden Sie zunächst das Click-Ereignis der Unterkomponente in die WXML-Struktur:

// global-data.js // 由于 switchTab 不支持携带参数，所以需要考虑使用全局数据存储 // 这里不管是不是 switchTab，先把数据挂载上去 const queryMap = { page: '', queries: {} };

Nach dem Login kopieren

Nach dem Login kopieren

Dann versenden Sie das Ereignis in der js-Datei. Der Ereignisname kann angepasst werden. Der zweite Parameter kann das Datenobjekt übergeben und der dritte Parameter ist die Ereignisoption.

export function jumpTo(url, options) { // ... Object.assign(queryMap, { page: baseUrl, queries: options }); // ... if (jumpType === 'switchTab') { wx.switchTab({ url: baseUrl }); } else if (jumpType === 'navigateTo' && pageCount < 5) { wx.navigateTo({ url, fail: () => { wx.switch({ url: baseUrl }); } }); } else { wx.navigateTo({ url, fail: () => { wx.switch({ url: baseUrl }); } }); } }

Nach dem Login kopieren

Nach dem Login kopieren

Abschließend hören Sie sich die übergeordnete Komponente an, indem Sie Folgendes verwenden:

// 获取页面 url 参数 export function getParams() { const currentPage = getCurrentPage() || {}; const allParams = {}; const { route, options } = currentPage; if (options) { const entries = objectEntries(options); entries.forEach( ([key, value]) => { allParams[key] = decodeURIComponent(value); } ); + if (isTabBar(route)) { + // 是 tab-bar 页面，使用挂载到全局的参数 + const { page, queries } = queryMap; + if (page === `${route}`) { + Object.assign(allParams, queries); + } + } } return allParams; }

Nach dem Login kopieren

Nach dem Login kopieren

Methode 3 selectComponent, um das Komponenteninstanzobjekt abzurufenüberselectComponent kann die Instanz der Unterkomponente abrufen und somit die Methode der Unterkomponente aufrufen. Der wxml

// 判断当前路径是否是 tabBar const { tabBar} = appConfig; export isTabBar = (route) => tabBar.list.some(({ pagePath })) => pagePath === route);

Nach dem Login kopieren

Nach dem Login kopieren

der js

// wx.navigateTo({ url: 'pageB?id=1', events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } });

Nach dem Login kopieren

Nach dem Login kopieren

selector der übergeordneten Komponente ähnelt dem CSS-Selektor, unterstützt jedoch nur die folgende Syntax.

• ID选择器：#the-id（笔者只测试了这个，其他读者可自行测试）
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node,.some-other-nodes