[個人向]超快速瞭解微信小程序:看這篇就夠了!(註冊、語言、框架、配額等簡要說明)

[個人向]超快速瞭解微信小程序看這篇就夠了+相關簡要說明

本文精煉微信小程序開發文檔相關內容,旨在對初次接觸並準備開發小程序的童鞋(比如自己)提供一個快速瞭解攻略。其中包括註冊相關、語言、框架模式、相關配額等說明。在具體深入小程序文檔之前可以大概瀏覽瀏覽~

1 定位與介紹

微信小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。是一種無需安裝即可使用的手機“應用”。微信小程序的四個特點:1.無需安裝隨時可用、2.觸手可及、3.用完即走、4.無需卸載。

2 註冊相關

小程序註冊 è 登記主體信息 è 登記管理員信息。具體操作如下參考鏈接:

https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%B3%A8%E5%86%8C

3 開發相關

3.1開發工具

微信小程序開發工具

工具開發界面如下:

在這裏插入圖片描述
另外,vscode添加相關插件也能進行開發。

3.2開發文件與編譯語言

小程序中文件類型主要包括:

  • json 後綴的 JSON 配置文件 èJSON扮演的靜態配置的角色。
  • wxml 後綴的 WXML 模板文件 è描述當前這個頁面的結構,組件(標籤)要素,相當於HTML。
  • wxss 後綴的 WXSS 樣式文件 è描述頁面的樣子、尺寸佈局等,相當於CSS
  • js 後綴的 JS 腳本邏輯文件 è界面與用戶做交互:響應用戶的點擊、獲取用戶的位置等,以及與後臺、控制層進行交互。(和web開發的JS功能類似)。

補充一下小程序開發和傳統web開發的一些差異:

網頁開發渲染線程和腳本線程是互斥的,這也是爲什麼長時間的腳本運行可能會導致頁面失去響應。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API,進行 DOM 選中和操作。

而在小程序中,開發渲染線程和腳本線程是分開的,分別運行在不同的線程中。小程序邏輯層運行在 JSCore 中,並沒有一個完整瀏覽器對象,因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同,所以一些 NPM 的包在小程序中也是無法運行的。

3.3小程序宿主環境

微信客戶端給小程序所提供的環境爲宿主環境。小程序藉助宿主環境提供的能力,可以完成許多普通網頁無法完成的功能。詳情點這裏

3.3.1渲染層和邏輯層

小程序的運行環境分成渲染層邏輯層,其中 WXML 模板和 WXSS 樣式工作在渲染層,JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由個線程管理:渲染層的界面使用了進行渲染;邏輯層採用線程運行腳本。一個小程序存在多個界面,所以渲染層存在多個線程,這兩個線程的通信會經由微信客戶端(下文中也會採用來代指微信客戶端)做中轉,邏輯層發送網絡請求也經由轉發,小程序的通信模型下圖所示。

在這裏插入圖片描述

3.3.2組件

小程序提供了豐富的基礎組件給開發者,開發者可以像搭積木一樣,組合各種組件拼合成自己的小程序。就像 HTML 的 div, p 等標籤一樣,在小程序裏邊,你只需要在 WXML 寫上對應的組件標籤名字就可以把該組件顯示在界面上

3.3.3API

爲了讓開發者可以很方便的調起微信提供的能力,例如獲取用戶信息、地理位置、分享、下拉刷新、時間選擇器、微信支付等等,小程序提供了很多現成的API給開發者去使用。

3.4開發模式和流程

參考了開發文檔的一些例子,查閱了網上一些相關案例。發現有將小程序作爲一個前端,用php搭建服務器、甚至結合Java開發中SpringMVC搭建後臺框架的。

此次開發的小程序整體架構模式應該算是一種類MVC模式。view層由上文提到的wxml與wss構成,control層由js對module層數據進行封裝,拿到view層進行展示。Module層可以像傳統web開發一樣,通過後臺服務器,加之MySql等數據庫進行數據持久化。在這裏使用的是微信小程序自帶的雲開發(雲函數、雲存儲與雲數據庫,之後會針對雲開發詳細介紹)

更爲詳細一點來說,就是將各種表和記錄存放在雲數據庫、一些需要上傳下載的圖片存放在雲存儲。編寫雲函數對其進行操作,邏輯控制層函數調用雲函數並接收其結果。User通過頁面視圖層中的一些事件(刷新、點擊等)調用控制層相應函數進而傳輸數據,達到一個前後端的交互的過程。

下圖是一個小程序雲開發架構模型:(畫的有點問題:雲函數應該也是屬於雲端的)

在這裏插入圖片描述

4 雲開發

雲開發爲開發者提供完整的原生雲端支持和微信服務支持,弱化後端和運維概念,無需搭建服務器,使用平臺提供的 API 進行核心業務開發,即可實現快速上線和迭代,同時這一能力,同開發者已經使用的雲服務相互兼容,並不互斥。

雲開發提供了幾大基礎能力支持:

在這裏插入圖片描述

雲開發管理控制檯:

