国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

微信小程序中自定義組件的使用

作者：龍 時間：2018-07-24 瀏覽：

從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。所有自定義組件相關特性都需要基礎庫版本 1.6.3 或更高。

1. 自定義組件

在開發過程中，加入有這樣一種場景，就是在開發的過程中，我們一直要使用一些相同或者類似的結構，我們就可以自定義模塊，方便使用，以及后期的維護，了解vue的同學就知道，其中此方法類似vue中的插槽（slot）；

2.創建自定義組件的方法

類似頁面一樣，類似于頁面，一個自定義組件由 json、 wxml 、wxss、 js 4個文件組成。要編寫一個自定義組件，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可這一組文件設為自定義組件），例如要自定義一個common組件，需要在common.json中配置如下字段：

{
  "component": true
}

而其樣式也頁面的結構也是在對應的文件中編寫，

<!--wxml-->
<view class="innertxt" bindtap='customMethod'>
  {{innerText}}
</view>
<view>
  {{color}}
</view>
<slot></slot>


<!--wxss-->

.innertxt{
  width:750rpx;
  color:red;
  font-size:24px;
}

<!--其中需要注意的是：在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。為什么？呵呵-->

與頁面和組件不同的是：在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，并提供組件的屬性定義、內部數據和自定義方法。

//其中數據data和方法methods的使用方法和頁面的一樣
Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'hello weichar',//默認的值，可以在使用時傳入
    }
  },
  data: {
    // 這里是一些組件內部數據
   
    color:'red'
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function () {
       console.log('點擊了我')
       this.setData({
         color:'blue'
       })
     }
  }
})

3.自定義組件的使用

例如在index頁面中，我們要使用上邊的common自定義組件時，需要在index.json文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑

{
  "usingComponents": {
    "common": "../components/common"
  }
}

再index.wxml中使用

<!--index.wxml-->
<import  src='../template/banner.wxml'/>
<view class="container">
  <image class='part01' src='../img/bg-about01.jpg'></image>
</view>
<view class='num'> {{count}} </view>
<view class='txt'wx:if="{{show=='part01'}}">hello weichar</view>
<button bindtap="add">點擊我</button>
<template is="friutsItem"  data='{{friuts}}'/>
<common inner-text='good morning'></common>
<common></common>

編譯后就會發現了效果，回頭想一想這樣的模塊化是不是在使用中很方便，而且在以后的維護中也很容易。。。