基本的準(zhǔn)備工作
-知識(shí)儲(chǔ)備
--基礎(chǔ):HTML+JS+CSS
--進(jìn)階：React、Vue
-工具安裝
--工具由微信官方提供
---下載地址：https://github.com/zce/weapp-demo
-項(xiàng)目預(yù)覽>校驗(yàn)環(huán)境
--根據(jù)目錄進(jìn)行操作
--在開(kāi)發(fā)者工具預(yù)覽效果
--頁(yè)面基本結(jié)構(gòu)，幾乎每個(gè)小程序都是這個(gè)結(jié)構(gòu)
--nav bar
--body
--tab bar
開(kāi)發(fā)體驗(yàn)階段
-理解微信小程序的架構(gòu)
--開(kāi)發(fā)基礎(chǔ)骨架：https://github.com/zce/weapp-boilerplate.git
└─ empty-folder/ ·································· 項(xiàng)目所在目錄
├─ pages/ ······································ 頁(yè)面目錄
│ ├─ index/ ··································· index頁(yè)面
│ │ ├─ index.js ······························ index頁(yè)面邏輯
│ │ ├─ index.wxml ···························· index頁(yè)面結(jié)構(gòu)
│ │ └─ index.wxss ···························· index頁(yè)面樣式
│ └─ logs/ ···································· logs頁(yè)面
│ ├─ logs.js ······························· logs頁(yè)面邏輯
│ ├─ logs.wxml ····························· logs頁(yè)面結(jié)構(gòu)
│ └─ logs.wxss ····························· logs頁(yè)面樣式
├─ utils/ ······································ 公共腳本目錄
│ └─ util.js ·································· 工具腳本
├─ app.js ······································ 應(yīng)用程序邏輯
├─ app.json ···································· 應(yīng)用程序配置
└─ app.wxss ···································· 應(yīng)用程序公共樣式
--app.js>用于定義整個(gè)應(yīng)用的邏輯
---app函數(shù)是一個(gè)全局函數(shù)
---app函數(shù)作用就是用來(lái)創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗?br /> ---每個(gè)應(yīng)用程序都會(huì)有他的生命周期
--app.json
---頁(yè)面的基本配置信息
--app.wxss
---css代碼，用來(lái)設(shè)置整個(gè)應(yīng)用的樣式
-項(xiàng)目配置

-頁(yè)面結(jié)構(gòu)
--頁(yè)面的結(jié)構(gòu)必須由多個(gè)文件組成
---js文件：定義頁(yè)面的邏輯；app如上，page也是一個(gè)全局函數(shù)，用來(lái)創(chuàng)建頁(yè)面對(duì)象
---json文件：配置文件，根據(jù)需求創(chuàng)建，無(wú)需求便可不創(chuàng)建，因?yàn)轫?yè)面有頁(yè)面的配置，應(yīng)用程序有應(yīng)用程序的配置?？梢圆淮嬖?，但是應(yīng)用程序必須配置json文件。
---wxml文件：頁(yè)面結(jié)構(gòu)文件,是XML語(yǔ)法，不是HTML語(yǔ)法。
---wxss文件：樣式文件。
--每個(gè)文件夾內(nèi)的文件名次統(tǒng)一，只有后綴名不同，因?yàn)閖son配置文件中最終會(huì)將所有的頁(yè)面整合成一個(gè)頁(yè)面，
-如何完成邏輯和界面

-界面如何開(kāi)發(fā)

 

二：入門(mén)實(shí)戰(zhàn)基礎(chǔ)

課程概要

• 微信小程序基本介紹
• 開(kāi)發(fā)環(huán)境及工具的安裝配置
• 微信小程序的設(shè)計(jì)規(guī)范
• 微信小程序基本結(jié)構(gòu)分析
• WXML和WXSS語(yǔ)法規(guī)范
• 微信小程序API使用
• 微信小程序訪(fǎng)問(wèn)網(wǎng)絡(luò)資源
• 完整項(xiàng)目的開(kāi)發(fā)流程

Demo 項(xiàng)目地址

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

Clone or Download（需準(zhǔn)備GIT環(huán)境）

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

沒(méi)有g(shù)it環(huán)境，可以直接下載

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

下載地址

• Windows 64位
• Windows 32位
• macOS

安裝過(guò)程

