藉助雲開發實現免登陸資源導航小程序

用雲開發實現一個資源導航小程序，要實現的功能很簡單：全部用戶均可以查看和推薦資源，被推薦的資源的相關信息會以清單的方式顯示。

主要目的是經過實戰，幫助你們快速瞭解下 小程序開發流程 和 雲開發技術，學習更高效的小程序開發方式。

技術選型

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

前端

前端方面我選擇用 Taro 框架 + Taro UI 開發。Taro 是一個基於 React 的跨端開發框架，支持寫一套代碼，自動生成微信小程序、H五、APP 等應用，再加上框架爲不少複雜的功能提供了函數封裝，能夠大大提高開發效率。而 Taro UI 是基於 Taro 的 UI 庫，提供了不少現成的組件，好比圖片上傳、選擇器等，能夠知足常見的開發需求。

後端

後端就簡單了，傳統的方式是使用編程語言提供的後端開發框架，好比 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等，但每每須要本身搭建服務器、數據庫、日誌、監控、運維等等，對於只會前端或者想要快速開發小程序的同窗來說，簡直就是噩夢！

所以我選擇更高效便捷的方式，騰訊小程序雲開發！

什麼是雲開發？

小程序雲開發是微信團隊聯合騰訊雲推出的專業的小程序開發服務，幫助你們快速開發小程序、小遊戲、公衆號網頁等，而且原生打通微信開放能力。

雲開發的優點有哪些呢？

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

1. 安全易接入：無需管理證書、簽名、祕鑰，直接調用微信 API 。複用微信私有協議及鏈路，保證業務安全性。
2. 多端複用：支持環境共享，一個後端環境可開發多個小程序、公衆號、網頁等，便捷複用業務代碼與數據。
3. 不限開發語言和框架：開發者可使用任意語言和框架進行代碼開發，構建爲容器後，快速將其託管至雲開發。
4. 按量計費，成本更低，支持自動擴縮容
5. 擴展能力：支持一鍵部署靜態網站，並能用雲 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 的話，能夠用它封裝好的 <span>init</span> 方法：

Taro.cloud.init({
  // 環境 id
  env: '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，在控制檯中還能看到函數的調用日誌、管理權限等。

實現無登錄調用

按照上面的流程開發完後，在微信開發者工具中，可以順利地推薦和展現資源。可是若是將這個小程序上線並分享給其餘用戶，就會出現權限問題，全部功能都會失效！

這是由於雲開發爲了保證資源的安全性、靈活控制資源調用權限，制定了安全規則，默認不容許未登陸用戶訪問。

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

小程序雲開發考慮到了種種場景，所以提供了 未登陸模式。

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

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

1. Web 未登陸模式：沒有登陸的 Web 環境中

該模式默認關閉，須要在 「雲控制檯 - 設置 - 權限設置」 中手動爲雲環境開啓容許未登陸訪問。

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

所以，除了在控制檯開啓容許未登陸訪問雲環境外，還必須在雲數據庫、雲存儲和雲函數的權限設置中分別選擇安全規則並配置。

安全規則有一套本身的語法，以雲數據庫爲例，選擇自定義安全規則，查看本來的規則：

在上述規則中，<span>read</span>、<span>write</span> 分別表明讀寫權限，<span>doc</span> 表示當前的一條數據，<span>auth</span> 表示當前登陸的用戶，表達式爲 <span>true</span> 時容許訪問，即當前登陸的用戶必須是該條數據的建立者才能讀寫。

未登陸用戶訪問時，安全規則的 auth 字段爲空，若是要容許全部用戶讀寫全部資源，能夠直接將表達式值設置爲 true：

再修改下雲存儲的安全規則，原規則以下：

上述規則中，<span>resource</span> 表示一個資源，將表達式改成 true，則容許全部用戶讀寫存儲的全部文件！

同理，也要修改雲函數的安全規則，能夠爲不一樣雲函數設置不一樣規則，好比 <span>login</span> 函數容許全部用戶訪問，而其餘函數僅容許已登陸用戶訪問：

安全規則很是靈活，合理運用，能夠在知足資源調用需求的同時，增長資源的安全性，爲應用安全保駕護航。

最後總結，經過本文，咱們瞭解了小程序的開發過程，以及小程序雲開發的用法、無登陸資源調用的方式。相對於代碼，思路更重要，也強烈建議你們試一試雲開發，感覺高效，輕鬆地作出本身的應用！

產品介紹

雲開發（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最新資訊關注微信公衆號【騰訊云云開發】