開篇語

開篇語已經在熱身階段說過了，所以就不重復了。有興趣的讀者移步
來寫點微信小程序吧：D） ～～～（熱身階段）
以及前面借鑒小程序開發官方文檔的簡易教程寫的總綱
來寫點微信小程序吧：D） ～～～狂奔階段
還有分析小程序的目錄結構與配置的內容
來寫點微信小程序吧：D） ~ ~ ~ 分析小程序目錄結構與配置
另外分析小程序的邏輯層的內容：
來寫點微信小程序吧：D） ---- 分析小程序邏輯層內容

上一張學長的圖片鎮樓，下面直接上開發過程筆記。

張小龍學長

正文

一、 小程序邏輯層分為以下3個Part：

1. WXML

2. WXSS
3. 基礎組件

視圖層結構圖

二、 WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。說的通俗一點，WXML有點類似與HTML 一樣是超文本標記語言，相當于一個最后的收尾的設計師。告訴你，這個地方要有個圖片，然后這個圖片是由另外的地方引進的，然后告訴你這兒有個按鈕，這個按鈕連接著別的地方的開關，只要你一點，就會發生什么事！這么一說，我還覺得做小程序就像蓋房子，有人負責給房子打通各種通道（腳本js）、有人負責給房子規定布局，比如這個地方是什么顏色之類的（配置文件json）、還有的就是接通各個地方的線路的人（wxml）！萬事萬物，都有其相似之處啊。

WXML的作用

WXML有以下功能：

1.數據綁定

規定這個地方要有個text數據，然后數據來源是js里面的motto變量，至于樣式則是user-motto的

規定這個地方要有個text數據，然后數據來源是js里面的motto變量，至于樣式則是usermotto的

在對應的腳本里面定義一個變量motto

然后在腳本里面定義一個變量

最后在wxss里面（網頁設計師應該已經醒悟了，微信就是照搬了HTML+CSS+Javascript的樣子）寫個樣式

usermotto的樣式設置

2.列表渲染

先定義個列表變量，另外不知道為何，我不能在原本的data里面定義一個array變量。所以定義了一個新的data 以及把motto轉進去了。

先定義個列表變量

然后給一塊地方，鏈接

來不及排版了。明天還要去我二姑媽家，趕緊弄完睡覺

還可以使用一些簡單的函數做一些比較有趣的東西

一個沒有排版的九九乘法表

3.條件渲染

設定判斷條件，if就是判斷的意思，然后{{ XXXX }} XXXX是判定條件，至于view是在js里面定義的變量，然后==的意思不用我解釋吧 ！所以通篇下來，其實就是一個

  if true：
        print（XX） 
  else：
         print（nothing）

設定判斷條件，if就是判斷的意思，然后{{ XXXX }} XXXX是判定條件，至于view是在js里面定義的變量，然后==的意思不用我解釋吧

在腳本里面定義你所需要的一些變量

在腳本里面寫上變量的定義。

效果圖

4.模板

模板的意思大概就是

Paste_Image.png

Paste_Image.png

5.事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進行處理。
事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外信息，如 id, dataset, touches。

在wxml中建立一個事件，也就是其他編程中的使用函數。原文中的是建立一個view，我覺得這種需要輸入的地方還是采用一個button按鈕比較好。

在wxml中建立一個事件，也就是其他編程中的使用函數

在Js腳本文件文件里面寫入方法（函數）并且綁定其中某個數據(另外，之前是我傻逼。。。。忘了加“，”所以一直編碼不正確)：

在Js腳本文件文件里面寫入方法

具體效果圖

6.引用

WXML 提供兩種文件引用方式import和include。

import
import可以在該文件中使用目標文件定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

include
include可以將目標文件除了<template/>的整個代碼引入，相當于是拷貝到include位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

結束語

小程序算是假期的一個調劑吧，不然真的就是天天看小說，看視頻的糜爛生活了。所以要是大家有興趣的話，可以關注一下我的進度。當然，小程序不是我的全部，寒假清單里可沒有小程序的容身之地。所以可能會有存在時斷時續的狀況，不過這都不是問題。后面我也會持續的跟進我對官方文檔的解讀進度，對Javascript理解不深，所以難免有的地方會存在一些錯誤，敬請諒解，不過基本上每一個原創點都是經過我自己的調試Debug，高手別來笑話我這些低端，畢竟目前我還是很菜的。OK，簡書寫完了。我仿佛已經聽到了扇貝單詞在召喚我。~~ ~ _{搞完活動碎覺咯 另外，辛苦某只} ~ ？？？~ ~ 一直跟我聊天到我寫完，碎覺去?。?！

另外安利幾位大神的作品（直接給大神簡書的鏈接）：
微信小程序—豆瓣電影APP
微信小程序之知乎日報
微信小程序——一個簡單的音樂播放器
微信小程序-從零開始制作一個跑步微信小程序

個人宣言

知識傳遞力量，技術無國界，文化改變生活！