• 您的電話 *

  • 您的需求

  • 發送

顛覆視覺創新  塑造優-秀品牌

展示企業形象  宣傳產品服務

您當前所在的位置:

搜索

微信小程序頁面代碼復用探索

作者:華夏支點網絡 瀏覽:7048 發表時間:2020-11-08 09:05:08



寫在前面


微信小程序開發的碎碎念


在上一篇文章的碎碎念中,我提到了小程序開發中一個比較尷尬的問題:代碼復用問題。到這周為止,我一個頁面的js代碼行數已經達到了2000+,并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了



現有的代碼復用方案及其問題


現有的代碼復用方案,使用微信小程序的組件Component。Component本身就是一種代碼復用。而且在Component中,還提供了Behavior來共享代碼。但是,這種解決方案并不能覆蓋所有場景。


舉一個例子,我的頁面中需要實現一個自定義title-bar,當頁面滑動時,滑到一定的位置,這個title-bar的背景需要變成透明的,當滑動到另外一個位置時,title-bar需要變成純色的。顯然,我們需要在Page的onPageScroll中,去實現邏輯。現在,在另外一個頁面中,又需要同樣效果的title-bar。很自然的,我們需要把這個title-bar剝離成一個組件,頁面直接引用,盡量不需要在Page頁面中寫邏輯。比較遺憾的是,使用Compoent做不到這一點。不管怎樣,都需要在對應Page中的onPageScroll里去寫邏輯。


其次,Component提供的Behavior,本質上是一種mixin。而mixin方案本身存在命名沖突,隱式依賴的問題。當多人協作開發同一個復雜頁面、組件時,如果沒有實現約定以及充分溝通,一不小心把別人的方法覆蓋了(或被覆蓋了),就尷尬了(我就踩坑了)。


我認為,微信小程序缺少一個相互隔離、顯性依賴的頁面層代碼復用方案



實現一個新的代碼復用方案吧


既然微信暫時沒有提供這樣的解決方案,那自己來實現一個好了。既然自己實現,那就先明確一下需求。以上面的title-bar舉例,我想實現的效果大致如下。

