前端_微信小程序

微信小程序

小程序
小程序包含描述總體程序的app和多個描述各自頁面的page,根目錄包含app.js(必需),project.config,json(必需),app.json(必需).app.wxss(非必需).
每一個頁面包含四個文件:index.js(頁面邏輯,必需),index.wxml(頁面結構,必需),index.json(頁面配置,非必需).index.wxss(頁面樣式表,非必需)

WXML:一種標籤語言,結合組件,事件,構建出頁面結構.全部的wxml標籤都支持的屬性有id,class,style,hidden,data,bind/catch
WXSS:rpx做爲尺寸單位，@import url('.//.a.wxss')實現樣式引用。支持.class #id element ：after ：before
JSON:一種數據格式,靜態配置.語法: { "pages": [], "window": {}},注意在JSON中沒法使用註釋
app.json(小程序公共配置)當前小程序的全局配置,包括小程序全部頁面路徑,界面表現,網絡超時時間,底部tab等。
JavaScript：ECMAScriptScript（語法+類型+語句+關鍵字+操做符+對象）+小程序框架+小程序API

小程序的宿主環境：分爲邏輯層（JS）與渲染層（WXML+WXSS），頁面由組件，API，事件，兼容性構成。
小程序的API：宿主環境提供豐富的API，全部的API都掛在wx對象下（除了Page/APP等特殊的處理器）。

wx.set*開頭的API是寫入數據到宿主環境的接口。
 wx.get*開頭的API是獲取數據到宿主環境的接口。
 小程序要求開發者服務器提供HTTPS服務的接口。
 接口回調說明：success 成功 fail 失敗 complete 接口調用結束的回調函數
 小程序的場景應用：Flex佈局 界面的交互反饋 微信登陸 本地數據緩存 設備能力

微信登陸: wx.login生成一個帶有時效性的憑證,發送code到服務器,到微信服務器獲取微信用戶身份id,綁定微信用戶身份和業務用戶身份,業務登陸憑證返回SessionId

分包加載
在小程序分包大小有限制,整個小程序全部的分包不超過8M,單個分包/主包不能超過2M.項目有一個主包,放置默認啓動頁面/TabBar頁面,以及一些基礎配置.
前端Hybrid解決方案,渲染線程與腳本線程(邏輯層)是分開,環境包括IOS和Android的微信客戶端,以及開發者工具.
缺點:不能訂閱,不能轉發朋友圈,不能主動推送消息.檢索具備侷限性,不能模糊搜索.

邏輯層(App Service)

--小程序框架的邏輯層,採用JavaScript引擎爲開發者提供JavaScriptd代碼的運行環境以及微信小程序的特有功能(如:增長APPh和Page方法),邏輯層將數據處理後發送給視圖層且接受視圖層的反饋.
    --API
    --模塊化
    --路由
    --註冊頁面
    --場景值 註冊程序

視圖層: 因爲WXML和WXSS和WXS和組件展現,由組件來進行展現,主要做用是將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層.
事件:touchstart touchmove touchcancel touchend tap longpress longtap
宿主環境:小程序的運行環境分紅渲染層(WXML和WXSS)和邏輯層(JavaScript)分別由兩個線程管理,渲染層的界面使用WebView繼續渲染,邏輯層使用JSCore線程運行腳本.小程序會有多個頁面,也就有多個WebVIew線程.全部線程的通訊經由微信客戶端作中轉.
全部頁面的腳本邏輯都跑同一個JsCore線程,頁面使用setTimeout或者setInterval的定時器,跳轉其餘頁面時,這些定時器並無被消除.

分享小程序

相關頁面的js,添加onShareAppMessage

onShareAppMessage() {
  return {
    title: 'titlename',
    path: '/pages/index'
       }
   }

WebPy
初始化項目:

$npm install wepy-cli -g
$npm install -g wepy-cli
$wepy init standard my-project

切換到目錄,安裝依賴,開啓實時編譯

$cd myproject
$npm  install
$wepy build --watch

WebPY項目的目錄結構:

├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── components         WePY組件目錄（組件不屬於完整頁面，僅供完整頁面或其餘組件引用）
|   |   ├── com_a.wpy      可複用的WePY組件a
|   |   └── com_b.wpy      可複用的WePY組件b
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和 index.wxss文件）       
|   |   └── other.wpy      other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）            
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）     
└── package.json           項目的package配置

分包加載

分包加載的小程序,進行按需加載,必含一個主包(放置默認啓動頁面/TabBar頁面,以及一些全部分包都須要使用的公共資源/Js腳本),分包則是根據開發者的配置進行劃分.分包有如下限制:整個小程序全部分包不超過8M,單個分包/主包大小不能超過2M.

視圖層

框架的視圖是由WXML和WXSS編寫,由組件來進行編寫,將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層