對(duì)于Windows用戶(hù)直接雙擊下一步的方式安裝即可，此處注意我們使用的版本是官方最新的版本（不需要破解），可以不用AppID，也就是說(shuō)沒(méi)有資格的開(kāi)發(fā)者也可以測(cè)試。

環(huán)境測(cè)試以及演示項(xiàng)目

安裝完成過(guò)后通過(guò)打開(kāi)我們已經(jīng)完成的應(yīng)用測(cè)試環(huán)境是否正常

開(kāi)發(fā)者工具安裝完成后，打開(kāi)并使用微信掃碼登錄。

 

 

選擇創(chuàng)建“項(xiàng)目”，填入你在公眾平臺(tái)的AppID，如果沒(méi)有的話(huà)可以點(diǎn)擊無(wú)AppID。

 

設(shè)置一個(gè)本地項(xiàng)目的名稱(chēng)（非小程序名稱(chēng)），比如WeApp Demo，并選擇一個(gè)本地文件夾作為存儲(chǔ)目錄。

 

接下來(lái)點(diǎn)擊新建項(xiàng)目就可以在主界面中預(yù)覽到我們的豆瓣電影示例了

 

---

小程序開(kāi)發(fā)初體驗(yàn)

Hello world

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

創(chuàng)建項(xiàng)目

接下來(lái)創(chuàng)建一個(gè)新的項(xiàng)目，理解小程序項(xiàng)目的基本結(jié)構(gòu)和一些基礎(chǔ)語(yǔ)法。

官方的開(kāi)發(fā)工具為此準(zhǔn)備了一個(gè)QuickStart項(xiàng)目。在創(chuàng)建過(guò)程中，如果選擇的文件夾是個(gè)空文件夾，開(kāi)發(fā)者工具會(huì)提示：是否需要?jiǎng)?chuàng)建一個(gè)quick start項(xiàng)目。選擇是，開(kāi)發(fā)者工具會(huì)自動(dòng)幫助我們?cè)陂_(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的項(xiàng)目。

 

借助官方的QuickStart項(xiàng)目完成最基本的Hello world，理解小程序項(xiàng)目的基本結(jié)構(gòu)，學(xué)習(xí)基礎(chǔ)操作與語(yǔ)法。

項(xiàng)目結(jié)構(gòu)

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

 

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

每個(gè)頁(yè)面組件也分為四個(gè)文件組成：

[page-name].js

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

[page-name].json

設(shè)置當(dāng)前頁(yè)面工作時(shí)的window的配置，此處會(huì)覆蓋app.json中的window設(shè)置，也就是說(shuō)只可以設(shè)置window中設(shè)置的屬性

[page-name].wxml

wxml指的是Wei Xin Markup Language

用于定義頁(yè)面中元素結(jié)構(gòu)的，語(yǔ)法遵循XML語(yǔ)法，注意是XML語(yǔ)法，不是HTML語(yǔ)法，不是HTML語(yǔ)法，不是HTML語(yǔ)法

[page-name].wxss

wxml指的是Wei Xin Style Sheet

用于定義頁(yè)面樣式的，語(yǔ)法遵循CSS語(yǔ)法，擴(kuò)展了CSS基本用法和長(zhǎng)度單位（主要就是rpx響應(yīng)式像素）

項(xiàng)目配置

 

相關(guān)鏈接： - 官方文檔 - 生成配置文件

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

• 全局配置文件，根目錄下的app.json
• 頁(yè)面配置文件，每個(gè)頁(yè)面目錄下的[page-name].json

app.json

項(xiàng)目配置聲明文件（指定項(xiàng)目的一些信息，比如導(dǎo)航欄樣式顏色等等）

{
// 當(dāng)前程序是由哪些頁(yè)面組成的（第一項(xiàng)默認(rèn)為初始頁(yè)面）
// 所有使用到的組件或頁(yè)面都必須在此體現(xiàn)
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
"pages": [ ... ],
// 應(yīng)用程序窗口設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": { ... },
// 應(yīng)用導(dǎo)航欄設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
"tabBar": { ... },
// 網(wǎng)絡(luò)超時(shí)設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {},
// 是否在控制臺(tái)輸出調(diào)試信息
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}

[page-name].json

用于指定特定頁(yè)面工作時(shí)，window的設(shè)置：

{
// 導(dǎo)航條背景色
"navigationBarBackgroundColor": "#35495e",
// 導(dǎo)航條前景色（只能是white/black）
"navigationBarTextStyle": "white",
// 導(dǎo)航條文本
"navigationBarTitleText": "電影 « 豆瓣",
// 窗口背景顏色
"backgroundColor": "#fff",
// 窗口前景色
"backgroundTextStyle": "dark",
// 是否開(kāi)啟下拉刷新
"enablePullDownRefresh": true
}

邏輯層分析

應(yīng)用程序邏輯app.js

app.js作為項(xiàng)目主入口文件，用于創(chuàng)建應(yīng)用程序?qū)ο?/p>

