Omi×雲開發搞定小程序

想要開發小程序，但是......沒有後端！沒有運維！沒有 DBA！沒有域名！沒有證書！沒有錢！沒有時間！沒有精力！怎麼辦？？？

學習技術乾貨 提升自我能力

沒有關係，小程序?雲開發帶你飛，會 javascript 就可以！

開發者可以使用「雲開發」開發微信小程序、小遊戲，無需搭建伺服器，即可使用雲端能力。「雲開發」為開發者提供完整的雲端支持，弱化後端和運維概念，無需搭建伺服器，使用平台提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時，這一能力同開發者已經使用的雲服務相互兼容。

目前提供三大基礎能力支持：

雲函數：在雲端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼

雲資料庫：一個既可在小程序前端操作，也能在雲函數中讀寫的 JSON 資料庫

存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制台可視化管理

從0到1搭建markdown內容發布系統

本文將一步一步教你如何從0到1使用 「小程序?雲開發 Omip Comi 」搭建一個支持 markdown 及代碼高亮的「markdown 內容發布系統」。

預覽:

一、初始化

1.建表

操作路徑： 微信開發者工具雲開發資料庫添加集合

article 集合欄位說明:

很明顯，這個表用來存儲所有的文章。然後設置表的讀寫許可權：

因為後續將支持用戶發表文章，所有設置成第一個。

2.初始化項目目錄

這裡是使用 omip 作為腳手架，也支持 Omi mps-cloud 創建原生小程序的雲開發的腳手架:

$ npm i omi-cli -g

$ omi init-mps-cloud my-app

$cdmy-app/miniprogram

$ npm install

$ npm start

3.項目初始化 app.js

代碼參數里的可以從上面獲取到，一般創建兩個環境，一個是用戶測試環境，另一個用於生產環境。

pages/list/index 文章列表首頁

pages/detail/index 文章詳情頁

pages/import/index 文章導入頁(先簡單通過代碼導入 markdown，未提供 UI)

二、導入 markdown 數據

注意以下四點：

通過 調用雲函數進行登陸，且獲取 openid，接著導入數據會自動帶上提交該 openid。

通過 獲取服務端時間，客戶端時間不可靠

文章導入只由管理員負責

注意 ，這裡通過修改 omip 里的 scripts 邏輯實現。

這裡解釋下 import markdown 原理:

檢測到 md 後綴的文件，把文件里的 markdown 字元串對關鍵字進行轉義然後變成一個 js 模塊。

這也算是使用中間編譯的好處之一吧，如果原生的小程序目前沒辦法 import markdown 文件，當然原生小程序 API 和周邊生態在不斷進化，騰訊 Omi 團隊開發的 mps 框架 就是讓你在原生小程序中使用 jsx 和 less。

上面的詳細代碼可以點擊這裡查看到。

三、列表頁

請求 list 數據：

請求 list，通過 field 方法篩選欄位，畢竟 list 不需要 md 欄位，這樣可以減少數據傳輸，節約帶寬

通過 order 欄位對 list 進行排序（這樣管理員不需要發版本就可以手動調整 order 給 list 排序）

完整的代碼:

Omip 可以直接讓你使用 jsx 書寫 wxml 結構。編譯出的 wxml 如下:

這裡需要注意，點擊每一項跳轉詳情也一定要使用，而不能使用。這樣點擊到文字或者image上獲取不到 id。

四、文章詳情展示

這裡使用 Comi 進行 markdown 渲染！ Comi 讀 ["k??m?]，類似中文 科米，是騰訊 Omi 團隊開發的小程序代碼高亮和 markdown 渲染組件。Comi 是基於下面幾個優秀的社區組件進行二次開發而成。

wxParse

remarkable

html2json

htmlparser

prism

效果預覽：

除了在 omip 中使用，原生小程序也可以使用 Comi:

先拷貝 此目錄 到你的項目。

js:

wxml:

wxss:

大功告成！So easy！

雲函數與調試

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

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

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

在本文的小程序里有個 todo 的案例，裡面的 remove 使用了雲函數，用於清空所有已完成的任務。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！