微信小程式_component 自定義元件

前兩個星期，我的電腦差點被黑白無常給勾走了。

現在我的電腦終于鬼門關裡走一趟，平安回來了。我的部落格也要正常更新了，( •̀ ω •́ )y

這次我要跟新的内容依然是關于【微信小程式】，這次是有關 自定義元件

在這個案例裡面：是在 index 界面裡面 ， 使用了 navigation 元件

自定義元件

• 自定義元件的必要性：

1. 問題描述：在一個界面或者多個界面中，如果我們都需要重複使用一些長得相似，代碼幾乎一模一樣的元件。我們怎麼辦？例如：微信小程式，每個二級界面都需要一個導航欄，就隻有标題不一樣。
2. 自定義元件：這個時候，微信小程式為我們提供了自定義元件的申明和使用方法的介紹。

自定義元件的申明方法：

1. 建立navigation 元件檔案：

   本例路徑：/static/component/navigation

   檔案夾建立好以後，滑鼠右鍵-建立Component-填寫檔案名稱 這裡的名稱最好和檔案夾名保持一緻

2. 代碼：

   打開 元件的 .json 檔案，将

   component

   屬性設定為

   true

   将這個 navigation 申明為一個自定義元件。

   在 .wxml .wxss 兩個檔案裡寫上基本的元件結構

//navigation.json
{
  "component":true
}
           

// 導航欄元件
// navigation.wxml
<view class="component">
   <view class="navigation_container">
      <image src="/static/icons/navigation_icons/back.png" class="navigation_icon" catchtap="Back"></image>
      <text class="navigation_title">{{title}}</text>
   </view>
</view>
           

//navigation.wxss
/* pages/science/science.wxss */
.navigation_container {
   width: 100%;
   height: 60px;
   background-color: rgba(228, 228, 228, 0.952);
   display: flex;
   align-items: center;
}

.navigation_icon {
   height: 25px;
   width: 25px;
   margin-right: 8px;
   margin-left: 8px;
}

.navigation_title {
   font-size: 20px;
}
           

1. .js檔案：和一般的 page 頁面有一些不一樣，

Component({							//開始的部分是Component，不是一般界面的 page

   properties: {							//之裡面放的一些是可以在頁面調用元件時修改的資料。
      title: {
         type: String,					//資料的類型
         value: 'default value',		// 表示這裡的值：是調用元件時設定的值
      }
   },
   data: {
      someData: {}					//一些私有的值，調用的界面無法設定
   },
   methods: {						//一些方法，函數
      Back() {
         wx.navigateBack({
         })
      }
   }
})
           

自定義元件的使用

在

app.json

檔案裡建立界面 index，在 .json 檔案裡面

usingComponent

屬性裡面聲明頁面即将用到的 自定義元件 的 标簽名稱 以及 元件路徑 。日後在該界面中使用時，就可以直接使用

<标簽名 />

//index.json
{
  "usingComponents": {
    "navigation": "/static/component/navigation/navigation" ,
  },
}
           

在 .wxml 檔案中，就可以直接調用。其中，前文說到的：元件中的

title

是

properties

屬性裡面的資料，這裡面的資料的值：元件可以擷取、頁面可以設定。

// index.wxml
<view class="page">
   <!-- 導航欄區域 -->
<navigation title="急救科普"/>			//調用元件，并且設定 title為設定值
</view>
           

.js .wxss 就不用進行什麼操作了。

完成的效果就差不多是這樣了

好了，今天的分享就到這裡了。另外我會多多更新的，雖然看的人估計不多，但是用這種方法記錄學習足迹我覺得成就感就是非常的有😄。

最近也是咨詢了考研的問題，也決定了參加幾個比賽。别的不說，忙起來是挺好。認識的人也靠譜。

哈哈哈哈不說了。以上就是一個大二的前端的根正苗紅小少年的分享。看到的大家們，都要生活幸福，學習進步，money噌噌噌⬆

拜拜ヾ(•ω•`)o