小程序開發知識必備-自定義組件

1.認識自定義組件的屬性、數據、方法和生命週期。

1>自定義組件的屬性、數據、方法

【properties】：自定義組件的對外屬性，是屬性名到屬性設置的映射表，屬性設置中可包含三個字段， type 表示屬性類型（可以是String，Boolean，Array）、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數。

【data】: 組件的內部數據，和 properties 一同用於組件的模版渲染。

【methods】: 組件的方法，包括事件響應函數和任意的自定義方法

Component({
  //1.組件的需要渲染的數據
  properties: {
    //屬性值可以在組件使用時指定
    isShow: {
      type: Boolean,
      value: false
    }
  },
  // 這裏是一些組件內部數據
  data: {
  	isValue:false
  },  
  methods: { //頁面方法
    preventTouchMove() {},
    closeModel() {
      this.setData({
        isShow: false
      })
      //獲取組件內data的數據
      console.log(this.data.isValue)
      //獲取渲染的properties的數據
       console.log(this.properties.isValue)
    }
  }
})

methods中獲取數據，

一種是獲取data裏的數據： this.data.屬性名；

一種是獲取 properties 中的屬性值： this.properties.屬性名。

2>自定義組件的生命週期

created：在組件實例進入頁面節點樹時執行，注意此時不能調用 setData

attached：在組件實例進入頁面節點樹時執行， this.data 已被初始化爲組件的當前值，絕大多數初始化工作可以在這個時機進行。

ready：在組件佈局完成後執行，此時可以獲取節點信息（使用 SelectorQuery）

moved：在組件實例被移動到節點樹另一個位置時執行。

detached：在組件實例被從頁面節點樹移除時執行。

Component({
        created:function(){
            // 組件生命週期函數，在組件實例進入頁面節點樹時執行，
            //注意此時不能調用setData
            console.log('Component-1 >> created');
        },
        attached:function(){
            // 組件生命週期函數，在組件實例進入頁面節點樹時執行。
            console.log('Component-1 >> attached');
        },
        ready:function(){
            // 在組件佈局完成後執行，此時可以獲取節點信息
            // (組件生命週期函數-在組件佈局完成後執行)
            console.log('Component-1 >> ready');
        },
        moved:function(){
            // 在組件實例被移動到節點樹另一個位置時執行
            console.log('Component-1 >> moved');
        },
        detached:function(){
            // 在組件實例被從頁面節點樹移除時執行
            console.log('Component-1 >> detached');
        },
        lifetimes:{
            // 組件生命週期聲明對象，將組件的生命週期收歸到該字段進行聲明///，
            //原有聲明方式仍舊有效，如同時存在兩種聲明方式
           // ，則lifetimes字段內聲明方式優先級最高
            created:function(){
                console.log('Component-1 lifetimes >> created');
            },
            attached:function(){
                console.log('Component-1 lifetimes >> attached');
            },
            ready:function(){
                console.log('Component-1 lifetimes >> ready');
            },
            moved:function(){
                console.log('Component-1 lifetimes >> moved');
            },
            detached:function(){
                console.log('Component-1 lifetimes >> detached');
            }
        },
        pageLifetimes:{
            // 組件所在頁面的生命週期聲明對象，
            //目前僅支持頁面的show和hide兩個生命週期
            show:function(){
                console.log('Component-1 pageLifetimes >> Show');
            },
            hide:function(){
                console.log('Component-1 pageLifetimes >> Hide');
            }
        }

    })

2.小程序頁面生命週期函數

1>小程序生命週期App.js

