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