用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序的getElementsById,就像一把梭

Rolan 2019-12-24 00:52

使用selectComponent可以抓取自定義組件實例對象,但在層層嵌套結構的業務場景中,id的設置繁復,js/wxml開發界面頻繁的切換,查找、維護、調整的開發工作很是讓人抓狂啊好想封裝一個getElementsById方法給小程序, ...

使用selectComponent可以抓取自定義組件實例對象,但在層層嵌套結構的業務場景中,id的設置繁復,js/wxml開發界面頻繁的切換,查找、維護、調整的開發工作很是讓人抓狂啊

好想封裝一個getElementsById方法給小程序,像在web開發中那樣能夠方便的獲取頁面元素。在父子子子子級間輕松調用,好想念jquery開發的一把梭時代!

實現如下需求:

  • 任何綁定id的自定義組件都能夠方便抓取實例對象(任何嵌套層級均可調用)
  • 通過數據配置

思路

實現不難,我們可以將所有自定義組件在create生命周期方法時將 this 掛載到一個全局變量中, detached 生命周期時銷毀該實例(不然爆內存)

實現

準備一個全局變量

app._elements = {}
復制代碼

掛載/銷毀方法

一個全局的掛載、銷毀方法,方便將實例對象注冊、注銷在app._elements上

app.mount = function(id, context){
    app._elements[id] = context
}

app.unmount = function(id){
    app._elements[id] = null
}
復制代碼

getElementsById

定義全局 getElementsById 在Page中能夠方便調用

app.getElementsById = function(id){
    let res = app._elements[id]
    if (!res) {  // 兼容selectComponent
        return wx.selectComponent('#'+id) || wx.selectComponent('.'+id)
    }
    return res
}
復制代碼

自定義組件

ui-component組件

const app = getApp()
Component({
  options: {
    multipleSlots: true, // 在組件定義時的選項中啟用多slot支持
    addGlobalClass: true
  },
  properties: {
    dataSource: {
      type: Object,
    },
  },
  data: {},
  behaviors: [],
  lifetimes: {
    created: function() {
    },
    attached: function() {
        this.id = this.data.dataSource.$$id  // 專用$$id來指定唯一名稱
    },
    ready: function() {
        app.mount(this.id, this)
    },
    detached: function(){
        app.unmount(this.id)
    }
  },
  methods: {
      active(clsName){
          /* do something */
      }
  })
復制代碼

應用

下面開始在Page中使用 getElementsById 來抓取自定義組件實例

wxml

<ui-component dataSource="{{config}}" />
復制代碼

js

Page({
    data: {
        config:  {
            $$id: 'component-id',
            title: 'some text'
        }
    },
    
    onReady(){
        // 我們應該在onReady中來調用,onLoad時,頁面組件結構并沒有渲染完成  
        const $ele = app.getElementsById('component-id')
        $ele.active('.active') 
    }
})
復制代碼

至此,基本思路已經實現,現在即兼容了selectComponent方法,又簡化了寫模板id的麻煩。不知道大家有沒有了解小程序組件是可以遞歸嵌套自己的(模板不能遞歸嵌套)。因此聰明的你應該可以想到通過數據嵌套去實現組件嵌套,進而實現結構嵌套,這樣我們就能夠實現很復雜的頁面結構,當然小程序目前建議是結構應該在30層左右,然并卵,反正它能夠正常顯示,哈哈

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 天天修改 來自: 掘金
东方红彩票 - 购彩大厅 今日股票大盘走势图 买一千块股票亏了两千 股票下跌途中放量 如何买股票新手入门 深圳股票开户 今日上证大盘指数 中泰化学股票后市走 中原环保股票趋势 股票怎么开户 资产配置私募基金配置比例