前言

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

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

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

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

① 彈出層

② 頁面跳轉

③ 緩存

④ 數據請求

⑤ 列表頁、滾動分頁

⑥ ......

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

小程序的布局

為什么不使用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

1 <article class="cm-page page-list" id="main"> 2 <div class="js_sort_wrapper sort-bar-wrapper"> 3 <mySortBar :entity="sortEntity"></mySortBar> 4 </div> 5 <myList :entity="listEntity" :sort="sort"></myList> 6 </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進行說明：

1 <view class="section"> 2 <view class="section__title">flex-direction: row</view> 3 <view class="flex-wrp" style="flex-direction:row;"> 4 <view class="flex-item bc_green">1</view> 5 <view class="flex-item bc_red">2</view> 6 <view class="flex-item bc_blue">3</view> 7 </view> 8 </view> 9 <view class="section"> 10 <view class="section__title">flex-direction: column</view> 11 <view class="flex-wrp" style="height: 300px;flex-direction:column;"> 12 <view class="flex-item bc_green">1</view> 13 <view class="flex-item bc_red">2</view> 14 <view class="flex-item bc_blue">3</view> 15 </view> 16 </view> 1 @import "../lib/weui.wxss"; 2 3 .page-section{ 4 margin-bottom: 20rpx; 5 } 6 .flex-wrp {display: flex;} 7 .bc_green {background: green;width:100px; height: 100px;} 8 .bc_red {background: red;width:100px; height: 100px;} 9 .bc_blue {background: blue;width:100px; height: 100px;}

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

swipe

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

1 <view class="container"> 2 <view class="page-body"> 3 <view class="page-section page-section-spacing swiper"> 4 <swiper 5 indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" 6 interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px"> 7 <block wx:for="{{background}}" wx:key="*this"> 8 <swiper-item> 9 <view class="swiper-item {{item}}"></view> 10 </swiper-item> 11 </block> 12 </swiper> 13 </view> 14 <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;"> 15 <view class="weui-cells weui-cells_after-title"> 16 <view class="weui-cell weui-cell_switch"> 17 <view class="weui-cell__bd">指示點</view> 18 <view class="weui-cell__ft"> 19 <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" /> 20 </view> 21 </view> 22 <view class="weui-cell weui-cell_switch"> 23 <view class="weui-cell__bd">自動播放</view> 24 <view class="weui-cell__ft"> 25 <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" /> 26 </view> 27 </view> 28 <view class="weui-cell weui-cell_switch"> 29 <view class="weui-cell__bd">銜接滑動</view> 30 <view class="weui-cell__ft"> 31 <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" /> 32 </view> 33 </view> 34 <view class="weui-cell weui-cell_switch"> 35 <view class="weui-cell__bd">豎向</view> 36 <view class="weui-cell__ft"> 37 <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" /> 38 </view> 39 </view> 40 </view> 41 </view> 42 43 <view class="page-section page-section-spacing"> 44 <view class="page-section-title"> 45 <text>幻燈片切換時長(ms)</text> 46 <text class="info">{{duration}}</text> 47 </view> 48 <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" /> 49 <view class="page-section-title"> 50 <text>自動播放間隔時長(ms)</text> 51 <text class="info">{{interval}}</text> 52 </view> 53 <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" /> 54 <view class="page-section-title"> 55 <text>前邊距(px)</text> 56 <text class="info">{{previousMargin}}</text> 57 </view> 58 <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" /> 59 <view class="page-section-title"> 60 <text>后邊距(px)</text> 61 <text class="info">{{nextMargin}}</text> 62 </view> 63 <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" /> 64 </view> 65 </view> 66 </view> View Code 1 Page({ 2 data: { 3 background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], 4 indicatorDots: true, 5 vertical: false, 6 autoplay: false, 7 circular: false, 8 interval: 2000, 9 duration: 500, 10 previousMargin: 0, 11 nextMargin: 0 12 }, 13 changeProperty: function (e) { 14 var propertyName = e.currentTarget.dataset.propertyName 15 var newData = {} 16 newData[propertyName] = e.detail.value 17 this.setData(newData) 18 }, 19 changeIndicatorDots: function (e) { 20 this.setData({ 21 indicatorDots: !this.data.indicatorDots 22 }) 23 }, 24 changeAutoplay: function (e) { 25 this.setData({ 26 autoplay: !this.data.autoplay 27 }) 28 }, 29 intervalChange: function (e) { 30 this.setData({ 31 interval: e.detail.value 32 }) 33 }, 34 durationChange: function (e) { 35 this.setData({ 36 duration: e.detail.value 37 }) 38 } 39 }) View Code

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

movable-area

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

icon

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

text

文本

rich-text

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

1 Page({ 2 data: { 3 html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div><script>console.log(1)</script>', 4 nodes: [{ 5 name: 'div', 6 attrs: { 7 class: 'div_class', 8 style: 'line-height: 60px; color: red;' 9 }, 10 children: [{ 11 type: 'text', 12 text: 'Hello&nbsp;World!' 13 }] 14 }] 15 }, 16 tap() { 17 console.log('tap') 18 } 19 })

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吧

轉載于:https://www.cnblogs.com/yexiaochai/p/9374374.html

總結

以上是生活随笔為你收集整理的微信小程序开发02-小程序基本介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。