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

今天，一起來開發(fā)個(gè)資源導(dǎo)航微信小程序吧，要實(shí)現(xiàn)的功能很簡單，就是所有用戶都可以查看和推薦資源。

主要目的是通過實(shí)戰(zhàn)，幫助大家快速了解下 小程序開發(fā)流程 和 云開發(fā)技術(shù)，學(xué)習(xí)更高效的小程序開發(fā)方式。

技術(shù)選型

首先選擇小程序開發(fā)技術(shù)。開發(fā)小程序的過程和開發(fā)網(wǎng)站類似，都是要寫前端（界面交互）和后端（請(qǐng)求處理邏輯）代碼。

前端

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

后端

后端就簡單了，傳統(tǒng)的方式是使用編程語言提供的后端開發(fā)框架，比如 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等，但往往需要自己搭建服務(wù)器、數(shù)據(jù)庫、日志、監(jiān)控、運(yùn)維等等，對(duì)于只會(huì)前端或者想要快速開發(fā)小程序的同學(xué)來講，簡直就是噩夢(mèng)！

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

什么是云開發(fā)

小程序云開發(fā)是微信團(tuán)隊(duì)聯(lián)合騰訊云推出的專業(yè)的小程序開發(fā)服務(wù)，幫助大家快速開發(fā)小程序、小游戲、公眾號(hào)網(wǎng)頁等，并且原生打通微信開放能力。

云開發(fā)的優(yōu)勢(shì)有哪些呢？

開發(fā)者無需搭建后端服務(wù)器，只需使用平臺(tái)提供的各項(xiàng)能力（比如云數(shù)據(jù)庫、云存儲(chǔ)、音視頻、AI 等），即可快速開發(fā)業(yè)務(wù)。

安全易接入：無需管理證書、簽名、秘鑰，直接調(diào)用微信 API 。復(fù)用微信私有協(xié)議及鏈路，保證業(yè)務(wù)安全性。

多端復(fù)用：支持環(huán)境共享，一個(gè)后端環(huán)境可開發(fā)多個(gè)小程序、公眾號(hào)、網(wǎng)頁等，便捷復(fù)用業(yè)務(wù)代碼與數(shù)據(jù)。

不限開發(fā)語言和框架：開發(fā)者可以使用任意語言和框架進(jìn)行代碼開發(fā)，構(gòu)建為容器后，快速將其托管至云開發(fā)。

按量計(jì)費(fèi)，成本更低，支持自動(dòng)擴(kuò)縮容

擴(kuò)展能力：支持一鍵部署靜態(tài)網(wǎng)站，并能用云 CMS 管理數(shù)據(jù)內(nèi)容

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

比如查詢數(shù)據(jù)，幾行代碼搞定！

應(yīng)用開發(fā)

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

項(xiàng)目搭建

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

注意初始化時(shí)會(huì)讓你選擇模板，此處選擇云開發(fā)即可，Taro 會(huì)自動(dòng)生成包含云開發(fā)的示例代碼，目錄結(jié)構(gòu)如下：

前端開發(fā)

我們總共要?jiǎng)?chuàng)建兩個(gè)頁面，資源列表頁和推薦資源頁，需要用到的組件有列表、表單、輸入框、按鈕、圖像上傳等。

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

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

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

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

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

接入云開發(fā)

區(qū)別于自己搭建后端服務(wù)，使用云開發(fā)會(huì)更簡潔快速，直接在微信開發(fā)者工具中點(diǎn)擊云開發(fā)，開通環(huán)境即可，每位用戶都可以享有一定數(shù)量的免費(fèi)環(huán)境！

在云開發(fā)界面中，可以對(duì)云數(shù)據(jù)庫、云存儲(chǔ)、云函數(shù)等資源進(jìn)行監(jiān)控和管理。

我們可以在云數(shù)據(jù)庫中創(chuàng)建一張 資源表，用于讀寫資源數(shù)據(jù)。云開發(fā)控制臺(tái)支持可視化的數(shù)據(jù)庫管理，比如記錄、索引、數(shù)據(jù)權(quán)限等，非常方便！

每個(gè)環(huán)境都有唯一的 id，用于區(qū)分，可以在前端引入云開發(fā) SDK，并傳入環(huán)境 id 來初始化。

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

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

然后，就可以在前端 直接調(diào)用 云開發(fā)提供的操作數(shù)據(jù)庫的接口，比如插入數(shù)據(jù)、查詢數(shù)據(jù)，不用自己開發(fā)后臺(tái)了！

比如插入數(shù)據(jù)：

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

在推薦資源時(shí)需要讓用戶上傳圖片，以前我們需要自己找地兒存放，現(xiàn)在可以在前端 直接調(diào)用云存儲(chǔ)，幾行代碼搞定：

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

可以在云開發(fā)控制臺(tái)管理云存儲(chǔ)中的文件、配置權(quán)限、緩存等：

如果云開發(fā)默認(rèn)提供的接口不能滿足需求，那可以自己寫后臺(tái)接口，作為一個(gè)云函數(shù)部署到騰訊云上。然后在前端請(qǐng)求即可，和自己開發(fā)后端類似。

比如部署一個(gè)登錄函數(shù)，可以獲取用戶在小程序中的唯一 id，在控制臺(tái)中還能看到函數(shù)的調(diào)用日志、管理權(quán)限等。

實(shí)現(xiàn)無登陸調(diào)用

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

這是因?yàn)樵崎_發(fā)為了保證資源的安全性、靈活控制資源調(diào)用權(quán)限，制定了安全規(guī)則，默認(rèn)不允許未登錄用戶訪問。

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

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

在未登錄模式中，不存在用戶的登錄態(tài)，應(yīng)用場景有：

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

Web 未登錄模式：沒有登錄的 Web 環(huán)境中（見Web 端支持）

該模式默認(rèn)關(guān)閉，需要在 “云控制臺(tái) - 設(shè)置 - 權(quán)限設(shè)置” 中手動(dòng)為云環(huán)境開啟允許未登錄訪問。

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

因此，除了在控制臺(tái)開啟允許未登錄訪問云環(huán)境外，還必須在云數(shù)據(jù)庫、云存儲(chǔ)和云函數(shù)的權(quán)限設(shè)置中分別選擇安全規(guī)則并配置。

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

在上述規(guī)則中，read、write 分別代表讀寫權(quán)限，doc 表示當(dāng)前的一條數(shù)據(jù)，auth 表示當(dāng)前登錄的用戶，表達(dá)式為 true 時(shí)允許訪問，即當(dāng)前登錄的用戶必須是該條數(shù)據(jù)的創(chuàng)建者才能讀寫。

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

再修改下云存儲(chǔ)的安全規(guī)則，原規(guī)則如下：

上述規(guī)則中，resource 表示一個(gè)資源，將表達(dá)式改為 true，則允許所有用戶讀寫存儲(chǔ)的所有文件！

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

安全規(guī)則非常靈活，合理運(yùn)用，可以在滿足資源調(diào)用需求的同時(shí)，增加資源的安全性，為應(yīng)用安全保駕護(hù)航。

---

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

閱讀官方文檔，開啟云開發(fā)之旅

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。