關於小程序胡言亂語

image標籤

• 有默認寬高 320 × 240
• mode屬性決定圖片的顯示方式和寬高適配
  * scaleToFill:默認；不縮放直接拉伸至滿image元素
  * aspectFit:保持縱橫比，確保長邊被顯示，經常使用於於輪播圖
  * widthFix:保持縱橫比，高度根據寬度等比例拉伸，用於日常頁面
• lazi-load屬性決定圖片是否懶加載，默認false

swiper與swiper-item標籤

• swiper:輪播外層容器組件，必須與swiper-item配合使用
• swiper-item:輪播項,普通的塊級元素
• swiper存在默認樣式：
  * 默認寬高：100% × 150px
  * 內部圖片也存在默認寬度和高度 320 × 240
  * swiper高度沒法實現由內部撐開
  * 解決辦法：先找到原圖的寬度和高度，等比例給swiper定寬高

找到原圖的寬和高，而後得出比值 swiperW / swiperH = 原圖w / 原圖h
swiperH = 100vw(100%swiperW ) * 原圖h / 原圖w

swiper{
width:100%;
height: calc(100vw * 原圖h / 原圖w);
}
swiper swiper-item image{
width:100%;
}

還須要給圖片添加 mode = "aspectFit"

navigation標籤

• 跳轉標籤相似a標籤
• open-type屬性表示跳轉方式
  1. navigation: 默認；跳轉到指定頁面，不跳轉tabbar
  2. redirect：覆蓋當前頁面，不跳轉tabbar
  3. switchTabbar:覆蓋其餘頁面，跳轉tabbar
  4. relauch:關閉全部頁面，打開應用內的某個頁面
  5. navigationBack:回退頁面

自定義組件

• 自定義組件的註冊
  1. 根目錄下新建components目錄
  2. components目錄下新建tabs目錄
  3.開發者模式下右鍵新建component
• 自定義組件的使用
  1. 視圖目錄下新建index1
  2. 在index1.json的usingComponents項新增鍵值對：
  3. index1.wxml引入Tabs組件

//index1.json
{
  "usingComponents": {
    "Tabs": "../../commonents/Tabs/Tabs"
  }
}

父向子傳遞數據

• 父組件向子組件傳遞數據經過標籤屬性的方式來傳遞
• 子組件經過components.js裏的properties接收父組件傳遞過來的數據
• 子組件能夠直接將其做爲子組件內部的data內的數據直接使用在子組件內部

//index1.wxml
<Tabs aaa="aaa123" />

//tab子組件 tab.js
properties: {
     //接收的組件值
    aaa: {
      // type : 要接收的類型
      type: String,
      // value:默認值
      value: ''
    }
  }

//子組件tabs內使用父組件傳遞來的值 tabs.wxml
這是組件 接收到的父組件的數據---》{{aaa}}

[].foreach()

使用foreach遍歷數組時，修改了v會致使原數組被改變

list.foreach((v,i)=>{
i === v.index ? v.isActive = true : v.isActive = false
})

對象的結構賦值

• 解構對複雜類型的操做是賦值了其引用地址的操做

let tab = this.data.tab
let {tab} = this.data

簡單實現深拷貝

let arr = JSON.parse(JSON.stringify(this.data.arr))

生命週期

整個程序的入口文件是APP.js
單個頁面的入口文件是Page.js
單個組件的入口文件是Component.js

• 應用的聲明週期
  1. onLaunch:應用被啓動時觸發的函數，僅執行一次
  * 頁面剛被啓動時就能夠獲取用戶信息，並能夠被頁面使用
  2. onShow:應用被用戶看到時觸發的函數
  * 對應用的數據或頁面效果進行重置
  3. onHide:應用被隱藏時觸發的函數
  * 暫停或清除定時器
  4. onError(err):當應用的代碼發生了報錯的時候就會觸發
  * 應用報錯時，收集用戶報錯信息，經過異步請求，將錯誤的信息發送出去
  5. onPageNotFound:當頁面不存在時觸發函數
  * 第一次進入應用若是找不到入口頁面時觸發
  * 一般在這裏從新定義頁面的入口的入口文件

// app.js
      //不能跳到tabbar
  onPageNotFound(){
    wx.navigateTo({
      url: '',
    })
  }

• 頁面的聲明週期
  1. data : 頁面的初始數據
  2. onload:監聽頁面加載時觸發的函數
  * 發送異步請求來初始化頁面數據
  3. onshow:頁面顯示時觸發的函數
  *
  4. onReady:頁面渲染完畢觸發的函數
  5. onHide：頁面被隱藏時觸發的函數
  6. onPullDownRefresh:用戶下拉時觸發的函數
  * 一般用於用戶下拉動做後對頁面效果或數據進行初始化
  * 執行該函數須要page/app.json配置容許下拉 "enablePullDownRefresh": true
  7. onReachBottom：監聽用戶上拉觸底事件，頁面高度不夠因此頁面不能滾動，不能滾動就不能觸底
  * 一般用於上拉發送請求加載下一頁的操做
  8. onShareAppMessage：用戶點擊右上角分享時觸發
  * 自定義分享按鈕配置也應該在onShareAppMessage裏實現

//onShareAppMessage:觸發share事件時自定義界面
onShareAppMessage: function () {
     return {
      title:"轉發的標題",
      path:"以/開頭，決定用戶要進入的界面",
      imageUrl:"圖片的地址，能夠是本地圖片，也能夠是網絡圖片，若是沒有則默認將當前頁截圖做爲分享頁圖片發送出去"
    }
}

自定義分享按鈕

9. onPageScroll(options): 當頁面滾動時觸發函數
        * 在小程序裏頁面滾動到必定距離時顯示會頂按鈕：[https://www.bilibili.com/video/BV1Kt411V7rg?p=65](https://www.bilibili.com/video/BV1Kt411V7rg?p=65)
  10. onReSize:當頁面的尺寸發生改變時觸發
        * 用於小程序發生橫屏豎屏切換時觸發