<noframes id="bhrfl"><address id="bhrfl"></address>

    <address id="bhrfl"></address>

    <noframes id="bhrfl"><address id="bhrfl"><th id="bhrfl"></th></address>

    <form id="bhrfl"><th id="bhrfl"><progress id="bhrfl"></progress></th></form>

    <em id="bhrfl"><span id="bhrfl"></span></em>

    全部
    常見問題
    產品動態
    精選推薦

    微信小程序云開發快速入門(1/4)

    管理 管理 編輯 刪除

    什么是云開發?

    云開發是可以幫助我們快速成為全棧的一種后端云服務,采用的是Serverless的架構。開發者無須搭建服務器,可直接使用其中的云數據庫、云存儲、云函數等云服務基礎功能。

    那么這個時候你可能會想,這和現在的傳統開發模式有什么區別呢?下面通過現實生活中蓋房子的過程來了解傳統開發模式與云開發模式的區別。

    如果傳統方式來蓋房子需要6步:
    1)將房子的地基打好,設計整理結構。(后端云服務基礎架構)
    2)打地梁,地梁也是決定房子是否穩固的關鍵。(搭建云數據庫)
    3)主體的砌筑,將房子的基本結構蓋好。(搭建云存儲)
    4)在步屋內填上土,砸夯,將地面砸實。(搭建云函數)
    5)在屋頂鋪上水泥,封實。(提供靜態托管和擴展能力)
    6)裝修成自己喜歡的風格。(編寫業務需求邏輯代碼)

    而云開發模式只有一步,即裝修成自己喜歡的風格。可以看到圖1-1展示的是傳統開發需要管理的基礎資源與云開發需要管理的基礎資源的對比,可以幫助我們更清晰的了解兩者之間的差距。

    f9cf0202307271118001472.png

    圖1-1 傳統開發需要管理的基礎資源VS云開發需要管理的基礎資源

    就這一步即可。云開發提供完整的后端云服務,提供數據庫、存儲、函數、靜態托管等基礎能力,以及擴展能力,無須管理基礎架構。相比較傳統的開發模式,云開發至少可節省50%的人力成本、交付效率提升70%。

    云開發模式調整

    在此之前我們需要把原來碼仔備忘錄項目改成云開發項目,所以需要先把項目從項目管理中先刪除。(如果是直接新建的云開發項目可以忽略這一步)

    首先,先進入小程序項目管理頁面:

    a1f7b202307271118224821.png

    然后點擊右上角「管理」按鈕進入該頁面的管理狀態。

    2c868202307271118349620.png

    然后選中你之前的單機版本勾選進行刪除即可。

    59f67202307271118457997.png

    接下來我們在導入項目界面對云開發進行勾選即可。

    b4e61202307271118555640.png

    這個時候進入我們會發現小程序開發工具自動給我們生成了一套云開發Demo,我們先直接處理掉。

    a14e8202307271119056346.png

    1dab2202307271140236819.png

    1e8c0202307271119137542.png

    意思就是找不到小程序云開Demo代碼的里面的一些模塊,這個不用理會直接先把Demo代碼全部刪除。

    02617202307271119224871.png

    刪除后我們就可以看到正常的頁面渲染了。

    cf411202307271119314729.png

    回到正常狀態下,我們接下來要改造的就是數據操作這塊的業務。

    數據緩存改造云開發

    在改造之前我們先要梳理思路。

    1. 首先我們先通過之前學習過抽象方法。
    2. 把所有和數據操作相關的方法都抽取到一個js類里面,這樣便于維護。
    3. 將所有的方法替換成云數據庫的操作函數。

    抽象數據操作API

    我們在根目錄下面新增 api 的文件夾,然后在其文件夾下面新增一個 memo.js 用于存放所有備忘錄的操作API。

    782e8202307271119468540.png

    梳理下有哪些方法:

    1. 獲取備忘錄列表
    2. 獲取備忘錄詳情
    3. 新增備忘錄信息
    4. 刪除備忘錄信息
    5. 修改備忘錄信息

    先給相關的方法取好函數名稱,然后進行導出聲明。
    memo.js 完整代碼

    3c53f202307271138124393.png

    首先我們來實現獲取備忘錄列表,在列表頁面 onShow 函數中會被調用。

    6c892202307271132413221.png

    在這個時候setData是頁面操作函數,所以我們要抽象的部分是:

    3953d202307271132507074.png

    接下來我們就把這段代碼放在memo.js里面去。

    memo.js 關于 getMemoList 的代碼片段

    fd710202307271133053889.png

    然后替換成列表頁面的調用,先引入memo的獲取 getMemoList 函數。
    list.js 頭部引入代碼片段

    ec80920230727113321184.png

    引入后在 onShow 函數中使用
    在 onShow 所有代碼片段

    701bd202307271133313579.png

    采取同樣的方式,我們可以把之前的獲取詳情、刪除、修改都抽象到 memo.js 中:
    memo.js 所有代碼

    77ddb202307271138491596.png

    在相應業務場景進行調用,調用之前都要先引入方法才行。由于引入代碼相對重復,下面就不貼引入代碼了,只貼使用代碼。

    刪除代碼方法調用:
    list.js 中 del 函數所有代碼

    27ce020230727113349464.png

    查看備忘錄詳情調用:
    edit.js 中 onLoad 函數所有代碼

    cd54b202307271133594772.png

    新增和刪除方法調用:
    edit.js 中 save 函數中的關于保存和修改的代碼片段

    5ba61202307271134119380.png

    到這里我們就完成了第一步,先抽取數據操作對象,然后我們要進行云數據庫到操作了。

    操作云數據庫

    初始化數據庫

    首先我們先進入云開發控制臺。

    a1dc0202307271120312319.png

    然后選中「數據庫」。

    云開發提供了一個 JSON 數據庫,顧名思義,數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫可以有多個集合(相當于關系型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。

    9de04202307271120419248.png

    我們會發現沒有可用的集合,再次新建一個集合 memo,用于存放備忘錄數據。

    dc1b9202307271120513123.png

    新增一條數據

    我們先手動新增一條測試數據看看,點擊「添加記錄」。

    18f39202307271121009958.png

    e3655202307271134265548.png

    我們用以上測試數據添加進去

    aa610202307271121127561.png

    除此之外我們可以看到可以添加多種不同類型的數據,云開發數據庫提供以下幾種數據類型:

    • String:字符串
    • Number:數字
    • Object:對象
    • Array:數組
    • Bool:布爾值
    • Date:時間
    • Geo:多種地理位置類型
    • Null

    我們先默認都用 string 類型的數據,新增完成之后就可以做memo集合中看到一條數據了。

    94c01202307271121258093.png

    數據表已經有數據了,那么我們怎么獲???

    獲取數據庫數據

    我們回到小程序編輯臺,對我們的獲取數據方法進行下改造。

    5c339202307271134379568.png

    這個是獲取本地的數據方法,下面是獲取數據庫方法

    bd699202307271134475113.png

    當我們去列表頁面進行調用的時候發現報錯:

    9a166202307271121414021.png

    原來是在此之前還需要進行云API的初始化。
    那么現在問題來了,我們后續會遇到大量的調用云API,那么都需要一開始初始化,并且這個初始化只需要一次,這個時候初始化我們應該在哪里進行調用呢?
    當一個函數應用一開始就需要調用的時候并且只需要調用一次,我們可以在app.js的 onLaunch 生命周期中調用。
    app.js 的 onLaunch 函數代碼片段

    ebc0820230727113456881.png

    接下來在看調用看看,在這里告訴大家一個調試技巧,使用調試器中的Network面板,然后選中Cloud標簽進行過濾,在這里我們就可以剛才調用API請求。

    62ef9202307271121577173.png

    先看看請求狀態,從狀態來看是成功的請求。

    a1eb0202307271122105973.png

    然后我們再來看看返回的數據:

    a9d72202307271122191189.png

    明明有一條數據,為什么獲取不到呢?
    因為云開發數據庫集合讀取權限問題。默認我們新建的集合讀取權限是僅創建則可以讀寫,第一條測試數據是我們手動錄入的,所以沒有創建者,默認權限于是就讀取不到。
    我們可以來到云開發控制面板,然后找到 數據庫=> 數據權限。

    84c91202307271122287273.png

    我們把權限從「僅創建者可讀寫」修改為「所有用戶可讀,僅創建者可讀寫」試試看。修改完成之后再次調用獲取方法,看到返回結果中出現了這條測試數據。

    e67bf202307271122374093.png

    雖然數據出來了,但是我們會發現還有一個錯誤日志。

    fef99202307271122464795.png

    具體代碼塊:

    00eb2202307271122559727.png

    原因:在沒有使用云API之前我們使用的緩存操作API是同步操作返回了具體數據,而修改后的獲取數據方法是異步函數,沒有給到數據到列表頁面進行使用。最終導致list數據對象為空,list的length自然就出現了undefined的錯誤提示。

    從數據庫獲取數據除了可以用以上的實現 success 方法,同樣還支持可以用 Promise 風格調用:
    可以簡單理解成將包裹的回調函數調用方式改成了鏈式調用的回調函數

    8f553202307271135102375.png

    基于 Promise 風格調用,我們可以將函數拆解成兩部分。接下來再改造一下,傳遞數據的部分代碼:

    1.將查詢代碼在 getMemoList 完成

    6fb93202307271135244593.png

    2.將查詢結果在列表頁面進行列表渲染

    cba9f202307271135359024.png

    這樣我們就成功的將數據庫的數據顯示出來了

    7473c202307271123157335.png

    接下來,我們就來把所有方法進行云API的實現。

    查看數據詳情

    在這里我們就不能用index下標來,通常與后端交互我們都會采用ID來進行查詢,每條數據都會生成一個ID字段,字段名稱為_id。

    19b7620230727112327362.png

    e0887202307271142282107.png

    a9194202307271131058492.png

    獲取id進行頁面傳遞

    92128202307271136021843.png

    查詢方法改造,由于通過id查詢是非常常用的方法,所以云API直接有個doc方法傳入id即可查詢:
    memo.js 中 getMemoInfo 函數代碼

    533eb202307271136111713.png

    查詢方法調用:
    edit.js 中 onLoad 函數代碼

    0cac4202307271136209062.png

    新增備忘錄數據

    新增方法改造:
    memo.js 中 addMemoInfo 函數

    0b2fb20230727113629407.png

    調用方法:
    edit.js 中 save 函數新增邏輯代碼片段

    7f1b8202307271136406222.png

    新增成功后會返回新增數據的id信息。

    3d072202307271123576487.png

    然后在數據庫當中就可以看到新增的數據了。
    d2ec6202307271124076802.png

    5c01c202307271142489687.png

    ba8a4202307271124196589.png

    然后在看下列表返回的數據,只有自己新增的那條數據了。

    e7e16202307271124282584.png

    修改備忘錄數據

    修改方法改造:
    memo.js 中 updateMemoInfo 函數。

    e4a6f202307271136505664.png

    之前修改的邏輯是采用的刪除之后再新增做的“假”修改,這次我們直接采用修改方法。
    edit.js 中 save 函數修改邏輯代碼片段

    fdd22202307271136585575.png

    返回結果中的 updated 是代表修改成功數據的數量

    ec921202307271124445665.png

    刪除備忘錄數據

    刪除方法改造:
    memo.js 中 deleteMemoInfo 函數

    dc1a6202307271137078113.png

    調用方法:
    list.js 中 del 函數

    761b4202307271137218586.png

    在這里要注意的是刪除之后還需要調用查詢所有數據方法對列表更新。

    50bf9202307271125036092.png

    返回值 removed 為刪除數量。

    總結

    在本小節我們使用云API在小程序端操作了云數據庫,學習了以下函數:

    • 使用 get() 進行了數據庫的查詢
    • 使用 add() 進行了數據添加
    • 使用 update() 進行了數據修改
    • 使用 remove() 進行了數據刪除

    在這里我們就已經完成了使用云數據庫來存儲備忘錄數據。

    請登錄后查看

    CRMEB-慕白寒窗雪 最后編輯于2023-08-04 17:02:21

    快捷回復
    回復
    回復
    回復({{post_count}}) {{!is_user ? '我的回復' :'全部回復'}}
    排序 默認正序 回復倒序 點贊倒序

    {{item.user_info.nickname ? item.user_info.nickname : item.user_name}} LV.{{ item.user_info.bbs_level }}

    作者 管理員 企業

    {{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest == 1? '取消推薦': '推薦'}}
    {{item.is_suggest == 1? '取消推薦': '推薦'}}
    沙發 板凳 地板 {{item.floor}}#
    {{item.user_info.title || '暫無簡介'}}
    附件

    {{itemf.name}}

    {{item.created_at}}  {{item.ip_address}}
    打賞
    已打賞¥{{item.reward_price}}
    {{item.like_count}}
    {{item.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復

    {{itemc.user_info.nickname}}

    {{itemc.user_name}}

    回復 {{itemc.comment_user_info.nickname}}

    附件

    {{itemf.name}}

    {{itemc.created_at}}
    打賞
    已打賞¥{{itemc.reward_price}}
    {{itemc.like_count}}
    {{itemc.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復
    查看更多
    打賞
    已打賞¥{{reward_price}}
    2238
    {{like_count}}
    {{collect_count}}
    添加回復 ({{post_count}})

    相關推薦

    快速安全登錄

    使用微信掃碼登錄
    {{item.label}} 加精
    {{item.label}} {{item.label}} 板塊推薦 常見問題 產品動態 精選推薦 首頁頭條 首頁動態 首頁推薦
    取 消 確 定
    回復
    回復
    問題:
    問題自動獲取的帖子內容,不準確時需要手動修改. [獲取答案]
    答案:
    提交
    bug 需求 取 消 確 定
    打賞金額
    當前余額:¥{{rewardUserInfo.reward_price}}
    {{item.price}}元
    請輸入 0.1-{{reward_max_price}} 范圍內的數值
    打賞成功
    ¥{{price}}
    完成 確認打賞

    微信登錄/注冊

    切換手機號登錄

    {{ bind_phone ? '綁定手機' : '手機登錄'}}

    {{codeText}}
    切換微信登錄/注冊
    暫不綁定
    亚洲欧美字幕
    CRMEB客服

    CRMEB咨詢熱線 咨詢熱線

    400-8888-794

    微信掃碼咨詢

    CRMEB開源商城下載 源碼下載 CRMEB幫助文檔 幫助文檔
    返回頂部 返回頂部
    CRMEB客服