微信小程序開發02-小程序基本介紹

前言

前面我們研究了下微信小程序的執行流程，因為拿不到源碼，只能算我們的猜想，我們需要更加了解小程序還需要做具體的項目，於是我們將原來那套還算復雜的業務拿出來：

【組件化開發】前端進階篇之如何編寫可維護可升級的代碼（有些晦澀有些亂，但是對於整體了解小程序結構有幫助）

我們用小程序實現這里的代碼，看看是個什么樣的體驗，另外我這里想保證代碼最大程度重用，為后續一端代碼四端運行做前驅探索。

頁面復雜度還是比較高的，包括了：

① 彈出層

② 頁面跳轉

③ 緩存

④ 數據請求

⑤ 列表頁、滾動分頁

⑥ ......

我相信完成了這個例子，我們對小程序業務代碼怎么寫會有比較好的了解，於是讓我們開始今天的代碼吧。

小程序的布局

為什么不使用HTML&CSS

微信小程序這種平台型的超越Hybrid系統誕生還是有一些客觀條件的，其中一個就是移動端的應用相對來說簡單的多，想想PC負責的布局，如果要使用小程序實現，那么復雜度會提高很多。

小程序代碼編寫邏輯層依舊使用JS完成，但是結構層以及樣式層推出了：

① WXML，Weixin Markup Language，是微信設計的一套標簽語言，與HTML類似，做過React&Vue的同學會非常熟悉

② WXSS，WeiXin Style Sheets，是一套樣式語言，用於定義樣式，與CSS類似，一般認為是CSS的子集

因為小程序中UI組件都是Native實現，所以小程序直接手起刀落壓根放棄讓我們使用HTML容器，這樣做我覺得有個好處是：

為了更好的限制，我之前也在做Hybrid乃至前端框架，一般來說我會限制到View級別的實習，要求必須按照我的規則做，但是因為入口為index.html文件，我甚至將全局控制器App的實例化放到了main.js里面，只提供了建議的做法，事實上HTML還是太過靈活，有些同事逐漸根本不按照我們的規則玩，他覺得他的做法更好，但是這樣一來便會破壞了項目的總體性，后續的工程性的優化或者監控可能就不能幫助他了，從某個角度來說，我是認可小程序的做法的。

我們之前在這里研究過自定義標簽的做法：從DOM操作看Vue&React的前端組件化，順帶補齊React的demo

<article class="cm-page page-list" id="main">
    <div class="js_sort_wrapper sort-bar-wrapper">
        <mySortBar :entity="sortEntity"></mySortBar>
    </div>
    <myList :entity="listEntity" :sort="sort"></myList>
</article>

從這個文章以及小程序的實現可以看出基本的概念：

① 標簽的出現根本不是做標簽用，而是為了讓JS捕捉執行相關邏輯，最后生成真正的標簽

② 為了做更好的限制，小程序根本不提供入口index.html文件了，所以這里的標簽是用作JS做模板解析后生成Native能識別的代碼，更具體點說是，Native實現了一個組件，組件有很多規則，可以使用JS去調用，正如我們這里的header組件調用邏輯（JS會設置Native的Header組件展示），這里如果不太清晰可以參考下這個文章：淺談Hybrid技術的設計與實現第二彈

當然，小程序底層具體是不是這么做，我們不得而知，如果有小程序的同事，可以指導下：），至此，我覺得可以從技術層面說明為什么不直接使用HTML&CSS了：更好的業務限制 + 方便JS解析模板被Native執行。

小程序組件

我們之前做Hybrid應用的時候，事實上只提供了一個真正具有結構的組件Header，其他loading類的提示組件都比較簡單，而我們看看小程序提供了哪些組件呢：

容器類組件

view&scroll-view&swiper等作為容器組件存在，這里官方有基本介紹，我們這里看看其中一個即可：

這里官方給了一個demo進行說明：

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

@import "../lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

可以將這個標簽理解為div類組件。

swipe

