微信小程序入門二

# 微信小程序開發實戰javascript

## 準備css

### 課程概要html

- 微信小程序基本介紹
- 開發環境及工具的安裝配置
- 微信小程序的設計規範
- 微信小程序基本結構分析
- WXML和WXSS語法規範
- 微信小程序API使用
- 微信小程序訪問網絡資源
- 完整項目的開發流程前端

 

### Demo 項目地址java

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

#### Clone or Download(需準備`GIT`環境)github

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

沒有`git`環境,能夠直接[下載](https://github.com/zce/weapp-demo/archive/master.zip)小程序


### 安裝開發環境微信小程序

#### 下載地址

- [Windows 64位](https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&t=1475052055457)
- [Windows 32位](https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1475052055457)
- [macOS](https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki&t=1475052055457)


#### 安裝過程

對於Windows用戶直接雙擊下一步的方式安裝便可,此處注意咱們使用的版本是官方最新的版本(不須要破解),能夠不用AppID,也就是說沒有資格的開發者也能夠測試。


#### 環境測試以及演示項目

> 安裝完成事後經過打開咱們已經完成的應用測試環境是否正常

開發者工具安裝完成後,打開並使用微信掃碼登陸。

<p align="center">
![掃碼登錄](./img/step-01.png)
</p>

<p align="center">
![登錄結果](./img/step-02.png)
</p>

選擇建立「項目」,填入你在公衆平臺的`AppID`,若是沒有的話能夠點擊`無AppID`。

<p align="center">
![添加新項目](./img/step-03.png)
</p>

設置一個本地項目的名稱(非小程序名稱),好比`WeApp Demo`,並選擇一個本地文件夾做爲存儲目錄。

<p align="center">
![添加新項目](./img/step-04.png)
</p>

接下來點擊`新建項目`就能夠在主界面中預覽到咱們的`豆瓣電影示例`了

<p align="center">
![項目預覽](./img/step-05.png)
</p>

 


---

## 小程序開發初體驗

### Hello world

但願是一個從零到一的轉換過程~

#### 建立項目

接下來建立一個新的項目,理解小程序項目的基本結構和一些基礎語法。

官方的開發工具爲此準備了一個`QuickStart`項目。在建立過程當中,若是選擇的文件夾是個空文件夾,開發者工具會提示:是否須要建立一個`quick start`項目。選擇`是`,開發者工具會自動幫助咱們在開發目錄裏生成一個簡單的項目。

<p align="center">
![建立QuickStart項目](./img/step-06.png)
</p>

藉助官方的`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 ···································· 應用程序公共樣式
```

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

![小程序架構](./img/structure.png)


#### 頁面結構

每一個頁面組件也分爲四個文件組成:

##### [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響應式像素)


#### 項目配置

<p align="center">
![小程序界面結構](./img/config.jpg)
</p>

> 相關連接:
> - [官方文檔](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)
> - [生成配置文件](https://weapptool.com/start.html)

小程序中的配置文件分爲兩種:

- 全局配置文件,根目錄下的app.json
- 頁面配置文件,每一個頁面目錄下的[page-name].json

##### app.json

項目配置聲明文件(指定項目的一些信息,好比導航欄樣式顏色等等)

```javascript
{
// 當前程序是由哪些頁面組成的(第一項默認爲初始頁面)
// 全部使用到的組件或頁面都必須在此體現
// 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的設置:

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

 

### 邏輯層分析

#### 應用程序邏輯`app.js`

`app.js`做爲項目主入口文件,用於建立應用程序對象

```javascript
// 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

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

other.js

```javascript
// getApp 也是全局函數,能夠在任意地方調用,用於獲取全局應用程序實例對象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())
```


#### 頁面邏輯`[page-name].js`

`[page-name].js`是一個頁面的重要組成部分,用於建立頁面對象

```javascript
// 獲取全局應用程序對象
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 + 事件系統 + 模板引擎

例如:

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

```xml
<!-- 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`後跟須要導入的外聯樣式表的相對路徑,用`;`表示語句結束。

```css
@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`中相同的選擇器。

 

小程序開發中,咱們JS代碼的組織方式就是以CommonJS的規範來組織

相關文章
相關標籤/搜索