2019-面向小白的微信小程序-視頻教學-基礎

時間 2019-12-02

標籤面向白的微信程序視頻教學基礎简体版

原文原文鏈接

0. 學前準備

具備如下技術鋪墊來學小程序效果最佳javascript

html
css
JavaScript
es6
vue
移動端佈局能力 rem、vw、等

1. 微信小程序課程介紹

文章末尾有完整視頻連接css

本章節B站視頻連接html

2. 微信小程序介紹

本章節B站視頻連接vue

微信小程序，簡稱小程序，英文名Mini Program，是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下便可打開應用java

2.1. 爲何是微信小程序？

微信有海量用戶，並且粘性很高，在微信裏開發產品更容易觸達用戶；
推廣app 或公衆號的成本過高。
開發適配成本低。
容易小規模試錯，而後快速迭代。
跨平臺。

2.2. 微信小程序歷史

2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，愈來愈多產品經過公衆號來作，由於這裏開發、獲取用戶和傳播成本更低。拆分出來的服務號並無提供更好的服務，因此微信內部正在研究新的形態，叫**「微信小程序」** 須要注意的是，以前是叫作 應用號node
2016年9月21日，微信小程序正式開啓內測。在微信生態下，觸手可及、用完即走的微信小程序引發普遍關注。騰訊雲正式上線微信小程序解決方案，提供小程序在雲端服務器的技術方案。react
2017年1月9日，微信推出的「小程序」正式上線。「小程序」是一種無需安裝，便可使用的手機「應用」。不須要像往常同樣下載App，用戶在微信中「用完即走」。git

2.3. 瘋狂的微信小程序

微信月活已經達到10.82億。其中55歲以上的用戶也達到6300萬
信息傳達數達到450億，較去年增加18%;視頻通話4.1億次,增加100%
小程序覆蓋超過200+行業，交易額增加超過6倍，服務1000億+人次,創造出了5000億+的商業價值

2.4. 還有其餘的小程序不容忽視

支付寶小程序
百度小程序
QQ小程序
今日頭條 + 抖音小程序

2.5. 體驗

2.5.1. 官方微信小程序體驗

小程序示例源碼es6

2.5.2. 其餘優秀的第三方小程序

拼多多
滴滴出行
歡樂鬥地主
智行火車票
惟品會
。。。

3. 小程序開發環境準備

本章節B站視頻連接github

開發微信小程序以前，必需要準備好相應的環境

3.1. 註冊帳號

建議使用全新的郵箱，沒有註冊過其餘小程序或者公衆號的。

訪問註冊頁面，耐心完成註冊便可。

3.2. 獲取APPID

因爲後期調用微信小程序的接口等功能，須要索取開發者的小程序中的APPID，因此在註冊成功後，可登陸，而後獲取APPID。

登陸，成功後可看到以下界面

而後複製你的APPID,悄悄的保存起來，不要給別人看到😄。

3.3. 開發工具

下載地址

微信小程序自帶開發者工具，集開發預覽調試發佈於一身的完整環境。

可是因爲編碼的體驗不算好，所以建議使用 vs code + 微信小程序編輯工具 來實現編碼

vs code 負責敲代碼，微信編輯工具 負責預覽

4. 第一個微信小程序

本章節B站視頻連接

4.1. 打開微信開發者工具

注意第一次登陸的時候須要掃碼登陸

4.2. 新建小程序項目

4.3. 填寫項目信息

4.4. 成功

5. 微信開發者工具介紹

本章節B站視頻連接

詳細的使用，能夠查看官網

6. 小程序結構目錄

本章節B站視頻連接

小程序框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 APP 體驗的服務。

小程序框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及 JavaScript，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者可以專一於數據與邏輯。

6.1. 小程序文件結構和傳統web對比

結構	傳統web	微信小程序
結構	HTML	WXML
樣式	CSS	WXSS
邏輯	Javascript	Javascript
配置	無	JSON

經過以上對比得出，傳統web 是三層結構。而微信小程序是四層結構，多了一層 配置.json

6.2. 基本的項目目錄

7. 小程序配置文件

本章節B站視頻連接

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和頁面本身的 page.json

注意：配置文件中不能出現註釋

7.1. 全局配置 app.json

app.json 是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。普通快速啓動項目裏邊的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
複製代碼

