微信小程序 — 速學速查筆記

時間 2019-11-05

標籤微信程序速查筆記简体版

原文原文鏈接

1. 配置

配置全解析css

project.config.json ( 項目配置文件 )

{
    // 文件描述
    "description": "項目配置文件",
    // 項目代碼配置
    "setting": {
        // 是否檢查 url 域名安全性和 TLS 版本
        "urlCheck": false,
        // 是否將項目的 es5 代碼轉成 es6
        "es6": true,
        // 是否自動補全 css 兼容前綴
        "postcss": true,
        // 是否壓縮代碼
        "minified": true,
        // 是否啓用新功能
        "newFeature": true
    },
    // 編譯方式
    "compileType": "miniprogram",
    // 版本號
    "libVersion": "1.7.2",
    // appid
    "appid": "touristappid",
    // 項目名
    "projectname": "haiyangbg",
    // 項目配置
    "condition": {
        // 搜索關鍵字
        "search": {
            "current": -1,
            "list": []
        },
        // 客服
        "conversation": {
            "current": -1,
            "list": []
        },
        // 編譯方式
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

app.json ( 小程序配置 )

{
  // 項目路由設置（第一項爲首頁）
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 窗口設置
  "window":{
    // 頂部導航欄背景色，必須是十六進制顏色值，如"#000000"
    "navigationBarBackgroundColor": "#9ef468",
    // 頂部導航欄顯示文字
    "navigationBarTitleText": "組件展現",
    // 導航欄文字顏色，僅支持 black/white
    "navigationBarTextStyle": "black",
    // 下拉背景的文字樣式，僅支持 dark/light
    "backgroundTextStyle":"light",
    // 下拉背景色，必須是十六進制顏色值，如"#000000"
    "backgroundColor": "#333",
    // 是否開啓下拉刷新
    "enablePullDownRefresh": true,
    // 距離最底端觸多少距離時觸發觸底事件，單位px
    "onReachBottomDistance": 40
  },
  //網絡請求過時時間，單位毫秒
  "networkTimeout": {
    // 普通ajax請求
    "request": 20000,
    // Socket請求
    "connectSocket": 20000,
    // 文件上傳
    "uploadFile": 20000,
    // 文件下載
    "downloadFile": 20000
  },
  // tab導航欄
  "tabBar": {
    // 文字的顏色
    "color": "#999",
    // 選中時文字的顏色
    "selectedColor": "#000",
    // 背景色
    "backgroundColor": "#fff",
    // 上邊框的顏色，僅支持 black/white
    "borderStyle": "black",
    // tab導航欄顯示在底部仍是頂部(頂部不顯示圖片)
    "position": "bottom",
    // 導航欄列表項
    "list": [{
      // 導航到的頁面路徑
      "pagePath": "pages/index/index",
      // tab按鈕上的文字
      "text": "組件",
      // 圖片路徑
      "iconPath": "img/com-l.png",
      // 選中後顯示的圖片
      "selectedIconPath": "img/com-d.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "img/api-l.png",
      "selectedIconPath": "img/api-d.png"
    }]
  },
  // 調試信息
  "debug": true
}

page.json （單頁面配置）

單頁面的json就是app.json的window字段，當加載到這個頁面時，此配置將覆蓋app.jsones6

2. 生命週期

小程序 App 生命週期
onLaunch ------ 小程序初始化完成時，觸發(只會調用一次)
onShow ------ 1. 小程序啓動 2. 從後臺進入前臺顯示，觸發
onHide ------ 當小程序從前臺進入後臺，觸發
onError ------ 1. 發生腳本錯誤 2. api 調用失敗，觸發並帶上錯誤信息

單頁面 Page 生命週期
onLoad ------ 頁面加載時，觸發(只會調用一次)
onShow ------ 頁面顯示時，觸發
onReady ------ 初次渲染完成時，觸發(只會調用一次)
onHide ------ 頁面隱藏時，觸發
onUnload ------ 頁面卸載時，觸發

詳細的生命週期分類：ajax

1.小程序啓動：json

App.onLaunch - -> App.onShow - -> 註冊app.json pages裏的頁面(按索引順序) - -> 將app路由設置爲首頁路由 - -> 首頁page參數深拷貝 - -> 初始化首頁 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady 小程序

2.切後臺（app 和 page 生命週期重合）：api

小程序被切到後臺 - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow安全

3.跳轉頁面：微信

old 表示前一個頁面， new 表示新頁面網絡

navigateTo跳轉 - -> 將路由設置爲目標頁面路由 - -> old.onHide - -> 初始化頁面 data - -> new.onLoad - -> new.onShow - -> new.onReady
redirectTo重定向 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady
navigateBack頁面返回 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onShow
reLaunch重啓動 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady
switchTabTab 切換（圖截自官方文檔）

3. 數據綁定和渲染

數據綁定： { { message } }

渲染app

列表渲染：

- wx:for=" { { message } } "  
- wx:for-index="idx" （設置索引的變量名，默認 index ） 
- wx:for-item="itemName"（設置每一項的變量名，默認item ）

渲染塊：<block> </block>

條件渲染：

- wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if)
- hidden="boolean"

4. 模板（template）

基本用法

( 定義代碼片斷，能夠在不一樣的地方調用，使用 name 屬性，做爲模板的名字,調用時使用 is 屬性 )

// 源碼（須要和調用的頁面在同一個wxml裏）
<template name="template">
  <view>
    I am {{ name }} 
  </view>
</template>

// 調用
<template is="template" data="{{...message}}"/>

// js 數據
Page({
  data: {
    message: {
      name: '海洋餅乾'
    }
  }
})

進階用法

當時不少的頁面都須要同一個模板時，就須要模板導入了

先在pages文件夾中新建一個template文件夾，文件夾中新建一個template.wxml文件

// template.wxml
<template name="template">
  <view>
    I am {{ name }} 
  </view>
</template>

// page.wxml 調用
<import src ="../template/template.wxml"/>
<template is="template" data="{{...message}}"/>

// js 數據
Page({
  data: {
    message: {
      name: '海洋餅乾'
    }
  }
})

5. 事件

事件列表

點擊事件
- 點擊事件 tap
- 長按事件（超過0.35秒） longpress
觸摸事件
- 觸摸開始 touchstart
- 觸摸後開始移動 touchmove
- 觸摸後被打斷 touchcancel
- 觸摸結束 touchend
動畫事件
- 過渡完成時觸發 transitionend
- 動畫開始時觸發 animationstart
- 一次迭代結束時觸發 animationiteration
- 動畫完成時觸發 animationend

事件冒泡，事件捕獲

綁定事件 + 冒泡：bind + 事件名 , 如 bindtap
綁定事件 + 阻止冒泡：catch + 事件名 , 如 catchtap

捕獲 + 冒泡：capture-bind: + 事件名 , 如 capture-bind:tap
捕獲 + 中斷事件 + 取消冒泡：capture-catch: + 事件名 , 如 capture-catch:tap

事件對象

BaseEvent（基礎事件，全部事件的父類）
- type （ String - 事件類型）
- timeStamp （ Integer - 事件生成時的時間戳）
- target （ Object - 觸發事件的組件的屬性）
  - id （ String - 事件源的id ）
  - tagName （ String - 當前組件的類型）
  - dataset （ Object - 事件源組件上由data-開頭的自定義屬性集合）
- currentTarget （ Object - 當前組件的屬性）
  - 同 target
TouchEvent （觸摸事件）
- touches （ Array 停留在屏幕中的觸摸點的信息對象集合）
  - identifier （ Number - 觸摸點的標識符）
  - pageX （ Number - 距文檔左上角 x 軸的距離）
  - pageY （ Number 距文檔左上角 y 軸的距離）
  - clientX （ Number 距頁面可顯示區域 x 軸的距離）
  - clientY （ Number 距頁面可顯示區域 y 軸的距離）
- changedTouches （ Array 變化的觸摸點信息對象集合）
CustomEvent （自定義事件）
- detail （ Object - 自定義事件額外的信息）

6. wxs 模塊

wxs 文件就是 js 文件，引入 wxs 文件就是引入一個 js 模塊( 不能用es6 )，現有兩種引入方式

在 wxml 裏引用，使用 <wxs> 標籤
1.1. module 必填，爲當前模塊的模塊名
1.2. src 選填，引用 .wxs 文件的相對路徑（僅當標籤爲 單閉合標籤 或 標籤的內容爲空 時有效）
1.3. 例
```
引入：<wxs src="./index.wxs" module="index" />

   本身擼：
   <wxs module="index">
       var foo = '海洋餅乾'
       module.exports = {
           foo
       }
   </wxs>
```
在 wxs 裏引用，使用 require 引用
2.1. 例 var tools = require("./tools.wxs")

7. wxss 樣式

微信版的 css ，幾個不一樣的地方

添加自適應尺寸單位 ( rpx )
添加導入外聯樣式 ( @import )
精減 css選擇器，只支持
1. 類選擇器 .class
2. id選擇器 #id
3. 標籤選擇器 element
4. 兄弟選擇器 element1，element2
5. 僞元素選擇器只支持兩種 ::after ::before

8. 自定義組件

使用自定義組件

建立自定義組件（相似於page,但須要在 json 文件中將 component 字段設爲 true ）
```
{
  "component": true
}
```

建立組件構造器（構造函數不是page(),而是Component() ）

Component({
  // 組件的對外屬性（父組件傳的數據）
  properties: {
    msg: {
      type: String,
      value: 'msg',
      // 父組件值改變時觸發的回調
      observer: () => {
          console.log('i am change')
      }
    }
  },
  data: {
    componentData: {}
  },
})

使用自定義組件（先要在頁面的 json 文件中進行引用聲明）

// 先引用聲明
"usingComponents": {
    // hybg 標籤名
    "hybg": "../component/component" // 相對路徑
  }
  
  // 直接使用，須要的話要綁定數據
  <hybg msg="{{ data }}"></hybg>

slot 模板

1. 單 solt  
    ```
    // component
    <view>
        <slot></slot>
    </view>
    
    // page ( hybg 是上面的組件標籤名)
    <hybg>
        <view> page 的 slot </view>
    </hybg>
    
    // 效果
    <view>
        <view> page 的 slot </view>
    </view>
    
    ```
 2. 多slot
    ```
    // 先在 Component 的 js 中添加
    options: {
        // 啓用多slot
        multipleSlots: true
      },
    // 多 slot 須要使用不一樣的 name 來區分
    <view>
        <slot name="first"></slot>
        <slot name="last"></slot>
    </view>
    
    // page ( hybg 是上面的組件標籤名)
    <hybg>
        <view slot="first"> first -- slot </view>
        <view slot="last"> last-- slot </view>
    </hybg>
    
    // 效果
    <view>
        <view slot="first"> first -- slot </view>
        <view slot="last"> last-- slot </view>
    </view>
    
    ```

父子組件事件(子組件傳值)

// page
fatherEvent: function(e){
    console.log(e.detail) // 組件傳遞的自定義信息
  }
<hybg bindhybgEvent="fatherEvent"></hybg>

 // component
 tap: function(){
  var myEventDetail = { a: 10} // detail對象，提供給事件監聽函數
  var myEventOption = {} // 觸發事件的配置選項
  // bubbles 事件是否冒泡
  // capturePhase 事件是否擁有捕獲階段
  // composed 是否能夠穿越父組件邊界
  this.triggerEvent('hybgEvent', myEventDetail, myEventOption)
}

 <view bindtap="tap">觸發 hybgEvent 事件</view>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。