在這裏插入圖片描述

下面將分別對雲函數、雲數據庫、雲存儲進行介紹,其後將介紹雲開發的一些配額說明等。

4.1雲數據庫

雲數據庫是一個JSON格式的文檔型數據庫。

官方似乎只提供了一個數據庫,可建多張表(集合)。可手動添加或刪除記錄,也可以由JSON格式導入或導出。提供一個默認的不可刪除的PrimeryKey:_id,添加記錄時可自由修改,不改則默認爲一個長字符串。

每張表的每個記錄裏的格式不用完全相同。常用數據類型包括:String:字符串;Number:數字;Object:對象;Array:數組;Bool:布爾值;Date:時間。

crud操作與傳統的後臺開發思路類似,最大的不同在於返回類型爲JSON格式。查詢處理同樣也能夠進行聚合函數操作、連接查詢(剛開始沒搞明白,走了不少彎路)。另外也支持事務操作(這部分沒太明白)。

操作權限:在前端也能夠直接訪問雲數據庫,但只允許創建者進行寫操作。通過雲函數調用訪問則沒這一限制了。

在這裏插入圖片描述

讀寫權限:小程序前端單次讀取數據庫最多條,雲函數單次讀取數據庫最多條。

4.2 雲存儲

雲存儲提供高可用、高穩定、強安全的雲端存儲服務,支持任意數量和形式的非結構化數據存儲,如視頻和圖片,並在控制檯進行可視化管理。

以一個圖片爲例,調用api上傳到雲存儲空間後生成fileID和下載地址。fileID用於描述文圖片的位置,下載地址可調用函數進行下載。

在這裏插入圖片描述

4.3雲函數

雲函數即在雲端(服務器端)運行的函數。在物理設計上,一個雲函數可由多個文件組成,佔用一定量的 CPU 內存等計算資源;各雲函數完全獨立;可分別部署在不同的地區。開發者無需購買、搭建服務器,只需編寫函數代碼並部署到雲端即可在小程序端調用,同時雲函數之間也可互相調用。

一個雲函數的寫法與一個在本地定義的 JavaScript 方法無異,代碼運行在雲端 Node.js 中。當雲函數被小程序端調用時,定義的代碼會被放在 Node.js 運行環境中執行。我們可以如在 Node.js 環境中使用 JavaScript 一樣在雲函數中進行網絡請求等操作,而且我們還可以通過雲函數後端 SDK 搭配使用多種服務,比如使用雲函數 SDK 中提供的數據庫和存儲 API 進行數據庫和存儲的操作,這部分可參考數據庫和存儲後端 API 文檔。

雲開發的雲函數的獨特優勢在於與微信登錄鑑權的無縫整合。當小程序端調用雲函數時,雲函數的傳入參數中會被注入小程序端用戶的 openid,開發者無需校驗 openid 的正確性因爲微信已經完成了這部分鑑權,開發者可以直接使用該 openid。

4.4相關配額

雲開發控制檯上就有:
在這裏插入圖片描述

資源生命週期具體沒查到,不過並非到期後存儲內容消失,應該是重新分配空間。

由於我並沒有花錢,上述是免費版的配額:數據庫2G,數據庫請求數5萬次/日,存儲容量5G。

(ps:CDN的全稱Content Delivery Network,即內容分發網絡。本原理是廣泛採用各種緩存服務器,將這些緩存服務器分佈到用戶訪問相對集中的地區或網絡中,在用戶訪問網站時,利用全局負載技術將用戶的訪問指向距離最近的工作正常的緩存服務器上,由緩存服務器直接響應用戶請求。)

另外,官方也推出了許多付費版的以滿足更大需求:

其中包括均衡型、數據庫資源消耗型、雲函數資源消耗型等以滿足不同種類的需求。

在這裏插入圖片描述

在這裏插入圖片描述

配額詳情

5 個人開發感受

雲開發模式的小程序開發效率確實挺高。從完全沒接觸過到完成投票app大概花了不到一個月,除前端頁面部分排版樣式是參考開源程序外,大部分邏輯函數、對數據庫操作的雲函數的編寫、數據表設計,均參照官方開發文檔及api完成,一邊學一邊寫,遇到問題現查先用。優點是上手速度快、開發簡潔、調試方便;缺點是容易卡殼,後面實在寫不動了纔會想着研究手冊,導致很多前面寫的代碼(特別是操作數據庫)非常之low和不規範,查詢效率應該也是大打折扣。

不過雲開發也有缺點,個人感受在於1、數據庫不夠規範(主外鍵約束之類的可能需要自己搞定)2、對文檔型數據庫的一些較爲複雜的操作感覺比關係型sql語句複雜(可能是自己因爲不太熟悉)。

最後附上:

數據庫不夠規範(主外鍵約束之類的可能需要自己搞定)2、對文檔型數據庫的一些較爲複雜的操作感覺比關係型sql語句複雜(可能是自己因爲不太熟悉)。

最後附上:

小程序開發文檔

小程序個人中心

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章