字段的含義

pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
window字段 —— 定義小程序全部頁面的頂部背景顏色，文字顏色定義等。
完整的配置信息請參考 app.json配置

7.1.1. tabbar

7.2. 頁面配置 page.json

這裏的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。

開發者能夠獨立定義每一個頁面的一些屬性，如頂部顏色、是否容許下拉刷新等等。

頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 `#000000`
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 `black` / `white`
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 `dark` / `light`
enablePullDownRefresh	Boolean	false	是否全局開啓下拉刷新。詳見 Page.onPullDownRefresh
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px。詳見 Page.onReachBottom
disableScroll	Boolean	false	設置爲 `true` 則頁面總體不能上下滾動；只在頁面配置中有效，沒法在 `app.json` 中設置該項

7.3. sitemap 配置-瞭解便可

小程序根目錄下的 sitemap.json 文件用於配置小程序及其頁面是否容許被微信索引。

8. 模板語法

本章節B站視頻連接

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。

8.1. 數據綁定

8.1.1. 普通寫法

<view> {{ message }} </view>
複製代碼

Page({
  data: {
    message: 'Hello MINA!'
  }
})
複製代碼

8.1.2. 組件屬性

<view id="item-{{id}}"> </view>
複製代碼

Page({
  data: {
    id: 0
  }
})
複製代碼

8.1.3. bool類型

不要直接寫 checked="false"，其計算結果是一個字符串

<checkbox checked="{{false}}"> </checkbox>
複製代碼

8.2. 運算

8.2.1. 三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>
複製代碼

8.2.2. 算數運算

<view> {{a + b}} + {{c}} + d </view>
複製代碼

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
複製代碼

8.2.3. 邏輯判斷

<view wx:if="{{length > 5}}"> </view>
複製代碼

8.2.4. 字符串運算

<view>{{"hello" + name}}</view>
複製代碼

Page({
  data:{
    name: 'MINA'
  }
})
複製代碼

8.2.5. 注意

花括號和引號之間若是有空格，將最終被解析成爲字符串

8.3. 列表渲染

8.3.1. wx:for

項的變量名默認爲 item wx:for-item 能夠指定數組當前元素的變量名

下標變量名默認爲 index wx:for-index 能夠指定數組當前下標的變量名

wx:key 用來提升數組渲染的性能

wx:key 綁定的值有以下選擇

string 類型，表示循環項中的惟一屬性如

list:[{id:0,name:"炒飯"},{id:1,name:"炒麪"}]

wx:key="id"
複製代碼

保留字 *this ，它的意思是 item 自己，*this 表明的必須是惟一的字符串和數組。
```
list:[1,2,3,4,5]

wx:key="*this"
複製代碼
```

代碼：

<view wx:for="{{array}}" wx:key="id">
  {{index}}: {{item.message}}
</view>
複製代碼

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
    }, {
      id:1,
      message: 'bar'
    }]
  }
})
複製代碼

8.3.2. block

渲染一個包含多節點的結構塊 block最終不會變成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
複製代碼

8.4. 條件渲染

8.4.1. wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否須要渲染該代碼塊：

<view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
複製代碼

8.4.2. hidden

<view hidden="{{condition}}"> True </view>
複製代碼

相似 wx:if

頻繁切換用 hidden

不常使用用 wx:if

9. 小程序事件的綁定

本章節B站視頻連接

小程序中綁定事件，經過bind關鍵字來實現。如 bindtap bindinput bindchange 等

不一樣的組件支持不一樣的事件，具體看組件的說明便可。

9.1. wxml

<input bindinput="handleInput" />
複製代碼

9.2. page

Page({
  // 綁定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改變了");
  }
})
複製代碼

9.3. 特別注意

綁定事件時不能帶參數不能帶括號 如下爲錯誤寫法
```
<input bindinput="handleInput(100)" />
複製代碼
```

事件傳值經過標籤自定義屬性的方式和 value

<input bindinput="handleInput" data-item="100" />
複製代碼

事件觸發時獲取數據

handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 輸入框的值
   console.log(e.detail.value);
  }
複製代碼

10. 樣式 WXSS

本章節B站視頻連接

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。

與 CSS 相比，WXSS 擴展的特性有：

響應式長度單位 rpx
樣式導入

10.1. 尺寸單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建議： 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。