// App函數(shù)是一個(gè)全局函數(shù)，用于創(chuàng)建應(yīng)用程序?qū)ο?
App({
// ========== 全局?jǐn)?shù)據(jù)對(duì)象（可以整個(gè)應(yīng)用程序共享） ==========

globalData: { ... },

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

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

// 當(dāng)應(yīng)用程序進(jìn)入前臺(tái)顯示狀態(tài)時(shí)觸發(fā)
onShow () { ... },

// 當(dāng)應(yīng)用程序進(jìn)入后臺(tái)狀態(tài)時(shí)觸發(fā)
onHide () { ... }
})

也就是說(shuō)，當(dāng)應(yīng)用程序啟動(dòng)時(shí)會(huì)自動(dòng)執(zhí)行項(xiàng)目目錄下的app.js文件。

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

其中通過(guò)參數(shù)指定的一些特定的方法，會(huì)在特定的執(zhí)行時(shí)機(jī)去執(zhí)行，也就是說(shuō)通常所說(shuō)的生命周期事件方法。

屬性 | 類(lèi)型 | 描述 | 觸發(fā)時(shí)機(jī)

|------|------|--------- onLaunch | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序初始化 | 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次） onShow | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序顯示 | 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow onHide | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序隱藏 | 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide

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

屬性 | 類(lèi)型 | 描述

|------|------ 其他 | Any | 開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪(fǎng)問(wèn)，一般用于存放業(yè)務(wù)邏輯配置，比如：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 也是全局函數(shù)，可以在任意地方調(diào)用，用于獲取全局應(yīng)用程序?qū)嵗龑?duì)象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())

頁(yè)面邏輯[page-name].js

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

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

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

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

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

...
})

在應(yīng)用程序執(zhí)行到當(dāng)前頁(yè)面時(shí)，會(huì)執(zhí)行當(dāng)前頁(yè)面下對(duì)應(yīng)的[page-name].js文件。 在[page-name].js中通過(guò)調(diào)用全局Page([option])方法創(chuàng)建一個(gè)頁(yè)面實(shí)例。

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

屬性 | 類(lèi)型 | 描述

| ---- | ---- data | Object | 頁(yè)面的初始數(shù)據(jù) onLoad | Function | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 onReady | Function | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 onShow | Function | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 onHide | Function | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 onUnload | Function | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 onPullDownRefreash | Function | 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作 其他 | Any | 開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，用 this 可以訪(fǎng)問(wèn)

視圖層分析

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

WXML（WeiXin Markup Language）是MINA框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，基于XML。

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

簡(jiǎn)單來(lái)說(shuō)：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頁(yè)面樣式

WXSS（WeiXin Style Sheets）是MINA框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，基于XML。

WXSS用來(lái)決定了在WXML中定義的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開(kāi)發(fā)者，我們的WXSS具有CSS大部分特性。 同時(shí)為了更適合開(kāi)發(fā)微信小程序，我們對(duì)CSS進(jìn)行了擴(kuò)充以及修改。

與CSS相比我們擴(kuò)展的特性有：

• 尺寸單位
• 樣式導(dǎo)入（CSS也有）

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

設(shè)備 | 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

• 建議： 開(kāi)發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。
• 注意： 在較小的屏幕上不可避免的會(huì)有一些毛刺，請(qǐng)?jiān)陂_(kāi)發(fā)時(shí)盡量避免這種情況。

樣式導(dǎo)入

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。

@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 組件后邊插入內(nèi)容 ::before | view::before | 在 view 組件前邊插入內(nèi)容

全局樣式與局部樣式

定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在[page-name].wxss文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋app.wxss中相同的選擇器。

小程序開(kāi)發(fā)中，我們JS代碼的組織方式就是以CommonJS的規(guī)范來(lái)組織