微信小程序之初始篇

微信官方團隊對小程序的定義是一種全新的連接用戶和服務的方式，當然微信小程序的出現更多的是鞏固微信社交老大的地位，微信小程序之後誕生的支付寶小程序、快應用以及最近出現的百度智能小程序、頭條小程序等，可見小程序設計出一套模板不是很難，巨頭們都在搶佔小程序風口，爭取能在小程序的裂變效應下為自身賦能，不扯了，如果有時間還是學習一下小程序開發吧。

準備工作
目錄結構
數據綁定
渲染標籤
模板使用
測試效果
總結

準備工作#

要說準備工作其實沒有什麼，我覺得只要保持一顆要學習的心態就夠了。微信官方提供了微信 Web 開發者工具，可以用來開發小程序，也可以用來調試微信公眾號網頁調試。

目錄結構#

微信小程序主體部分有三個文件構成，且必須放在項目的根目錄，具體作用如下：

app.js：小程序邏輯，如小程序啟動、初始化、前後臺切換以及加載小程序出錯事件的監聽等
app.json：小程序公共配置，如配置小程序的頁面路徑等
app.wxss：小程序公共樣式表（非必須）。

一個完整的小程序頁面應該有四種文件構成，具體作用如下：

js 文件：頁面邏輯；
wxml 文件：頁面結構；
json 文件，頁面配置（非必須）；
wxss 文件，頁面樣式（非必須）。

下面的小程序目錄結構是最基本的小程序目錄結構，具體如下：

│  app.js
│  app.json
│
└─src
    └─pages
            index.js
            index.wxml

當然，實際開發中少不了樣式文件。

數據綁定#

組件的使用就不再啰嗦了，直接看官方文檔就可以了，這裡來看一看在微信小程序中如何進行數據綁定，創建一個文本標籤如下：

<text>微信小程序初始篇...{{text}}</text>

其中兩對大括號裡面的 text 所表示的就是在相應 js 文件中指定的數據，在 data 下定義 text 並給定初始值，具體如下：

data: {
    text: '這是文本內容'
}

此時，小程序運行時就會顯示 text 對應的內容了，那麼如何動態的設置 text 的值呢，使用 setData 方法來為定義的變量賦值，具體參考如下：

/**
* button的點擊事件
*/
btnClick: function() {
    console.log("button被點擊了");
    //修改text的值
    this.setData({
        text: "這是新的文本內容..."
    });
},

這樣就動態更新了已定義變量的值了，非常簡單有木有。

渲染標籤#

小程序目前提供的渲染標籤有條件 if 和循環 for, 可以使用這兩種標籤完成一些界面的搭建，下面演示一些它們的使用方式：

<!-- 條件語句 -->
<!-- 如果條件為true則顯示，false則不顯示,注意條件外面的引號-->
<view wx:if="{{true}}">渲染標籤的使用...1</view>
<view wx:else>渲染標籤的使用...2</view>

<!-- 循環語句 -->
<!-- 默認item和index可以自定義,for裡面必須是數組形式 -->
<view wx:for="{{list}}" wx:for-item="it" wx:for-index="ix" wx:key="{{item.id}}">
  <!-- 遍歷，默認索引是index,值的item -->
  {{ix}}-{{it.name}}
</view>

wx 標籤參數為布爾值，可以借此控制一個組件的顯示和隱藏，wx 標籤參數時一個數組，可以遍歷數組中的內容將其循環顯示出來。

模板使用#

小程序定義模板主要有兩種方式：

第一種方式：

創建一個 wxml 文件如下：

<!--header.wxml-->
<text>頭部...</text>

然後再對應的頁面中使用 include 關鍵字引入，具體參考如下：

<!-- 導入定義的模板---include -->
<include src="../template/header"/>

第二種方式：

創建一個 wxml 文件，使用 template 標籤創建模板並制定模板名稱，具體參考如下：

<!--footer.wxml-->
<template name="footer1">
底部1...{{data}}
</template>

<template name="footer2">
底部2...{{data}}
</template>

然後在頁面對應的 wxml 中使用 import 關鍵字導入模板，用 is 屬性制定要顯示的模板，這種方式可以創建多個模板，使用時指定對應的名稱，具體參考如下：

<!-- 導入定義的模板---import -->
<!-- 可以定義多個模板，用is標記要實現的模板,data設置動態數據 -->
<import src="../template/footer"/>
<template is="footer1" data="{{data:'這是底部區域的內容'}}"/>

測試效果#

來一張測試效果圖如下：

總結#

本篇文章是學習微信小程序的第一篇，簡單寫個 Demo 了解一下小程序的開發模式以及一些小程序特殊語法的學習，這也算是入門小程序了。