微信小程序之初始篇

原文首發於微信公衆號：jzman-blog，歡迎關注交流！

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

1. 準備工做
2. 目錄結構
3. 數據綁定
4. 渲染標籤
5. 模板使用
6. 測試效果
7. 總結

準備工做

要說準備工做其實沒有什麼，我以爲只要保持一顆要學習的心態就夠了。微信官方提供了微信 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:if 標籤參數爲布爾值，能夠藉此控制一個組件的顯示和隱藏，wx:for 標籤參數時一個數組，能夠遍歷數組中的內容將其循環顯示出來。

模板使用

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

• 第一種方式：

建立一個 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 瞭解一下小程序的開發模式以及一些小程序特殊語法的學習，這也算是入門小程序了。能夠選擇關注我的微信公衆號：jzman-blog 獲取最新更新，一塊兒交流學習!