一般來說，Native提供的輪播圖體驗要好得多，所以這里也提供了一個Native的組件：

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示點</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自動播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">銜接滑動</view>
          <view class="weui-cell__ft">
            <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">豎向</view>
          <view class="weui-cell__ft">
            <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻燈片切換時長(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" />
      <view class="page-section-title">
        <text>自動播放間隔時長(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" />
      <view class="page-section-title">
        <text>前邊距(px)</text>
        <text class="info">{{previousMargin}}</text>
      </view>
      <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />
      <view class="page-section-title">
        <text>后邊距(px)</text>
        <text class="info">{{nextMargin}}</text>
      </view>
      <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />
    </view>
  </view>
</view>

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  changeProperty: function (e) {
    var propertyName = e.currentTarget.dataset.propertyName
    var newData = {}
    newData[propertyName] = e.detail.value
    this.setData(newData)
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

有demo有代碼，還是比較清晰。

movable-area

提供一個可以移動的區域，暫時沒想到應用場景......

icon

圖標，小程序這邊還擴展了一下，給了很多默認的圖標樣式，能滿足基本需求

text

文本

rich-text

富文本，用於展示文章，支持HTML，這里的nodes屬性建議使用數組，類型，還不如系統自己解析js算了，因為不會有人像這樣寫代碼（nodes看上去很蠢）：

Page({
  data: {
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div><script>console.log(1)</script>',
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

progress

進度條

button

按鈕

checkbox

選擇框

form

表單相關

input

輸入框，小程序的數據流動是單向的，每次數據更新，動態調用setData改變數據便會觸發view更新，底層實現便不知道了；文本框值改變js需要自己去獲取

label

與html一致，用以點擊文字操作控件，主要用於文本框

picker&picker-view

用於級聯操作

navigator&function-page-navigator

頁面鏈接，這個組件感覺不利於跳轉收口，建議少用

其他組件請大家直接到這里來看demo，非常清晰：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

總結

可以看出，小程序Native層是將常用的HTML標簽分別都實現了一次，使用這些組件可以拼接處任何復雜的組件。至於樣式方面，WXSS與CSS大同小異，其中主要區別是小程序沒有使用px而是使用的rpx，這個類似於rem的實現，為了解決移動端的適配問題而存在，總而言之，你在iPhone6設計搞上是多少px就寫成多少rpx就行，其余系統會幫你完成適配工作，這塊透明做的很好，后續樣式我們直接上實例即可。

小程序的生命周期

我們這里上一張圖：

這張圖不但真實反映了Page的生命周期，也將我們之前的猜想做了一個證明，解讀這張圖大概是這個意思（未必正確，如有錯誤請指出）：

Native層在載入小程序時候，起了兩個線程一個的view Thread一個是AppService Thread，我這邊理解下來應該就是程序邏輯執行與頁面渲染分離，也許是想優化性能，這里更具體一點的解釋是（帶有猜測了）：微信會開一個webview來執行我們的JS邏輯，然后會開一個Native View UI執行頁面渲染；兩個部分是彼此獨立的，頁面點擊時候觸發事件，View線程會獲取APPService服務線程（其實就是獲取webview），執行其中的js邏輯；APPService執行js邏輯改變數據通過setData調用，觸發一個JSCore通信，通知view線程執行UI更新，這里結合這張圖做下理解：

① 微信打開一個小程序時，主UI線程繼續運行，開啟一個webview（我認為這里的主線程就是view Thread，webview就是APPService線程，這里可能有誤）

② 主View等待構建頁面命令，邏輯層開始載入js邏輯（編譯過），微信底層應該會將WXML以及WXSS翻譯為JS代碼，邏輯層執行JS代碼做一些初始化工作APP結束后，開始Page邏輯，而他這個圖只有Page的邏輯，沒有將app囊括進去，這里也引發了我一個疑惑：我在onLoad的時候打了個斷點，而頁面這個時候事實上已經進行了結構層的渲染，也就是說頁面的WXML邏輯已經執行了：

如果要按照我現有的邏輯下做解釋的話，我認為實例化Page的時候，執行了一個create事件，但是小程序並沒有釋放onCreate事件讓我們做注冊，所以我這里知識體系的基礎依舊是：

JS邏輯先於Native UI 執行，頁面渲染是由實例化Page時候發出

所以我覺得，這里的圖好像少了一部分（或者說我理解是有問題的）：

③ 業務線程執行實例化Page邏輯，引發onLoad、onShow事件，onShow的時候頁面初步渲染已經結束，如果系統有異步數據或者其他再次數據渲染會執行setData，引發Native UI更新，邏輯結束

但是微信給出的圖不可能是錯的，而從圖上看，首次異步通知是由View Thread發起的，我這里就很是困惑了😪，因為我認為邏輯發起者一定是邏輯層的js發出通知

總結

今天我們對小程序進行了基本的了解學習，明天我們持續完成我們的demo吧