亚洲一区二区三区无码少年_日韩亚洲欧美综合一区二区三区_国产精品成人69xxx_被主人狠狠调教打屁股_国产女厕所偷窥系列在线视频_老头猛挺进王进霞的体内视频_日本女同伦理片_一级毛片特黄视频免费观看_国产成人无码免费看视频软件

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

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

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

1. 自定義組件

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

2.創(chuàng)建自定義組件的方法

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

{
  "component": true
}

而其樣式也頁面的結(jié)構(gòu)也是在對應的文件中編寫，

<!--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() 來注冊組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。

//其中數(shù)據(jù)data和方法methods的使用方法和頁面的一樣
Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'hello weichar',//默認的值，可以在使用時傳入
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
   
    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>

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