準備

Demo 專案地址

https://github.com/zce/weapp-demo

Clone or Download（需準備GIT環境）

$ cd path/to/project/root
$ git clone https://github.com/zce/weapp-demo.git project-name --depth 1
$ cd project-name

沒有git環境，可以直接下載

安裝開發環境

下載地址

安裝過程

對於Windows使用者直接雙擊下一步的方式安裝即可，此處注意我們使用的版本是官方最新的版本（不需要破解），可以不用AppID，也就是說沒有資格的開發者也可以測試。

環境測試以及演示專案

安裝完成過後通過開啟我們已經完成的應用測試環境是否正常

開發者工具安裝完成後，開啟並使用微信掃碼登入。

選擇建立“專案”，填入你在公眾平臺的AppID，如果沒有的話可以點選無AppID。

設定一個本地專案的名稱（非小程式名稱），比如WeApp Demo，並選擇一個本地資料夾作為儲存目錄。

接下來點選新建專案就可以在主介面中預覽到我們的豆瓣電影示例了

小程式開發初體驗

Hello world

希望是一個從零到一的轉換過程~

建立專案

接下來建立一個新的專案，理解小程式專案的基本結構和一些基礎語法。

官方的開發工具為此準備了一個QuickStart專案。在建立過程中，如果選擇的資料夾是個空資料夾，開發者工具會提示：是否需要建立一個quick start

藉助官方的QuickStart專案完成最基本的Hello world，理解小程式專案的基本結構，學習基礎操作與語法。

專案結構

└─ empty-folder/ ·································· 專案所在目錄
   ├─ pages/ ······································ 頁面目錄
   │  ├─ index/ ··································· index頁面
   │  │  ├─ index.js ······························ index頁面邏輯
   │  │  ├─ index.wxml ···························· index頁面結構
   │  │  └─ index.wxss ···························· index頁面樣式
   │  └─ logs/ ···································· logs頁面
   │     ├─ logs.js ······························· logs頁面邏輯
   │     ├─ logs.wxml ····························· logs頁面結構
   │     └─ logs.wxss ····························· logs頁面樣式
   ├─ utils/ ······································ 公共指令碼目錄
   │  └─ util.js ·································· 工具指令碼
   ├─ app.js ······································ 應用程式邏輯
   ├─ app.json ···································· 應用程式配置
   └─ app.wxss ···································· 應用程式公共樣式
 

我簡單的畫了一個結構圖：

頁面結構

每個頁面元件也分為四個檔案組成：

[page-name].js

頁面邏輯檔案，用於建立頁面物件，以及處理頁面生命週期控制和資料處理

[page-name].json

設定當前頁面工作時的window的配置，此處會覆蓋app.json中的window設定，也就是說只可以設定window中設定的屬性

[page-name].wxml

wxml指的是Wei Xin Markup Language

用於定義頁面中元素結構的，語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法

[page-name].wxss

wxml指的是Wei Xin Style Sheet

用於定義頁面樣式的，語法遵循CSS語法，擴充套件了CSS基本用法和長度單位（主要就是rpx響應式畫素）

專案配置

相關連結：

小程式中的配置檔案分為兩種：

• 全域性配置檔案，根目錄下的app.json
• 頁面配置檔案，每個頁面目錄下的[page-name].json

app.json

專案配置宣告檔案（指定專案的一些資訊，比如導航欄樣式顏色等等）

{
  // 當前程式是由哪些頁面組成的（第一項預設為初始頁面）
  // 所有使用到的元件或頁面都必須在此體現
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 應用程式視窗設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 應用導航欄設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 網路超時設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制檯輸出除錯資訊
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}

[page-name].json

用於指定特定頁面工作時，window的設定：

{
  // 導航條背景色
  "navigationBarBackgroundColor": "#35495e",
  // 導航條前景色（只能是white/black）
  "navigationBarTextStyle": "white",
  // 導航條文字
  "navigationBarTitleText": "電影 « 豆瓣",
  // 視窗背景顏色
  "backgroundColor": "#fff",
  // 視窗前景色
  "backgroundTextStyle": "dark",
  // 是否開啟下拉重新整理
  "enablePullDownRefresh": true
}

