微信小程式 Unit01

HTTP協議的狀態管理

由於HTTP協議是一款短連線的協議，所以http請求具有無狀態的特點。即同一個客戶端傳送的多次請求並沒有當做一個整體來看待。所以急需想一些辦法將這些獨立的請求當做一個整體，即將同一個客戶端傳送的多次請求涉及到的資料儲存下來。這就叫做http的狀態管理。

http的狀態管理有3種解決方案：

cookie

session

token 詳見視訊。

jwt 連結：https://pan.baidu.com/s/1B3YUiJnd3A2vOGKmkEu0_Q 
提取碼：2prs

cookie機制

1. 客戶端傳送第一次請求，服務端接收請求處理請求。

2. 服務端返回響應，並且在響應資料包中以訊息頭的方式告訴客戶端有一些cookie資料需要客戶端儲存。

3. 客戶端接收到響應後，解析響應資料包，發現cookie資訊後儲存到瀏覽器本地。

4. 當客戶端傳送後續請求時，將會從本地尋找合適的cookie帶著一起傳送請求（使用請求訊息頭的方式新增到請求資料包）

5. 服務端接收請求，解析請求後獲取cookie資訊，這些資訊是這個客戶端上次請求時服務端新增的，這樣就可以解決http狀態管理。

cookie有個嚴重的缺點：不安全。

session機制

1. 客戶端傳送請求，服務端接收請求，處理請求。

2. 服務端請求處理完畢後，為該客戶端分配一個隨機的SESSIONID

   ，並且將需要儲存的資料與SESSIONID繫結在一起存在服務端記憶體中。在響應資料包中追加SESSIONID給客戶端，讓客戶端儲存。這個sessionid就相當於某一個客戶端的唯一識別符號。

3. 客戶端接收響應，儲存SESSIONID，當傳送後續請求時，將會自動帶著SESSIONID一起傳送。

4. 服務端接收請求，獲取SESSIONID，去記憶體中尋找是否有與該SESSIONID繫結在一起的資料，如果有則拿出來執行後續任務。至此完成http的狀態管理。

Token機制

jwt 連結：https://pan.baidu.com/s/1B3YUiJnd3A2vOGKmkEu0_Q 
提取碼：2prs

重新下載小程式開發工具：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下載穩定版：穩定版 Windows 64

微信小程式

微信公眾平臺

服務號：為企業或組織提供的進行使用者的管理和服務的賬號型別。

訂閱號：為企業、組織、個人提供的全新的訊息傳播方式。

小程式：為企業、組織、個人提供 的可以達到與原生app相同體驗的應用程式。（微信內部執行）優點在於：用完就走。

訪問微信公眾平臺官方網站：

https://mp.weixin.qq.com

接入微信小程式

進入微信公眾平臺官網https://mp.weixin.qq.com，註冊賬號。

新建專案

小程式專案的檔案結構

小程式專案中包含的檔案型別有：

.json 配置檔案 （檔案符合json字串的語法）

app.json 專案根目錄中。定義全域性配置。

"pages.json" 單頁面目錄中。定義當前頁面的配置。

.wxml 模板檔案 類似vue中的template，定義頁面結構。但是此處不能使用任何html原生標籤。

.wxss 樣式檔案

app.wxss 在專案根目錄中。 定義全域性樣式。

"pages.wxss" 在單頁面目錄中。 定義單頁面樣式。

.js 指令碼檔案

app.js 在專案根目錄中。 編寫小程式全域性初始化指令碼。

"pages.js" 在單頁面目錄中， 編寫當前頁面所需要的指令碼程式碼。

app.json

app.json用於對小程式進行全域性配置。

json檔案有非常嚴格的書寫格式：

json檔案中不能寫註釋。

字串必須在雙引號之間。json物件的屬性名也必須在雙引號之間

陣列或物件的最後一個成員後不能寫逗號。

json中不存在undefined。

　　

pages配置項

"pages": [
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
],
新建pages/test/test後將會在pages目錄下新建test目錄並且新增四件套（.js .wxss .wxml .json）。若寫在陣列的第一個元素，則會被當做小程式的首頁顯示。

window配置項

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

"window": {
    "backgroundTextStyle": "dark",
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true,
​
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "學子影院",
    "navigationBarTextStyle": "white"
},

tabbar配置項

tabbar配置項用於配置小程式的底部選項卡。object型別。

"tabBar": {
    "color": "#333",
    "selectedColor": "#f00",
    "list": [{
        "text": "電影",
        "pagePath": "pages/index/index",
        "iconPath":"/images/index_disable.png",
        "selectedIconPath": "/images/index_enable.png"
    },{
        "text": "影院",
        "pagePath": "/pages/theatre/theatre",
        "iconPath": "/images/theatre_disable.png",
        "selectedIconPath": "/images/theatre_enable.png"
    },{
        "text": "我的",
        "pagePath": "pages/me/me",
        "iconPath": "/images/me_disable.png",
        "selectedIconPath": "/images/me_enable.png"
    }]
},

style

基礎庫 2.8.0 開始支援，低版本需做相容處理。

微信客戶端 7.0 開始，UI 介面進行了大改版。小程式也進行了基礎元件的樣式升級。app.json 中配置 "style": "v2"可表明啟用新版的元件樣式。

本次改動涉及的元件有 button icon radio checkbox switch slider。可前往小程式示例進行體驗。

sitemapLocation

指明 sitemap.json 的位置；sitemap.json中配置的內容指明瞭哪些頁面希望微信官方通用 爬蟲進行收錄。

每當更新頁面跳轉時，控制檯都會有警告，描述當前頁面是否被索引。可以通過project.config.json裡的setting配置項，新增checkSiteMap:false即可隱藏這些警告。

app.wxss

用於定義全域性樣式。語法與css極其類似。

app.js

app.js是小程式全域性的初始化指令碼。當小程式啟動時，將會執行app.js，呼叫App()來初始化整個小程式的環境。初始化時將會自動呼叫onLaunch生命週期方法，可以讓小程式開發者在應用啟動時完成某些業務邏輯。

App({
    onLaunch(){
        xxxxx
    }
})

小程式元件

小程式的wxml中由各式各樣的元件構成。這些元件都是微信自定義的，原生html標籤都不能使用。

view元件

view元件為檢視容器元件，其基本語法如下：

<view class="css樣式類名"
      hover-class="點選view後所應用的樣式類名">
</view>
案例：新建：pages/testing/view/view.

let f = true
f = -1
f = 100
f = 0
f = 'true'
f = 'false'
f = ''
f = undefined
f = null
if(f){
    console.log('true')
}