国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序開發 > 教程 >

      小程序如何寫動態標簽

      來源:微信小程序 編輯:Yiyongtong.com 發布時間:2020-05-22 10:01熱度:

      web開發中,尤其使用react開發項目時,我們可以很方便的動態定義標簽(jsx)

      const props = {
        id: '',
        className: '',
        data-a: ''
      }
      <button {...props} />
      復制代碼

      動態配置標簽的好處一是所有邏輯在JS端控制,二是使得我們的模板非常規范,方便后續維護更新,碎片模板可以很好的控制,三是我們可以根據使用場景很方便的配置props的屬性,這樣在html結構輸出的時候能夠得到比較干凈的結構

      小程序的開發中,卻不能實現類似的功能,導致我們的動態標簽通常非常的冗余,多余的屬性全部展示在結構生成后

      以button為例,我們知道button在小程序中有非常多的屬性

      如上所示,這里只是列舉了一部分的屬性

      動態模板

      我們的button動態模板寫下來應該是這樣的

      配置

      Page({
        data: {
          option: {
            ...
          }
        }
      })
      復制代碼
      <button
        size="{{option.size || 'default'}}"
        type="{{option.type || 'default'}}"
        plain="{{option.plain || false}}"
        value="{{option.value || '按鈕'}}"
        ...
        ...
      />
      復制代碼

      調試工具的輸出結構

      <button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />
      復制代碼

      可以看到調試工具中輸出的結構就會變得非常冗余,降低了開發效率,這種冗余的模板輸出搞久了會吐的好吧。

      可以使用模板語法區分不同場景的button,我知道會有很多這樣的聲音,但那不是動態模板。

      解決問題

      那要如何解決輸出結構不冗余呢,說了這么多終于到了重點,其實真的只是一個很小的技巧,我的開發經歷告訴我這是有效的,你也可以試試,將默認值統統換成 '' ,改版后的模板如下

      <button
        size="{{option.size || ''}}"
        type="{{option.type || ''}}"
        plain="{{option.plain || ''}}"
        value="{{option.value || '按鈕'}}"
        ...
        ...
      />
      復制代碼

      這時你得到的模板就是一段漂亮的結構

      <button value='按鈕' />
      復制代碼
      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>