準備

Demo 項目地址
https://github.com/zce/weapp-demo
Clone or Download（需準備GIT環(huán)境）

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

沒有git環(huán)境，可以直接下載

安裝開發(fā)環(huán)境

下載地址

• Windows 64位
• Windows 32位
• macOS

安裝過程

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

環(huán)境測試以及演示項目

安裝完成過后通過打開我們已經(jīng)完成的應用測試環(huán)境是否正常
開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄滓鸠。

掃碼登陸

登陸結(jié)果

選擇創(chuàng)建“項目”拾碌，填入你在公眾平臺的AppID释涛，如果沒有的話可以點擊無AppID加叁。

添加新項目

設置一個本地項目的名稱（非小程序名稱），比如WeApp Demo唇撬，并選擇一個本地文件夾作為存儲目錄它匕。

添加新項目

接下來點擊新建項目就可以在主界面中預覽到我們的豆瓣電影示例了

項目預覽

小程序開發(fā)初體驗

Hello world

希望是一個從零到一的轉(zhuǎn)換過程~

創(chuàng)建項目

接下來創(chuàng)建一個新的項目，理解小程序項目的基本結(jié)構(gòu)和一些基礎語法窖认。

官方的開發(fā)工具為此準備了一個QuickStart項目豫柬。在創(chuàng)建過程中，如果選擇的文件夾是個空文件夾扑浸，開發(fā)者工具會提示：是否需要創(chuàng)建一個quick start項目烧给。選擇是，開發(fā)者工具會自動幫助我們在開發(fā)目錄里生成一個簡單的項目喝噪。

創(chuàng)建QuickStart項目

借助官方的QuickStart項目完成最基本的Hello world础嫡，理解小程序項目的基本結(jié)構(gòu)，學習基礎操作與語法酝惧。

項目結(jié)構(gòu)

└─ empty-folder/ ·································· 項目所在目錄
   ├─ pages/ ······································ 頁面目錄
   │  ├─ index/ ··································· index頁面
   │  │  ├─ index.js ······························ index頁面邏輯
   │  │  ├─ index.wxml ···························· index頁面結(jié)構(gòu)
   │  │  └─ index.wxss ···························· index頁面樣式
   │  └─ logs/ ···································· logs頁面
   │     ├─ logs.js ······························· logs頁面邏輯
   │     ├─ logs.wxml ····························· logs頁面結(jié)構(gòu)
   │     └─ logs.wxss ····························· logs頁面樣式
   ├─ utils/ ······································ 公共腳本目錄
   │  └─ util.js ·································· 工具腳本
   ├─ app.js ······································ 應用程序邏輯
   ├─ app.json ···································· 應用程序配置
   └─ app.wxss ···································· 應用程序公共樣式

我簡單的畫了一個結(jié)構(gòu)圖：

[圖片上傳失敗...(image-3dad5-1562469242180)]

頁面結(jié)構(gòu)

每個頁面組件也分為四個文件組成：

[page-name].js

頁面邏輯文件榴鼎，用于創(chuàng)建頁面對象，以及處理頁面生命周期控制和數(shù)據(jù)處理

[page-name].json

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

[page-name].wxml

wxml指的是Wei Xin Markup Language

用于定義頁面中元素結(jié)構(gòu)的，語法遵循XML語法哩陕，注意是XML語法平项，不是HTML語法，不是HTML語法悍及，不是HTML語法

[page-name].wxss

wxml指的是Wei Xin Style Sheet

用于定義頁面樣式的闽瓢，語法遵循CSS語法，擴展了CSS基本用法和長度單位（主要就是rpx響應式像素）

項目配置

[圖片上傳失敗...(image-3b6317-1562469242180)]

相關鏈接：

• 官方文檔
• 生成配置文件

小程序中的配置文件分為兩種：

• 全局配置文件心赶，根目錄下的app.json
• 頁面配置文件鸳粉，每個頁面目錄下的[page-name].json

app.json

項目配置聲明文件（指定項目的一些信息，比如導航欄樣式顏色等等）

