天天看點

借助雲開發實作免登入資源導航小程式

用雲開發實作一個資源導航小程式,要實作的功能很簡單:所有使用者都可以檢視和推薦資源,被推薦的資源的相關資訊會以清單的方式顯示。

借助雲開發實作免登入資源導航小程式

主要目的是通過實戰,幫助大家快速了解下 小程式開發流程 和 雲開發技術,學習更高效的小程式開發方式。

首先選擇小程式開發技術。開發小程式的過程和開發網站類似,都是要寫前端(界面互動)和後端(請求處理邏輯)代碼。

前端方面我選擇用 Taro 架構 + Taro UI 開發。Taro 是一個基于 React 的跨端開發架構,支援寫一套代碼,自動生成微信小程式、H5、APP 等應用,再加上架構為很多複雜的功能提供了函數封裝,可以大大提升開發效率。而 Taro UI 是基于 Taro 的 UI 庫,提供了很多現成的元件,比如圖檔上傳、選擇器等,可以滿足常見的開發需求。

借助雲開發實作免登入資源導航小程式

後端就簡單了,傳統的方式是使用程式設計語言提供的後端開發架構,比如 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等,但往往需要自己搭建伺服器、資料庫、日志、監控、運維等等,對于隻會前端或者想要快速開發小程式的同學來講,簡直就是噩夢!

是以我選擇更高效便捷的方式,騰訊小程式雲開發!

小程式雲開發是微信團隊聯合騰訊雲推出的專業的小程式開發服務,幫助大家快速開發小程式、小遊戲、公衆号網頁等,并且原生打通微信開放能力。

雲開發的優勢有哪些呢?

1.開發者無需搭建後端伺服器,隻需使用平台提供的各項能力(比如雲資料庫、雲存儲、音視訊、AI 等),即可快速開發業務。

2. 安全易接入:無需管理證書、簽名、秘鑰,直接調用微信 API 。複用微信私有協定及鍊路,保證業務安全性。

3. 多端複用:支援環境共享,一個後端環境可開發多個小程式、公衆号、網頁等,便捷複用業務代碼與資料。

4. 不限開發語言和架構:開發者可以使用任意語言和架構進行代碼開發,建構為容器後,快速将其托管至雲開發。

5. 按量計費,成本更低,支援自動擴縮容

6. 擴充能力:支援一鍵部署靜态網站,并能用雲 CMS 管理資料内容

其中,最吸引我的就是雲開發的高效便捷,不用自己搞伺服器、搭資料庫,也不用處理和微信對接的複雜邏輯,隻需要專注于實作功能本身即可,而且可以直接用雲開發 SDK 提供的各種函數,開發效率拉滿!

比如查詢資料,幾行代碼搞定!

借助雲開發實作免登入資源導航小程式

下面來開發小程式,包含初始項目搭建、前端頁面開發、接入雲開發等步驟。

首先我們參照 Taro 架構官方文檔的快速開始部分,安裝 Taro 指令行工具,并初始化一個小程式應用。

借助雲開發實作免登入資源導航小程式

注意初始化時會讓你選擇模闆,此處選擇雲開發即可,Taro 會自動生成包含雲開發的示例代碼,目錄結構如下:

借助雲開發實作免登入資源導航小程式

我們總共要建立兩個頁面,資源清單頁和推薦資源頁,需要用到的元件有清單、表單、輸入框、按鈕、圖像上傳等。

Taro UI 支援以上所有元件,按照 Taro UI 的官方文檔接入,複制元件代碼到頁面中修改即可,很快就能開發出這兩個頁面。

資源清單頁的示例代碼如下:

可以打開微信開發者工具檢視頁面效果:

借助雲開發實作免登入資源導航小程式

頁面開發完成後,我們來搭建後端服務,使得使用者可以通過界面插入和讀取資料。

差別于自己搭建後端服務,使用雲開發會更簡潔快速,直接在微信開發者工具中點選雲開發,開通環境即可,每位使用者都可以享有一定數量的免費環境!

借助雲開發實作免登入資源導航小程式

在雲開發界面中,可以對雲資料庫、雲存儲、雲函數等資源進行監控和管理。

我們可以在雲資料庫中建立一張 資源表,用于讀寫資源資料。雲開發控制台支援可視化的資料庫管理,比如記錄、索引、資料權限等,非常友善!

借助雲開發實作免登入資源導航小程式

每個環境都有唯一的 id,用于區分,可以在前端引入雲開發 SDK,并傳入環境 id 來初始化。

前端用 Taro 的話,可以用它封裝好的 <code>&lt;span&gt;init&lt;/span&gt;</code> 方法:

然後,就可以在前端 直接調用 雲開發提供的操作資料庫的接口,比如插入資料、查詢資料,不用自己開發背景了!