使用步驟：

肯定設計稿寬度 pageWidth
計算比例 750rpx = pageWidth px ,所以 1px=750rpx/pageWidth。
在less文件中，只要把設計稿中的 px => 750/pageWidth rpx 便可。

10.2. 樣式導入

wxss中直接就支持，樣式導入功能。

也能夠和 less中的導入混用。

使用@import語句能夠導入外聯樣式表，只支持相對路徑。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}
複製代碼

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
複製代碼

10.3. 選擇器

特別須要注意的是小程序不支持通配符 * 所以如下代碼無效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
複製代碼

目前支持的選擇器有：

選擇器	樣例	樣例描述
.class	`.intro`	選擇全部擁有 class="intro" 的組件
#id	`#firstname`	選擇擁有 id="firstname" 的組件
element	`view`	選擇全部 view 組件
element, element	`view, checkbox`	選擇全部文檔的 view 組件和全部的 checkbox 組件
nth-child(n)	view:nth-child(n)	選擇某個索引的標籤
::after	`view::after`	在 view 組件後邊插入內容
::before	`view::before`	在 view 組件前邊插入內容

10.4. 小程序中使用less

原生小程序不支持less，其餘基於小程序的框架大致都支持，如wepy，mpvue，taro等。可是僅僅由於一個less功能，而去引入一個框架，確定是不可取的。所以能夠用如下方式來實現

編輯器是vscode
安裝插件 easy less

在vs code的設置中加入以下，配置

"less.compile": {
        "outExt":       ".wxss"
    }
複製代碼

在要編寫樣式的地方，新建 less文件，如 index.less,而後正常編輯便可。

11. 常見組件

本章節B站視頻連接

重點講解小程序中經常使用的佈局組件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等

11.1. view

代替原來的 div 標籤

<view hover-class="h-class">
  點擊我試試
  </view>
複製代碼

11.2. text

文本標籤
只能嵌套text
長按文字能夠複製（只有該標籤有這個功能）
能夠對空格回車進行編碼

屬性名	類型	默認值	說明
selectable	Boolean	false	文本是否可選
decode	Boolean	false	是否解碼

11.2.1. 代碼

<text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>
複製代碼

11.3. image

圖片標籤，image組件默認寬度320px、高度240px
支持懶加載

屬性名	類型	默認值	說明
src	String		圖片資源地址
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高徹底拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來。
縮放	aspectFill	保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。
縮放	widthFix	寬度不變，高度自動變化，保持原圖寬高比不變
裁剪	top	不縮放圖片，只顯示圖片的頂部區域
裁剪	bottom	不縮放圖片，只顯示圖片的底部區域
裁剪	center	不縮放圖片，只顯示圖片的中間區域
裁剪	left	不縮放圖片，只顯示圖片的左邊區域
裁剪	right	不縮放圖片，只顯示圖片的右邊區域
裁剪	top left	不縮放圖片，只顯示圖片的左上邊區域
裁剪	top right	不縮放圖片，只顯示圖片的右上邊區域
裁剪	bottom left	不縮放圖片，只顯示圖片的左下邊區域
裁剪	bottom right	不縮放圖片，只顯示圖片的右下邊區域

11.4. swiper

微信內置輪播圖組件

默認寬度 100% 高度 150px

屬性名	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
autoplay	Boolean	false	是否自動切換
interval	Number	5000	自動切換時間間隔
circular	Boolean	false	s是否循環輪播

11.4.1. swiper

滑塊視圖容器。

11.4.2. swiper-item

滑塊

默認寬度和高度都是100%

11.5. navigator

導航組件相似超連接標籤

屬性名	類型	默認值	說明
target	String	self	在哪一個目標上發生跳轉，默認當前小程序，可選值self/miniProgram
url	String		當前小程序內的跳轉連接
open-type	String	navigate	跳轉方式

open-type 有效值：

值	說明
navigate	保留當前頁面，跳轉到應用內的某個頁面，可是不能跳到 tabbar 頁面
redirect	關閉當前頁面，跳轉到應用內的某個頁面，可是不容許跳轉到 tabbar 頁面。
switchTab	跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面
reLaunch	關閉全部頁面，打開到應用內的某個頁面
navigateBack	關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層
exit	退出小程序，target="miniProgram"時生效

11.6. rich-text