{
  // 當前程序是由哪些頁面組成的（第一項默認為初始頁面）
  // 所有使用到的組件或頁面都必須在此體現(xiàn)
  // 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": { ... },
  // 網(wǎng)絡超時設置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制臺輸出調(diào)試信息
  // 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作為項目主入口文件届谈，用于創(chuàng)建應用程序?qū)ο?/p>

// App函數(shù)是一個全局函數(shù)，用于創(chuàng)建應用程序?qū)ο?App({
  // ========== 全局數(shù)據(jù)對象（可以整個應用程序共享） ==========
  globalData: { ... },

  // ========== 應用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

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

  // 當應用程序進入前臺顯示狀態(tài)時觸發(fā)
  onShow () { ... },

  // 當應用程序進入后臺狀態(tài)時觸發(fā)
  onHide () { ... }
})

也就是說弯汰，當應用程序啟動時會自動執(zhí)行項目目錄下的app.js文件艰山。

在app.js中通過調(diào)用全局App([option])方法創(chuàng)建一個應用程序?qū)嵗?/p>

其中通過參數(shù)指定的一些特定的方法，會在特定的執(zhí)行時機去執(zhí)行咏闪，也就是說通常所說的生命周期事件方法曙搬。

也可以定義任意其他的對象成員（例如：方法和屬性），這些成員可以在內(nèi)部直接使用橡娄，或者外部通過獲取app對象調(diào)用：

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 也是全局函數(shù)滤祖，可以在任意地方調(diào)用，用于獲取全局應用程序?qū)嵗龑ο?var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())

頁面邏輯[page-name].js

[page-name].js是一個頁面的重要組成部分瓶籽，用于創(chuàng)建頁面對象

// 獲取全局應用程序?qū)ο?const app = getApp()

// Page也是一個全局函數(shù)匠童，用來創(chuàng)建頁面對象
Page({
  // ========== 頁面數(shù)據(jù)對象（可以暴露到視圖中，完成數(shù)據(jù)綁定） ==========
  data: { ... },

  // ========== 頁面方法（可以用于抽象一些公共的行為塑顺，例如加載數(shù)據(jù)汤求，也可以用于定義事件處理函數(shù)） ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 頁面加載觸發(fā)
  onLoad () { ... }

  ...
})

在應用程序執(zhí)行到當前頁面時，會執(zhí)行當前頁面下對應的[page-name].js文件严拒。
在[page-name].js中通過調(diào)用全局Page([option])方法創(chuàng)建一個頁面實例扬绪。

Page([option])方法[option]參數(shù)說明

視圖層分析

[page-name].wxml頁面結(jié)構(gòu)

WXML（WeiXin Markup Language）是MINA框架設計的一套標簽語言糙俗，基于XML勒奇。

結(jié)合一些基礎組件预鬓、事件系統(tǒng)巧骚、模板數(shù)據(jù)綁定，可以構(gòu)建出頁面的結(jié)構(gòu)格二。

簡單來說：wxml ≈ xml + 事件系統(tǒng) + 模板引擎

例如：

// 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中定義的組件應該怎么顯示顶猜。

為了適應廣大的前端開發(fā)者沧奴，我們的WXSS具有CSS大部分特性。 同時為了更適合開發(fā)微信小程序长窄，我們對CSS進行了擴充以及修改滔吠。

與CSS相比我們擴展的特性有：

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

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx挠日。如在 iPhone6 上疮绷，屏幕寬度為375px，共有750個物理像素嚣潜，則750rpx = 375px = 750物理像素冬骚，1rpx = 0.5px = 1物理像素。

rem（root em）: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx 只冻。

• 建議： 開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準庇麦。
• 注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發(fā)時盡量避免這種情況喜德。

樣式導入

使用@import語句可以導入外聯(lián)樣式表山橄，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束住诸。

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

選擇器

目前只支持如下選擇器

全局樣式與局部樣式

定義在app.wxss中的樣式為全局樣式驾胆，作用于每一個頁面。在[page-name].wxss文件中定義的樣式為局部樣式贱呐，只作用在對應的頁面丧诺，并會覆蓋app.wxss中相同的選擇器。