邏輯層分析

應用程式邏輯app.js

app.js作為專案主入口檔案，用於建立應用程式物件

// App函式是一個全域性函式，用於建立應用程式物件
App({
  // ========== 全域性資料物件（可以整個應用程式共享） ==========
  globalData: { ... },

  // ========== 應用程式全域性方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命週期方法 ==========
  // 應用程式啟動時觸發一次
  onLaunch () { ... },

  // 當應用程式進入前臺顯示狀態時觸發
  onShow () { ... },

  // 當應用程式進入後臺狀態時觸發
  onHide () { ... }
})

也就是說，當應用程式啟動時會自動執行專案目錄下的app.js檔案。

在app.js中通過呼叫全域性App([option])方法建立一個應用程式例項。

其中通過引數指定的一些特定的方法，會在特定的執行時機去執行，也就是說通常所說的生命週期事件方法。

也可以定義任意其他的物件成員（例如：方法和屬性），這些成員可以在內部直接使用，或者外部通過獲取app物件呼叫：

app.js

App({
  data1: '123',
  data2: { message: 'hello world' },
  api: {
    list: 'https://github.com/zce/',
    detail: 'https://github.com/zce/',
  },
  foo () {
    return 'bar'
  }
})

other.js

// getApp 也是全域性函式，可以在任意地方呼叫，用於獲取全域性應用程式例項物件
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())

頁面邏輯[page-name].js

[page-name].js是一個頁面的重要組成部分，用於建立頁面物件

// 獲取全域性應用程式物件
const app = getApp()

// Page也是一個全域性函式，用來建立頁面物件
Page({
  // ========== 頁面資料物件（可以暴露到檢視中，完成資料繫結） ==========
  data: { ... },

  // ========== 頁面方法（可以用於抽象一些公共的行為，例如載入資料，也可以用於定義事件處理函式） ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命週期方法 ==========
  // 頁面載入觸發
  onLoad () { ... }

  ...
})

在應用程式執行到當前頁面時，會執行當前頁面下對應的[page-name].js檔案。
在[page-name].js中通過呼叫全域性Page([option])方法建立一個頁面例項。

Page([option])方法[option]引數說明

檢視層分析

[page-name].wxml頁面結構

WXML（WeiXin Markup Language）是MINA框架設計的一套標籤語言，基於XML。

結合一些基礎元件、事件系統、模板資料繫結，可以構建出頁面的結構。

簡單來說：wxml ≈ xml + 事件系統 + 模板引擎

例如：

// js
Page({
  data: {
    todos: [
      { text: 'JavaScript', completed: false },
      { text: 'JavaScript+', completed: false },
      { text: 'JavaScript++', completed: false }
    ]
  },
  completed (e) { ... }
})

<!-- wxml -->
<view>
  <view wx:for="{{ todos }}">
    <block wx:if="{{ !item.completed }}">
      <text>{{ item.text }}</text>
      <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
    </block>
  </view>
</view>

[page-name].wxss頁面樣式

WXSS（WeiXin Style Sheets）是MINA框架設計的一套標籤語言，基於XML。

WXSS用來決定了在WXML中定義的元件應該怎麼顯示。

為了適應廣大的前端開發者，我們的WXSS具有CSS大部分特性。 同時為了更適合開發微信小程式，我們對CSS進行了擴充以及修改。

與CSS相比我們擴充套件的特性有：

• 尺寸單位
• 樣式匯入（CSS也有）

尺寸單位

rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

rem（root em）: 規定螢幕寬度為20rem；1rem = (750/20)rpx 。

• 建議： 開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。
• 注意： 在較小的螢幕上不可避免的會有一些毛刺，請在開發時儘量避免這種情況。

樣式匯入

使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。

@import "common.wxss";
text {
  background-color: #ff0;
}

選擇器

目前只支援如下選擇器

全域性樣式與區域性樣式

定義在app.wxss中的樣式為全域性樣式，作用於每一個頁面。在[page-name].wxss檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋app.wxss中相同的選擇器。

小程式開發進階

未完待續