富文本標籤

能夠將字符串解析成對應標籤，相似 vue中 v-html功能

代碼

// 1 index.wxml 加載 節點數組
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加載 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> 
 
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

複製代碼

11.6.1. nodes屬性

nodes屬性支持 字符串 和 標籤節點數組

屬性	說明	類型	必填	備註
name	標籤名	string	是	支持部分受信任的 HTML 節點
attrs	屬性	object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節點列表	array	否	結構和 nodes 一致

文本節點：type = text

屬性	說明	類型	必填	備註
text	文本	string	是	支持entities

nodes 不推薦使用 String 類型，性能會有所降低。
rich-text 組件內屏蔽全部節點的事件。
attrs 屬性不支持 id ，支持 class 。
name 屬性大小寫不敏感。
若是使用了不受信任的 HTML 節點，該節點及其全部子節點將會被移除。
img 標籤僅支持網絡圖片。

11.7. button

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" >
  default
</button>
複製代碼

屬性	類型	默認值	必填	說明
size	string	default	否	按鈕的大小
type	string	default	否	按鈕的樣式類型
plain	boolean	false	否	按鈕是否鏤空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名稱前是否帶 loading 圖標
form-type	string		否	用於 `](https://developers.weixin.qq.com/miniprogram/dev/component/form.html) 組件，點擊分別會觸發 [` 組件的 submit/reset 事件
open-type	string		否	微信開放能力

size 的合法值

值	說明
default	默認大小
mini	小尺寸

type 的合法值

值	說明
primary	綠色
default	白色
warn	紅色

form-type 的合法值

值	說明
submit	提交表單
reset	重置表單

open-type 的合法值

值	說明
contact	打開客服會話，若是用戶在會話中點擊消息卡片後返回小程序，能夠從 bindcontact 回調中得到具體信息，具體說明
share	觸發用戶轉發，使用前建議先閱讀使用指引
getPhoneNumber	獲取用戶手機號，能夠從bindgetphonenumber回調中獲取到用戶信息，具體說明
getUserInfo	獲取用戶信息，能夠從bindgetuserinfo回調中獲取到用戶信息
launchApp	打開APP，能夠經過app-parameter屬性設定向APP傳的參數具體說明
openSetting	打開受權設置頁
feedback	打開「意見反饋」頁面，用戶可提交反饋內容並上傳日誌，開發者能夠登陸小程序管理後臺後進入左側菜單「客服反饋」頁面獲取到反饋內容

11.7.1. open-type 的 contact的實現流程

將小程序的appid 由測試號改成本身的appid
登陸微信小程序官網，添加 客服 - 微信
爲了方便演示，老師本身準備了兩個帳號
1. 普通用戶 A
2. 客服-微信 B
就是幹！

11.8. icon

屬性	類型	默認值	必填	說明
type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的顏色，同css的color

代碼:

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
  }
})
複製代碼

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>
複製代碼

11.9. radio

能夠經過 color屬性來修改顏色

須要搭配 radio-group 一塊兒使用

11.10. checkbox

能夠經過 color屬性來修改顏色

須要搭配 checkbox-group 一塊兒使用

12. 自定義組件

本章節B站視頻連接

相似vue或者react中的自定義組件

小程序容許咱們使用自定義組件的方式來構建頁面。

12.1. 建立自定義組件

相似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成

能夠在微信開發者工具中快速建立組件的文件結構

在文件夾內components/myHeader，建立組件名爲 myHeader

12.1.1. 聲明組件

首先須要在組件的 json 文件中進行自定義組件聲明

myHeader.json

{
  "component": true
}
複製代碼

12.1.2. 編輯組件

同時，還要在組件的 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式

slot表示插槽，相似vue中的slot

myHeader.wxml

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

複製代碼

在組件的 wxss文件中編寫樣式

注意：在組件wxss中不該使用ID選擇器、屬性選擇器和標籤名選擇器。

myHeader.wxss

/* 這裏的樣式只應用於這個自定義組件 */
.inner {
  color: red;
}
複製代碼

12.1.3. 註冊組件

在組件的 js 文件中，須要使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法

myHeader.js