title-bar組件js代碼,像寫Page代碼一樣:

    // title-bar組件 js文件export default { ...data: { titleBarStyle: 'rgb(255,0,0)'},onPageScroll: function (e) {this.handleTitleBarChange(e.scrollTop);},handleTitleBarChange() {...this.setData({titleBarStyle: 'transparent'});...}...}


      // title-bar組件wxml代碼:...


      組件使用方法:

        // Page頁面 js文件Page({...// 直接引用titlecomponents: ['title-bar.js'],...});


          // Page頁面 wxml文件,引用title-bar對應的wxml......


          上面的代碼和mixin很類似。前文也提到了,mixin會有命名沖突,隱式依賴的問題。其他組件里面萬一也有一個handleTitleBarChange的方法,相互覆蓋咋辦。新的解決方案需要處理這個問題。

          同時,新的解決方案最好可以是漸進式、輕量級的,方便現有小程序代碼進行改造。

          總結一下,最終想要達到的目標是:


          1、像寫Page一樣寫”組件“,在Page中直接引用即可復用代碼。

          2、避免命名沖突和隱式依賴。

          3、輕量級,方便已有頁面接入。


          事實上,滿足上述三個目標的解決方案,我已經實現了70%了。在后續的文章中,我會進行進一步的介紹。


          寫在后面


          對于微信小程序開發這個領域,我深度接觸的時間并不長。有什么其他解決頁面層的代碼復用問題的方案嗎?歡迎交流。

          微信小程序頁面代碼復用探索
          并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了。
          長按圖片保存/分享
          0

          微信小程序頁面代碼復用探索

          2020-11-08 09:05:08

          瀏覽: 7049

          并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了。



          寫在前面


          微信小程序開發的碎碎念


          在上一篇文章的碎碎念中,我提到了小程序開發中一個比較尷尬的問題:代碼復用問題。到這周為止,我一個頁面的js代碼行數已經達到了2000+,并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了



          現有的代碼復用方案及其問題


          現有的代碼復用方案,使用微信小程序的組件Component。Component本身就是一種代碼復用。而且在Component中,還提供了Behavior來共享代碼。但是,這種解決方案并不能覆蓋所有場景。


          舉一個例子,我的頁面中需要實現一個自定義title-bar,當頁面滑動時,滑到一定的位置,這個title-bar的背景需要變成透明的,當滑動到另外一個位置時,title-bar需要變成純色的。顯然,我們需要在Page的onPageScroll中,去實現邏輯。現在,在另外一個頁面中,又需要同樣效果的title-bar。很自然的,我們需要把這個title-bar剝離成一個組件,頁面直接引用,盡量不需要在Page頁面中寫邏輯。比較遺憾的是,使用Compoent做不到這一點。不管怎樣,都需要在對應Page中的onPageScroll里去寫邏輯。


          其次,Component提供的Behavior,本質上是一種mixin。而mixin方案本身存在命名沖突,隱式依賴的問題。當多人協作開發同一個復雜頁面、組件時,如果沒有實現約定以及充分溝通,一不小心把別人的方法覆蓋了(或被覆蓋了),就尷尬了(我就踩坑了)。


          我認為,微信小程序缺少一個相互隔離、顯性依賴的頁面層代碼復用方案



          實現一個新的代碼復用方案吧


          既然微信暫時沒有提供這樣的解決方案,那自己來實現一個好了。既然自己實現,那就先明確一下需求。以上面的title-bar舉例,我想實現的效果大致如下。

          title-bar組件js代碼,像寫Page代碼一樣:

            // title-bar組件 js文件export default { ...data: { titleBarStyle: 'rgb(255,0,0)'},onPageScroll: function (e) {this.handleTitleBarChange(e.scrollTop);},handleTitleBarChange() {...this.setData({titleBarStyle: 'transparent'});...}...}


              // title-bar組件wxml代碼:...


              組件使用方法:

                // Page頁面 js文件Page({...// 直接引用titlecomponents: ['title-bar.js'],...});


                  // Page頁面 wxml文件,引用title-bar對應的wxml......


                  上面的代碼和mixin很類似。前文也提到了,mixin會有命名沖突,隱式依賴的問題。其他組件里面萬一也有一個handleTitleBarChange的方法,相互覆蓋咋辦。新的解決方案需要處理這個問題。

                  同時,新的解決方案最好可以是漸進式、輕量級的,方便現有小程序代碼進行改造。

                  總結一下,最終想要達到的目標是:


                  1、像寫Page一樣寫”組件“,在Page中直接引用即可復用代碼。

                  2、避免命名沖突和隱式依賴。

                  3、輕量級,方便已有頁面接入。


                  事實上,滿足上述三個目標的解決方案,我已經實現了70%了。在后續的文章中,我會進行進一步的介紹。


                  寫在后面


                  對于微信小程序開發這個領域,我深度接觸的時間并不長。有什么其他解決頁面層的代碼復用問題的方案嗎?歡迎交流。

                  作者: 華夏支點網絡
                  0
                  微信小程序頁面代碼復用探索
                  并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了。
                  長按圖片保存/分享

                  相關設計案例

                  相關網站設計案例

                  建站資訊

                  .

                  Are you interested in ?

                  擼起袖子干,干之前,先說說您的要求吧!


                  網站制作咨詢電話

                  15285141318

                  18685842288


                    微信客服


                  填寫網站制作,網頁設計,seo優化需求  * 請認真填寫需求信息,24小時內與您聯系。

                  • 您的電話 *

                  • 您的需求

                  • 提交咨詢

                  ? 2012-2020 華夏支點 版權所有 黔ICP備2020008579號  黔公網安備 01982109827101號    SITEMAP

                  專業的網站建設/推廣、微信小程序開發、軟件開發公司

                  服務熱線:15285141318 / 18685842288

                  建站郵箱:449180048@qq.com

                  ? 2010-2020  華夏支點網絡  版權所有  SITEMAP

                  在線咨詢
                  TOP
                  在線咨詢
                  在線咨詢 聯系方式 二維碼
                  熱線電話
                  15285141318
                  E-mail地址
                  449180048@qq.com
                  二維碼
                  TOP
                  特区彩票论坛海南七星彩