比如插入資料:

在推薦資源時需要讓使用者上傳圖檔,以前我們需要自己找地兒存放,現在可以在前端 直接調用雲存儲,幾行代碼搞定:

可以在雲開發控制台管理雲存儲中的檔案、配置權限、緩存等:

借助雲開發實作免登入資源導航小程式

如果雲開發預設提供的接口不能滿足需求,那可以自己寫背景接口,作為一個雲函數部署到騰訊雲上。然後在前端請求即可,和自己開發後端類似。

比如部署一個登入函數,可以擷取使用者在小程式中的唯一 id,在控制台中還能看到函數的調用日志、管理權限等。

借助雲開發實作免登入資源導航小程式

按照上面的流程開發完後,在微信開發者工具中,能夠順利地推薦和展示資源。但是如果将這個小程式上線并分享給其他使用者,就會出現權限問題,所有功能都會失效!

借助雲開發實作免登入資源導航小程式

這是因為雲開發為了保證資源的安全性、靈活控制資源調用權限,制定了安全規則,預設不允許未登入使用者通路。

借助雲開發實作免登入資源導航小程式

假如我們把小程式分享到朋友圈,必須要朋友們登入才能檢視資源清單,那這使用者體驗就太差了,是以下面我們要實作無登入調用。

小程式雲開發考慮到了種種場景,是以提供了 未登入模式。

在未登入模式中,不存在使用者的登入态,應用場景有:

1.單頁模式:小程式/小遊戲分享到朋友圈被打開時

2. Web 未登入模式:沒有登入的 Web 環境中

該模式預設關閉,需要在 “雲控制台 - 設定 - 權限設定” 中手動為雲環境開啟允許未登入通路。

借助雲開發實作免登入資源導航小程式
借助雲開發實作免登入資源導航小程式

一旦開啟了未登入模式,用戶端(前端)的權限控制 必須使用安全規則,即雲函數、資料庫和檔案存儲的通路都必須通過安全規則。

是以,除了在控制台開啟允許未登入通路雲環境外,還必須在雲資料庫、雲存儲和雲函數的權限設定中分别選擇安全規則并配置。

安全規則有一套自己的文法,以雲資料庫為例,選擇自定義安全規則,檢視原本的規則:

借助雲開發實作免登入資源導航小程式

在上述規則中,<code>&lt;span&gt;read&lt;/span&gt;</code>、<code>&lt;span&gt;write&lt;/span&gt;</code> 分别代表讀寫權限,<code>&lt;span&gt;doc&lt;/span&gt;</code> 表示目前的一條資料,<code>&lt;span&gt;auth&lt;/span&gt;</code> 表示目前登入的使用者,表達式為 <code>&lt;span&gt;true&lt;/span&gt;</code> 時允許通路,即目前登入的使用者必須是該條資料的建立者才能讀寫。

未登入使用者通路時,安全規則的 auth 字段為空,如果要允許所有使用者讀寫所有資源,可以直接将表達式值設定為 true:

借助雲開發實作免登入資源導航小程式

再修改下雲存儲的安全規則,原規則如下:

借助雲開發實作免登入資源導航小程式

上述規則中,<code>&lt;span&gt;resource&lt;/span&gt;</code> 表示一個資源,将表達式改為 true,則允許所有使用者讀寫存儲的所有檔案!

同理,也要修改雲函數的安全規則,可以為不同雲函數設定不同規則,比如 <code>&lt;span&gt;login&lt;/span&gt;</code> 函數允許所有使用者通路,而其他函數僅允許已登入使用者通路:

借助雲開發實作免登入資源導航小程式

安全規則非常靈活,合理運用,可以在滿足資源調用需求的同時,增加資源的安全性,為應用安全保駕護航。

最後總結,通過本文,我們了解了小程式的開發過程,以及小程式雲開發的用法、無登入資源調用的方式。相對于代碼,思路更重要,也強烈建議大家試一試雲開發,感受高效,輕松地做出自己的應用!

雲開發(Tencent CloudBase,TCB)是騰訊雲提供的雲原生一體化開發環境和工具平台,為開發者提供高可用、自動彈性擴縮的後端雲服務,包含計算、存儲、托管等serverless化能力,可用于雲端一體化開發多種端應用(小程式,公衆号,Web 應用,Flutter 用戶端等),幫助開發者統一建構和管理後端服務和雲資源,避免了應用開發過程中繁瑣的伺服器搭建及運維,開發者可以專注于業務邏輯的實作,開發門檻更低,效率更高。

開通雲開發:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite

産品文檔:https://cloud.tencent.com/product/tcb?from=12763

技術文檔:https://cloudbase.net?from=10004

技術交流加Q群:601134960

最新資訊關注微信公衆号【騰訊雲雲開發】