免費編程資源大全：https://github.com/liyupi/free-programming-resources

今天，一起來開發個資源導航微信小程序吧，要實現的功能很簡單，就是所有用戶都可以查看和推薦資源。

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

技術選型

首先選擇小程序開發技術。開發小程序的過程和開發網站類似，都是要寫前端（界面交互）和后端（請求處理邏輯）代碼。

前端

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

后端

后端就簡單了，傳統的方式是使用編程語言提供的后端開發框架，比如 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等，但往往需要自己搭建服務器、數據庫、日志、監控、運維等等，對于只會前端或者想要快速開發小程序的同學來講，簡直就是噩夢！

因此我選擇更高效便捷的方式，騰訊小程序云開發！

什么是云開發

小程序云開發是微信團隊聯合騰訊云推出的專業的小程序開發服務，幫助大家快速開發小程序、小游戲、公眾號網頁等，并且原生打通微信開放能力。

云開發的優勢有哪些呢？

開發者無需搭建后端服務器，只需使用平臺提供的各項能力（比如云數據庫、云存儲、音視頻、AI 等），即可快速開發業務。

安全易接入：無需管理證書、簽名、秘鑰，直接調用微信 API 。復用微信私有協議及鏈路，保證業務安全性。

多端復用：支持環境共享，一個后端環境可開發多個小程序、公眾號、網頁等，便捷復用業務代碼與數據。

不限開發語言和框架：開發者可以使用任意語言和框架進行代碼開發，構建為容器后，快速將其托管至云開發。

按量計費，成本更低，支持自動擴縮容

擴展能力：支持一鍵部署靜態網站，并能用云 CMS 管理數據內容

其中，最吸引我的就是云開發的高效便捷，不用自己搞服務器、搭數據庫，也不用處理和微信對接的復雜邏輯，只需要專注于實現功能本身即可，而且可以直接用云開發 SDK 提供的各種函數，開發效率拉滿！

比如查詢數據，幾行代碼搞定！

應用開發

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

項目搭建

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

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

前端開發

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

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

資源列表頁的示例代碼如下：

<View className='list'><!-- 列表組件 --><AtList>{resourcesView}</AtList><!-- 固釘組件，點擊跳轉至推薦頁 --><AtFab className="fab-btn"onClick={() => navTo(xx)}><AtIcon value='add'/></AtFab> </View>

可以打開微信開發者工具查看頁面效果：

頁面開發完成后，我們來搭建后端服務，使得用戶可以通過界面插入和讀取數據。

接入云開發

區別于自己搭建后端服務，使用云開發會更簡潔快速，直接在微信開發者工具中點擊云開發，開通環境即可，每位用戶都可以享有一定數量的免費環境！

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

我們可以在云數據庫中創建一張 資源表，用于讀寫資源數據。云開發控制臺支持可視化的數據庫管理，比如記錄、索引、數據權限等，非常方便！

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

前端用 Taro 的話，可以用它封裝好的 init 方法：

Taro.cloud.init({// 環境 idenv: 'xx', })

然后，就可以在前端 直接調用 云開發提供的操作數據庫的接口，比如插入數據、查詢數據，不用自己開發后臺了！

比如插入數據：

const db = Taro.cloud.database(); // 添加數據到 resource 表 db.collection('resource').add({data }).then(res => {// 成功return res; }).catch(err => {// 失敗console.error(err); });

在推薦資源時需要讓用戶上傳圖片，以前我們需要自己找地兒存放，現在可以在前端 直接調用云存儲，幾行代碼搞定：

// 上傳文件 const res = await Taro.cloud.uploadFile({cloudPath: '上傳到云存儲的位置',// 要上傳圖片的本地路徑filePath: pictureUrl, }) // 獲取圖片 id，可下載或直接展示 picture = res.fileID;

可以在云開發控制臺管理云存儲中的文件、配置權限、緩存等：

如果云開發默認提供的接口不能滿足需求，那可以自己寫后臺接口，作為一個云函數部署到騰訊云上。然后在前端請求即可，和自己開發后端類似。

比如部署一個登錄函數，可以獲取用戶在小程序中的唯一 id，在控制臺中還能看到函數的調用日志、管理權限等。

實現無登陸調用

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

這是因為云開發為了保證資源的安全性、靈活控制資源調用權限，制定了安全規則，默認不允許未登錄用戶訪問。

假如我們把小程序分享到朋友圈，必須要朋友們登錄才能查看資源列表，那這用戶體驗就太差了，所以下面我們要實現無登錄調用。

小程序云開發考慮到了種種場景，因此提供了 未登錄模式。

在未登錄模式中，不存在用戶的登錄態，應用場景有：

單頁模式：小程序/小游戲分享到朋友圈被打開時

Web 未登錄模式：沒有登錄的 Web 環境中（見Web 端支持）

該模式默認關閉，需要在 “云控制臺 - 設置 - 權限設置” 中手動為云環境開啟允許未登錄訪問。

一旦開啟了未登錄模式，客戶端（前端）的權限控制 必須使用安全規則，即云函數、數據庫和文件存儲的訪問都必須通過安全規則。

因此，除了在控制臺開啟允許未登錄訪問云環境外，還必須在云數據庫、云存儲和云函數的權限設置中分別選擇安全規則并配置。

安全規則有一套自己的語法，以云數據庫為例，選擇自定義安全規則，查看原本的規則：

在上述規則中，read、write 分別代表讀寫權限，doc 表示當前的一條數據，auth 表示當前登錄的用戶，表達式為 true 時允許訪問，即當前登錄的用戶必須是該條數據的創建者才能讀寫。

未登錄用戶訪問時，安全規則的 auth 字段為空，如果要允許所有用戶讀寫所有資源，可以直接將表達式值設置為 true：

再修改下云存儲的安全規則，原規則如下：

上述規則中，resource 表示一個資源，將表達式改為 true，則允許所有用戶讀寫存儲的所有文件！

同理，也要修改云函數的安全規則，可以為不同云函數設置不同規則，比如 login 函數允許所有用戶訪問，而其他函數僅允許已登錄用戶訪問：

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

---

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

閱讀官方文檔，開啟云開發之旅

總結

以上是生活随笔為你收集整理的一起来做个免登录资源导航小程序！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。