Component({
  properties: {
    // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
    innerText: {
      // 指望要的數據是 string類型
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這裏是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這裏是一個自定義方法
    customMethod: function(){}
  }
})
複製代碼

12.2. 聲明引入自定義組件

首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑

index.wxml

{
	// 引用聲明
  "usingComponents": {
  	// 要使用的組件的名稱     // 組件的路徑
    "my-header":"/components/myHeader/myHeader"
  }
}
複製代碼

12.3. 頁面中使用自定義組件

<view>
  <!-- 如下是對一個自定義組件的引用 -->
  <my-header inner-text="Some text">
    <view>用來替代slot的</view>
    </my-header>
</view>
複製代碼

12.4. 其餘屬性

12.5. 定義段與示例方法

Component構造器可用於定義組件，調用Component構造器時能夠指定組件的屬性、數據、方法等。

定義段	類型	是否必填	描述
properties	Object Map	否	組件的對外屬性，是屬性名到屬性設置的映射表，參見下文
data	Object	否	組件的內部數據，和 `properties` 一同用於組件的模板渲染
observers	Object	否	組件數據字段監聽器，用於監聽 properties 和 data 的變化，參見數據監聽器
methods	Object	否	組件的方法，包括事件響應函數和任意的自定義方法，關於事件響應函數的使用，參見組件事件
created	Function	否	組件生命週期函數，在組件實例剛剛被建立時執行，注意此時不能調用 `setData` ，參見組件生命週期
attached	Function	否	組件生命週期函數，在組件實例進入頁面節點樹時執行，參見組件生命週期
ready	Function	否	組件生命週期函數，在組件佈局完成後執行，參見組件生命週期
moved	Function	否	組件生命週期函數，在組件實例被移動到節點樹另外一個位置時執行，參見組件生命週期
detached	Function	否	組件生命週期函數，在組件實例被從頁面節點樹移除時執行，參見組件生命週期

12.6. 組件-自定義組件傳參

父組件經過屬性的方式給子組件傳遞參數
子組件經過事件的方式向父組件傳遞參數

12.6.1. 過程

父組件 把數據 {{tabs}} 傳遞到子組件的 tabItems 屬性中
父組件監聽 onMyTab 事件
子組件 觸發 bindmytap 中的 mytap 事件
1. 自定義組件觸發事件時，須要使用 triggerEvent 方法，指定事件名、detail對象
父 -> 子動態傳值 this.selectComponent("#tabs");

父組件代碼

// page.wxml 

<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
  內容-這裏能夠放插槽
</tabs>

// page.js
  data: {
    tabs:[
      {name:"體驗問題"},
      {name:"商品、商家投訴"}
    ]
  },
  onMyTab(e){
    console.log(e.detail);
  },
複製代碼

子組件代碼

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
    }
  },
  /**
   * 組件的初始數據
   */
  data: {
  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
    }
  }
})
複製代碼

12.7. 小結

標籤名是中劃線的方式
屬性的方式也是要中劃線的方式
其餘狀況可使用駝峯命名
1. 組件的文件名如 myHeader.js 的等
2. 組件內的要接收的屬性名如 innerText
更多。。

13. 小程序生命週期

本章節B站視頻連接

分爲應用生命週期和頁面生命週期

關於小程序先後臺的定義和小程序的運行機制，請參考運行機制章節。

13.1. 應用生命週期

屬性	類型	必填	說明
onLaunch	function	否	監聽小程序初始化。
onShow	function	否	監聽小程序啓動或切前臺。
onHide	function	否	監聽小程序切後臺。
onError	function	否	錯誤監聽函數。
onPageNotFound	function	否	頁面不存在監聽函數。

13.2. 頁面生命週期

屬性	類型	說明
data	Object	頁面的初始數據
onLoad	function	生命週期回調—監聽頁面加載
onShow	function	生命週期回調—監聽頁面顯示
onReady	function	生命週期回調—監聽頁面初次渲染完成
onHide	function	生命週期回調—監聽頁面隱藏
onUnload	function	生命週期回調—監聽頁面卸載
onPullDownRefresh	function	監聽用戶下拉動做
onReachBottom	function	頁面上拉觸底事件的處理函數
onShareAppMessage	function	用戶點擊右上角轉發
onPageScroll	function	頁面滾動觸發事件的處理函數
onResize	function	頁面尺寸改變時觸發，詳見響應顯示區域變化
onTabItemTap	function	當前是 tab 頁時，點擊 tab 時觸發