商业级小程序开发

组件开发是必不可少的

组件开发

通过学习微信小程序 ，我终于深刻认识到组件开发的重要性，以及其中的优越性

1. 全新的组件设计 ，将会带来非常棒的代码体验；
2. 高度解耦性
3. 高度封装性
4. 超级强的复用性
5. 即使麻烦了点，但是只要掌握了组件开发的思维，以后开发都会非常高效快捷
6. 非常适合敏捷开发
   7.与程序员写代码的年限有关，写的项目越多了，组件库越多了，到时候拿来即可使用

小程序常用功能快捷键

撤销：Ctrl/Command + Z

让我们看看组件的高阶代码吧（注意是高阶哦，剧透）

import { KeyWordModel } from "../../models/keyword";
import { BookModel } from "../../models/book";
import { paginationonBev } from "../behaviors/pagination";
const bookmodel = new BookModel();
const keywordmodel = new KeyWordModel();
Component( {

  data: {
    historyWords: [],
    hotwords: [],
    dataArr: [],
    searching: false,
    tagDetext: '',
    loading: false,
    loadingCenter: false
    // shifou fa sheng qing qiu
  },
  attached ()
  {

    this.setData( {
      historyWords: keywordmodel.getHistory()
    } )

    // search zujian de  fuyong  buyao kaiffang yige properties
    keywordmodel.getHot().then( res =>
    {
      this.setData( {
        hotwords: res.hot
      } )
    } )
  },
  behaviors: [ paginationonBev ]
  ,
  properties: {
    more: {
      type: String,
      observer: 'loadMore'
    }
  },
  methods: {
    loadMore ()
    {

      if ( this._isLocked() )
      {
        return
      }

      //suozhu
      if ( this.hasMore() )
      {
        this._locked()
        bookmodel.search( this.getCurrentStart()
          , this.data.tagDetext )

          .then( ( res ) =>
          {
            this.setMoreData( res.books )
            this._unLocked()
          }, () =>
            {
              this._unLocked()
            } )

      }
    },
    onConfirm ( event )
    {
      this._showResult()
      this._showLoadingCenter()
      this.initailize()
      const word = event.detail.value || event.detail.text;
      bookmodel.search( 0, word )
        .then( res =>
        {
          this.setMoreData( res.books )
          this.setTotal( res.total )
          this.setData( {
            tagDetext: word
          } )

          keywordmodel.addToHistory( word );
          this._hideLoadingCenter()

        } )
    }
    ,
    _showLoadingCenter ()
    {
      this.setData( {
        loadingCenter: true
      } )
    },

    _hideLoadingCenter ()
    {
      this.setData( {
        loadingCenter: false
      } )
    },


    onCancel ( event )
    {
      this.initailize()
      this.triggerEvent( 'cancel' )
    }
    ,
    onDelete ( event )
    {

      this.initailize()
      this._closeResult()
    },


    _showResult ()
    {
      this.setData( {
        searching: true
      } )
    },
    _closeResult ()
    {

      this.setData( {
        searching: false,
        tagDetext: ''
      } )
    }
  }
} )

下次我们再好好讲讲小程序开发的具体流程与步骤吧