微信小程序——豆瓣電影——（1）：基礎入門

准備

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 64位
• Windows 32位
• macOS

安裝過程

對於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])方法創建一個應用程序實例。

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

屬性	類型	描述	觸發時機
onLaunch	Function	生命周期函數--監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow	Function	生命周期函數--監聽小程序顯示	當小程序啟動，或從后台進入前台顯示，會觸發 onShow
onHide	Function	生命周期函數--監聽小程序隱藏	當小程序從前台進入后台，會觸發 onHide

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

屬性	類型	描述
其他	Any	開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問，一般用於存放業務邏輯配置，比如：API地址

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]參數說明

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命周期函數--監聽頁面加載
onReady	Function	生命周期函數--監聽頁面初次渲染完成
onShow	Function	生命周期函數--監聽頁面顯示
onHide	Function	生命周期函數--監聽頁面隱藏
onUnload	Function	生命周期函數--監聽頁面卸載
onPullDownRefreash	Function	頁面相關事件處理函數--監聽用戶下拉動作
其他	Any	開發者可以添加任意的函數或數據到 object 參數中，用 this 可以訪問

視圖層分析

[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 。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)	rem換算rpx (750/20)
iPhone5	1rpx = 0.42px	1px = 2.34rpx	1rem = 37.5rpx
iPhone6	1rpx = 0.5px	1px = 2rpx	1rem = 37.5rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx	1rem = 37.5rpx

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

樣式導入

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

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

選擇器

目前只支持如下選擇器

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view	checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

全局樣式與局部樣式

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