小程序的雙線程模型

• 誰是小程序的宿主環(huán)境？微信客戶端
  • 宿主環(huán)境為了執(zhí)行小程序的各種文件：wxml文件融蹂、wxss文件、js文件

  • 提供了小程序的雙線程模型

    
    
    小程序雙線程模型.png
• 雙線程模型
  • WXML模板和WXSS央視運(yùn)行于渲染層，渲染層使用WebView線程渲染（一個(gè)程序有多個(gè)頁面丽焊，會(huì)使用多個(gè)WebView的線程）掷倔。
  • JS腳本（app.js/home.js等）運(yùn)行有邏輯層眉孩，邏輯層使用JSCore運(yùn)行JS腳本。
  • 這兩個(gè)線程都會(huì)經(jīng)由微信客戶端（Native）進(jìn)行中轉(zhuǎn)交互勒葱。

界面渲染過程

小程序的啟動(dòng)流程

• 官方文檔
• 每個(gè)小程序都需要在app.js中調(diào)用App方法注冊(cè)小程序?qū)嵗?/li>

• 在注冊(cè)時(shí)谐鼎，可以綁定對(duì)應(yīng)的生命周期函數(shù)，在生命周期函數(shù)中趣惠，執(zhí)行對(duì)應(yīng)的代碼

  
  
  小程序啟動(dòng)流程.jpg

事件-常見的事件類型

• 什么時(shí)候會(huì)產(chǎn)生事件呢狸棍？
  • 小程序需要經(jīng)常和用戶進(jìn)行某種交互，比如點(diǎn)擊界面上的某個(gè)按鈕或者區(qū)域信卡，比如滑動(dòng)了某個(gè)區(qū)域隔缀，這些交互都會(huì)產(chǎn)生各種各樣的事件*；
• 事件是如何處理的呢傍菇？
  • 事件是通過bind/catch這個(gè)屬性綁定在組件上的(和普通的屬性寫法很相似猾瘸，以key=“value”形式)；
  • key以bind或catch開發(fā)丢习，從1.5.0版本開始牵触，可以在bind和catch后加上一個(gè)冒號(hào)；
  • 同時(shí)在當(dāng)前頁面的Page構(gòu)造器中定義對(duì)應(yīng)的事件處理函數(shù)tapName咐低，如果沒有對(duì)應(yīng)的函數(shù)揽思，觸發(fā)事件時(shí)會(huì)報(bào)錯(cuò)
  • 當(dāng)用戶點(diǎn)擊該button區(qū)域時(shí)，達(dá)到觸發(fā)條件生成事件tap见擦，該事件處理函數(shù)tapName會(huì)被執(zhí)行钉汗，同時(shí)還會(huì)收到一個(gè)事件對(duì)象event羹令。
• 某些組件會(huì)有自己特性的事件類型，具體查看官方文檔
  • 比如input有bindinput/bindblur/bindfocus等
  • 比如scroll-view有bindscrolltowpper/bindscrolltolower等
  • Touchcancle：在某些特定場(chǎng)景下才會(huì)觸發(fā)（比如來電打斷等）
  • tap事件和longpress事件通常只會(huì)觸發(fā)其中一個(gè)

組件化開發(fā)

• 組件和頁面樣式細(xì)節(jié)

  
  
  組件樣式和頁面樣式.jpg
  
  
  頁面樣式課題三.jpg

• 給組件傳遞數(shù)據(jù)和樣式

  
  
  組件間頁面通信.jpg
  
  

  頁面與組件之間傳遞數(shù)據(jù)使用properties

  
  
  向組件傳遞數(shù)據(jù)prop.jpg
  
  
  向組件傳遞樣式.jpg

  • 定義組件my-prop(my-prop.xml)

        <view class='title titleclass'>{{title}}</view>
        <view class='content'>我是組件的內(nèi)容</view>
    

  • 在my-prop.js中定義title的相關(guān)屬性

        Component({
            properties: {
            // title: String
            title: {
                type: String,
                value: '我是默認(rèn)的標(biāo)題',
                observer: function(newVal, oldVal) {
                    console.log(newVal, oldVal)
                }
            }
            },
            externalClasses: ['titleclass']
        })
    

    observer是記錄改變前后的值
    externalClasses讓外界給我們傳遞一個(gè)不一樣的樣式,在my-prop中引用之后损痰，頁面需要賦予titleclass一個(gè)樣式福侈，然后這個(gè)樣式需要在頁面的css中賦予屬性
    ```
    .red {
    color: red;
    }

      .green {
          color: green;
      }
    
      .blue {
          color: blue;
      }
    

  • 在頁面（home.xml）中引用組件my-prop，并定義title的內(nèi)容

        <!-- 3.給自定義組件傳遞數(shù)據(jù)/樣式 -->
        <my-prop title="哈哈哈" titleclass="red"/>
        <my-prop title="呵呵呵" titleclass="green"/>
        <my-prop titleclass="blue"/>
    

    頁面（home.xml）中title定義的“哈哈哈”“呵呵呵”會(huì)傳遞給組件my-prop.xml中{{title}}的插值表達(dá)式卢未，此時(shí)組件根據(jù)頁面定義的title展示對(duì)應(yīng)的“哈哈哈”“呵呵呵”

• 組件向外傳遞事件-自定義事件
  • 示例：點(diǎn)擊組件中的按鈕改變頁面中的數(shù)據(jù)
  • 自定義組件(my-event.wxml)

        <button size='mini' bind:tap="handleIncrement">+1</button>
    

  • 通過triggerEvent發(fā)射事件肪凛，可以傳遞一個(gè)對(duì)象(my-event.js)注意：在頁面中寫方法直接寫，在組件中寫方法需要在methods中寫

        Component({
            methods: {
                handleIncrement() {
                // console.log('---------')
                // 傳遞一個(gè)叫increment的事件辽社，傳遞參數(shù)數(shù)組
                this.triggerEvent('increment', {name: 'why', age: 18}, {})
            }
        })
    

  • 在頁面(home.wxml)中引用組件并監(jiān)聽事件

        <!-- 4.組件內(nèi)部發(fā)出事件 -->
        <view>當(dāng)前計(jì)數(shù): {{counter}}</view>
        <my-event bind:increment="handleIncrement"/>
    

  • 在頁面的邏輯層（home.js）中定義handleIncrement事件,這里相當(dāng)于組件把事件發(fā)射給了頁面伟墙，此時(shí)這個(gè)事件就屬于頁面的邏輯，因此在頁面的邏輯層編寫滴铅。

        Page({
            data:{
                counter:0,
            },
            handleIncrement(event) {
                console.log('---------', event)
                this.setData({
                    counter: this.data.counter + 1
                })
            },
        })