App({

  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {

    var userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.globalData.userInfo = userInfo;
    }

  },
onShow(): function() {
  console.log('onShow監聽小程序顯示');
},

onHide(): function() {
  console.log('onLaunch監聽小程序隱藏');
},

2> 小程序生命週期xxx.js（非App.js）

Page({
  data:{
    },
  onLoad:function(options){
    // 生命週期函數--監聽頁面加載
    console.log("onLoad");
  },
  onReady:function(){
    // 生命週期函數--監聽頁面初次渲染完成
    console.log("onReady");
  },
  onShow:function(){
    // 生命週期函數--監聽頁面顯示
   console.log("onShow");
  },
  onHide:function(){
    // 生命週期函數--監聽頁面隱藏
     console.log("onHide");
  },
  onUnload:function(){
    // 生命週期函數--監聽頁面卸載
     console.log("onUnload");
  },
  onPullDownRefresh: function() {
    // 頁面相關事件處理函數--監聽用戶下拉動作
     console.log("onPullDownRefresh");
  },
  onReachBottom: function() {
    // 頁面上拉觸底事件的處理函數
     console.log("onReachBottom");
  },
   /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

3>生命週期圖示

小程序註冊完成後，加載頁面，觸發onLoad方法，一個頁面只會調用一次（剛加載時調用一次）；

頁面載入後觸發onShow方法，顯示頁面，每次打開頁面都會調用一次（只要展示這個頁面，就會自動加載）；

首次顯示頁面，會觸發onReady方法，渲染頁面和樣式，一個頁面只會調用一次（剛加載時調用一次）；

當小程序後臺運行或跳轉（wx.navigateTo）到其他頁面時，觸發onHide方法；

當小程序從後臺進入前臺運行或重新載入頁面時，觸發onShow方法；

當小程序使用wx.readirectTo()、關閉當前頁和返回上一頁wx.navigateBack(),會觸發onUnload

1.小程序

頁面加載順序是先加載onLoad，再是onShow，最後onReady

2.原生JS

document.ready 表示文檔結構加載完成（不包含圖片等非文字媒體文件）；ready如果定義多個，都會按渲染順序執行。
window.onload 包含圖片等在內的所有元素都加載完成。但是，onload不管定義多少個，只執行一個（最後一個）
加載順序是先加載ready，後onload，正好和小程序相反

3.Jquery

(document).ready(function())
簡寫爲
(function(){});

3.小程序組件的使用

父組件：

index.json

{
  "usingComponents": {
    "v-select": "/component/select/select"
  }
}

注意事項:
v-select是你定義的組件的名稱，後面的是組件所在的位置。 / 單斜槓表示根目錄，是絕對路徑。
如果控制檯報錯，出現沒找到路徑的情況，一定是自己填寫的路徑不對，認真檢查路徑代碼。

index.wxml

  <v-select select-array='{{selectArray}}'  bind:getNowData='getCurrentTextAction'  current-text="{{current_text}}"></v-elect>

1.select-array 是我在組件中自定義的屬性名，這個是和組件所在的 js 中properties中的屬性是對應的。在 properties 定義的屬性中，屬性名採用駝峯寫法例如：selectArray。在引入組件的 wxml 中，指定屬性值時則對應使用連字符寫法例如：select-array='{{selectArray}}，selectArray爲select組件中所需展示的數據源。

2.這裏getNowData是自定義的子組件需要觸發的事件名，getNowData是引入組件的頁面需要獲取傳過來的數據的自定義的事件名。

index.js

getCurrentTextAction(e){
    let item = e.detail;
    this.setData({
      current_text: item.name, 
      current_type: item.type
    });
  }

子組件：

在component文件目錄下，創建一個select文件夾，隨後select文件夾下手動創建：select.js、select.json、select.wxml、select.wxss 四個文件。

select.json

{
  "component": true
}

select.wxml

<view class='section-select-box'>
  <view class='select-content' bindtap='selectToggleAction'>
    <view class='select-text'>{{currentText}}</view>
    <image class='select-img' src='../../images/icon_arrow_down.png' animation="{{arrowAnimation}}"></image>
  </view>

  <view class='select-list' wx:if="{{isShow}}">
      <view class='select-list-item' wx:for="{{selectArray}}" data-index="{{index}}" wx:key='{{index}}' bindtap='selectItemAction'>{{item.name}}</view>
  </view>
</view>

select.js

Component({
  /**
 1. 組件的需要渲染的數據
   */
  properties: {
    selectArray: {
      type: Array,
    },
     // 初始時要展示的內容
    currentText:{
      type:String,
    }
  },

  /**
 2. 是組件的內部數據
   */
  data: {
    isShow: false, // 初始option不顯示
  },

  /**
 3. 組件的方法列表
   */
  methods: {
    //option的顯示與否
    selectToggleAction: function () {
      // 獲取當前option顯示的狀態
      var nowShow = this.data.isShow;

      if (nowShow) {
       
      } else {
        
      }
      this.setData({
        isShow: !nowShow
      })
    },
    //設置內容
    selectItemAction: function (e) {
      // 當前option的數據是引入組件的頁面傳過來的，所以這裏獲取數據只有通過this.properties
      var nowData = this.properties.selectArray;
      var index = e.target.dataset.index; // 當前點擊的索引
      var current_text = nowData[index].name; // 當前點擊的內容
      var current_type = nowData[index].type; // 當前點擊的內容
 
      this.setData({
        isShow: false,
        current_text: current_text,
      })
      // 內容更新後，需要把更新的數據傳輸出去
      var nowDate = {
        id: index,
        name: current_text,
        type: current_type
      }
      // 這裏的 getNowData 要和外部的 bind:getNowData ，名稱一定要對應
      this.triggerEvent('getNowData', nowDate);
    }
  }
})

傳參

//父組件傳值
<v-select select-array='{{selectArray}}' current-text="{{current_text}}"></v-elect>

//子組件接收使用properties接收
 properties: {
    selectArray: {
      type: Array,
    }
  }

傳事件

//子組件給父組件傳遞值（通過方法傳值） 
// 這裏的 getNowData 要和外部的 bind:getNowData ，名稱一定要對應
   this.triggerEvent('getNowData', nowDate);

//父組件
<v-select  bind:getNowData='getCurrentTextAction'></v-elect>

文章參考：
https://www.cnblogs.com/xiao-apple36/p/12867092.html
https://www.jianshu.com/p/1b83e00738a9
https://blog.csdn.net/qq_35872379/article/details/87935688

小程序開發知識必備-自定義組件

1.認識自定義組件的屬性、數據、方法和生命週期。

1>自定義組件的屬性、數據、方法

2>自定義組件的生命週期

2.小程序頁面生命週期函數

1>小程序生命週期App.js

2> 小程序生命週期xxx.js（非App.js）

3>生命週期圖示

1.小程序

2.原生JS

3.Jquery

3.小程序組件的使用

父組件：

子組件：

傳參

傳事件

這個網絡爬蟲代碼，拿到數據之後如何存到csv文件中去？

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

【面試準備】【SQL】數據庫有哪些約束？

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

小程序輪播圖片高度自適應

談談你不知道的gist

git常見的命令

小程序開發知識必備-自定義組件

Tomcat下部署vue項目[history模式]

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結