一起來做個免登錄資源導航小程序（導航小程序源碼）
今天，一起來開發(fā)個資源導航微信小程序吧，要實現的功能很簡單，就是所有用戶都可以查看和推薦資源。
主要目的是通過實戰(zhàn)，幫助大家快速了解下 小程序開發(fā)流程 和 云開發(fā)技術，學習更高效的小程序開發(fā)方式。
技術選型
首先選擇小程序開發(fā)技術。開發(fā)小程序的過程和開發(fā)網站類似，都是要寫前端（界面交互）和后端（請求處理邏輯）代碼。
前端
前端方面我選擇用 Taro 框架 Taro UI 開發(fā)。Taro 是一個基于 React 的跨端開發(fā)框架，支持寫一套代碼，自動生成微信小程序、H5、APP 等應用，再加上框架為很多復雜的功能提供了函數封裝，可以大大提升開發(fā)效率。而 Taro UI 是基于 Taro 的 UI 庫，提供了很多現成的組件，比如圖片上傳、選擇器等，可以滿足常見的開發(fā)需求。
后端
后端就簡單了，傳統(tǒng)的方式是使用編程語言提供的后端開發(fā)框架，比如 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等，但往往需要自己搭建服務器、數據庫、日志、監(jiān)控、運維等等，對于只會前端或者想要快速開發(fā)小程序的同學來講，簡直就是噩夢！
因此我選擇更高效便捷的方式，騰訊小程序云開發(fā)！
什么是云開發(fā)
小程序云開發(fā)是微信團隊聯合騰訊云推出的專業(yè)的小程序開發(fā)服務，幫助大家快速開發(fā)小程序、小游戲、公眾號網頁等，并且原生打通微信開放能力。
云開發(fā)的優(yōu)勢有哪些呢？
- 開發(fā)者無需搭建后端服務器，只需使用平臺提供的各項能力（比如云數據庫、云存儲、音視頻、AI 等），即可快速開發(fā)業(yè)務。
- 安全易接入：無需管理證書、簽名、密鑰，直接調用微信 API 。復用微信私有協(xié)議及鏈路，保證業(yè)務安全性。
- 多端復用：支持環(huán)境共享，一個后端環(huán)境可開發(fā)多個小程序、公眾號、網頁等，便捷復用業(yè)務代碼與數據。
- 不限開發(fā)語言和框架：開發(fā)者可以使用任意語言和框架進行代碼開發(fā)，構建為容器后，快速將其托管至云開發(fā)。
- 按量計費，成本更低，支持自動擴縮容
- 擴展能力：支持一鍵部署靜態(tài)網站，并能用云 CMS 管理數據內容
其中，最吸引我的就是云開發(fā)的高效便捷，不用自己搞服務器、搭數據庫，也不用處理和微信對接的復雜邏輯，只需要專注于實現功能本身即可，而且可以直接用云開發(fā) SDK 提供的各種函數，開發(fā)效率拉滿！
比如查詢數據，幾行代碼搞定！
應用開發(fā)
下面來開發(fā)小程序，包含初始項目搭建、前端頁面開發(fā)、接入云開發(fā)等步驟。
項目搭建
首先我們參照 Taro 框架官方文檔的快速開始部分，安裝 Taro 命令行工具，并初始化一個小程序應用。
初始化 Taro 應用
注意初始化時會讓你選擇模板，此處選擇云開發(fā)即可，Taro 會自動生成包含云開發(fā)的示例代碼，目錄結構如下：
前端開發(fā)
我們總共要創(chuàng)建兩個頁面，資源列表頁和推薦資源頁，需要用到的組件有列表、表單、輸入框、按鈕、圖像上傳等。
Taro UI 支持以上所有組件，按照 Taro UI 的官方文檔接入，復制組件代碼到頁面中修改即可，很快就能開發(fā)出這兩個頁面。
資源列表頁的示例代碼如下：
<View className='list'> <!-- 列表組件 --> <AtList> {resourcesView} </AtList> <!-- 固釘組件，點擊跳轉至推薦頁 --> <AtFab className="fab-btn" onClick={() => navTo(xx)}> <AtIcon value='add'/> </AtFab></View>
可以打開微信開發(fā)者工具查看頁面效果：
資源添加頁
頁面開發(fā)完成后，我們來搭建后端服務，使得用戶可以通過界面插入和讀取數據。
接入云開發(fā)
區(qū)別于自己搭建后端服務，使用云開發(fā)會更簡潔快速，直接在微信開發(fā)者工具中點擊云開發(fā)，開通環(huán)境即可，每位用戶都可以享有一定數量的免費環(huán)境！
開通云開發(fā)
在云開發(fā)界面中，可以對云數據庫、云存儲、云函數等資源進行監(jiān)控和管理。
我們可以在云數據庫中創(chuàng)建一張 資源表，用于讀寫資源數據。云開發(fā)控制臺支持可視化的數據庫管理，比如記錄、索引、數據權限等，非常方便！
云數據庫管理
每個環(huán)境都有唯一的 id，用于區(qū)分，可以在前端引入云開發(fā) SDK，并傳入環(huán)境 id 來初始化。
前端用 Taro 的話，可以用它封裝好的 init 方法：
Taro.cloud.init({ // 環(huán)境 id env: 'xx', })
然后，就可以在前端 直接調用 云開發(fā)提供的操作數據庫的接口，比如插入數據、查詢數據，不用自己開發(fā)后臺了！
比如插入數據：
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;
可以在云開發(fā)控制臺管理云存儲中的文件、配置權限、緩存等：
云存儲管理
如果云開發(fā)默認提供的接口不能滿足需求，那可以自己寫后臺接口，作為一個云函數部署到騰訊云上。然后在前端請求即可，和自己開發(fā)后端類似。
比如部署一個登錄函數，可以獲取用戶在小程序中的唯一 id，在控制臺中還能看到函數的調用日志、管理權限等。
云函數管理
實現無登陸調用
按照上面的流程開發(fā)完后，在微信開發(fā)者工具中，能夠順利地推薦和展示資源。但是如果將這個小程序上線并分享給其他用戶，就會出現權限問題，所有功能都會失效！
某同學遇到的問題
這是因為云開發(fā)為了保證資源的安全性、靈活控制資源調用權限，制定了安全規(guī)則，默認不允許未登錄用戶訪問。
安全規(guī)則
假如我們把小程序分享到朋友圈，必須要朋友們登錄才能查看資源列表，那這用戶體驗就太差了，所以下面我們要實現無登錄調用。
小程序云開發(fā)考慮到了種種場景，因此提供了 未登錄模式。
在未登錄模式中，不存在用戶的登錄態(tài)，應用場景有：
- 單頁模式：小程序/小游戲分享到朋友圈被打開時
- Web 未登錄模式：沒有登錄的 Web 環(huán)境中（見Web 端支持）
該模式默認關閉，需要在 “云控制臺 – 設置 – 權限設置” 中手動為云環(huán)境開啟允許未登錄訪問。
進入權限設置
允許未登錄訪問
一旦開啟了未登錄模式，客戶端（前端）的權限控制 必須使用安全規(guī)則，即云函數、數據庫和文件存儲的訪問都必須通過安全規(guī)則。
因此，除了在控制臺開啟允許未登錄訪問云環(huán)境外，還必須在云數據庫、云存儲和云函數的權限設置中分別選擇安全規(guī)則并配置。
安全規(guī)則有一套自己的語法，以云數據庫為例，選擇自定義安全規(guī)則，查看原本的規(guī)則：
原安全規(guī)則
在上述規(guī)則中，read、write 分別代表讀寫權限，doc 表示當前的一條數據，auth 表示當前登錄的用戶，表達式為 true 時允許訪問，即當前登錄的用戶必須是該條數據的創(chuàng)建者才能讀寫。
未登錄用戶訪問時，安全規(guī)則的 auth 字段為空，如果要允許所有用戶讀寫所有資源，可以直接將表達式值設置為 true：
修改安全規(guī)則
再修改下云存儲的安全規(guī)則，原規(guī)則如下：
上述規(guī)則中，resource 表示一個資源，將表達式改為 true，則允許所有用戶讀寫存儲的所有文件！
同理，也要修改云函數的安全規(guī)則，可以為不同云函數設置不同規(guī)則，比如 login 函數允許所有用戶訪問，而其他函數僅允許已登錄用戶訪問：
安全規(guī)則非常靈活，合理運用，可以在滿足資源調用需求的同時，增加資源的安全性，為應用安全保駕護航。
最后總結，通過本文，我們了解了小程序的開發(fā)過程，以及小程序云開發(fā)的用法、無登錄資源調用的方式。相對于代碼，思路更重要，也強烈建議大家試一試云開發(fā)，感受高效，輕松地做出自己的應用！
閱讀官方文檔，開啟云開發(fā)之旅
