一. 雲開發的認識

1. 什麼是雲開發

開發者可以使用雲開發開發微信小程序、小遊戲，無需搭建服務器，即可使用雲端能力。

雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。

雲開發提供了幾大基礎能力支持：

2雲開發和傳統模式的區別

總之，雲開發可以讓我們把更多關注度放到業務中來,對於小應用實在是太合適了。但是如果是開發大型的項目的話,現在傳統開發的優勢還是無法替代的！

3三大基本功能的支持認識

4開通雲開發

準備工作：

先新建一個文件夾：

再在project.config.json設置雲函數：
"cloudfunctionRoot": "functions/",

再右鍵，上傳雲函數

上傳的時候需要安裝wx-server-sdk

打開cmd控制檯，進入到雲函數的文件夾，然後執行：

npm install --save wx-server-sdk@latest

再在app.js中初始化雲函數

wx.cloud.init({

env:'debug-5c669b',

traceUser: true,

})

二.雲數據庫

2.1雲數據庫認識

開發提供了一個JSON數據庫,有2GB免費存儲空間

要查詢複雜的關係的話(關係型數據庫更好)，頻繁的操作的話(文檔型數據庫更合適)

2.2類型支持

String:字符串

Number:數字

Object:對象

Array:數組

Bool:布爾值

GeoPoint:地理位置點(比較特殊，需要經緯度)

Date:時間(使用的是客戶端的時間)

Null:空值

2.3 控制雲數據庫權限

2.3.1 控制雲數據庫的方式

小程序控制(讀寫數據庫受權限控制的限制) 雲函數控制(擁有所有讀寫數據庫的權限) 控制檯控制(擁有所有讀寫數據庫的權限)

2.3.2 雲數據庫管理管理

僅創建者可寫，所有人可讀僅創建者可讀寫

僅管理端可寫

權管理端可讀寫

2.3.3雲開發初始數據的代碼

初始化:

const db = wx.cloud.database();

切換環境:

const myDB = wx.cloud.database({env:'text'});

三.雲數據庫測試

3.1測試準備工作

3.1.1運行時進入相應頁面

運行時直接進入我的測試頁面(即我的雲開發頁面)

3.1.2在雲數據庫中創建一個集合

3.2添加功能

3.2.1準備一個添加按鈕

<button bindtap="insertEmp" type="primary">添加員工</button>

3.2.2初始數據庫與操作

//初始化咱們的數據庫（後面就可以使用db這個常量來代表咱們的雲數據庫） const db = wx.cloud.database();
 
Page({
 
    /**
    * 頁面的初始數據
    */ data: {
 
    },
        //添加一條數據
        insertEmp(){
            //數據庫中拿到employee集合並且進行數據添加
            db.collection("employee").add({
                data:{
                    name:"殺死給", 
                    age:23
            }
        })
    },
    ...
}

3.2.3點擊按鈕查看結果

3.2.4監聽添加的結果

使用回調的方式拿到成功與失敗的結果

//添加一條數據
insertEmp(){
//數據庫中拿到employee集合並且進行數據添加
db.collection("employee").add({
data:{
name:"殺死給",
age:23
},
//操作成功後的回調方法
//成功返回添加的結果
success(res){
console.log(res);
},
//操作失敗後的回調方法
// 失敗返回錯誤的編碼
fail(errorcode){ console.error(errorcode);
}
})
},

用Promise風格拿到成功失敗的結果

insertEmp() {
    //數據庫中拿到employee集合並且進行數據添加
    db.collection("employee").add({
        data: {
            name: "殺死給", age: 23
        }
    }).then(res =>{
        //成功後執行
        console.log(res);
    }).catch(err=>{
        //失敗後執行
        console.error(err);
    })
}

3.3修改功能

3.3.1準備按鈕

<button bindtap="updateEmp" type="primary">修改員工</button>

3.3.2實現方法

//修改員工
updateEmp(){
    //doc 中 寫 的 是 需 要 修 改 的 數 據 的 id
         db.collection("employee").doc("3b07eb945d058a250228ef8315115a0d").update({
        data:{
            name:"阿里多", age:26
        }
        }).then(res=>{ console.log(res);
        })
        .catch(err=>{ console.error(err);
    })
},

3.4查詢功能

3.4.1準備按鈕

<button bindtap="findEmp" type="primary">查詢員工</button>

3.4.2查詢數據

查詢成功後，數據記錄保留在res.data中，記得是以數組的形式保留

findEmp(){
//where裏面添加的查詢條件
db.collection("employee").where({_id:"3b07eb945d0585a50226de3b4c3a7430"
}).get().then(res=>{
    console.log(res.data[0].age);
}).catch(err=>{
    console.error(err);
})
}

1. 1. 查詢需知

查詢的時候只能查詢到有openid的數據，如果是自己添加的數據查詢需要修改相應的權限

3.5刪除員工

刪除所有的話需要使用雲函數

3.5.1刪除按鈕

<button bindtap="deleteEmp" type="primary">刪除員工</button>

3.5.2刪除代碼

//刪除員工deleteEmp(){
db.collection("employee").doc("3b07eb945d0585a50226de3b4c3a7430")
.remove()
.then(res=>{console.log(res)})
.catch(err=>{console.error(err)})
}

四.雲函數

4.1雲函數的認識

4.1.1什麼是雲函數

雲函數即在雲端（服務器端）運行的函數。在物理設計上，一個雲函數可由多個文件組成，佔用一定量的 CPU 內存等計算資源；各雲函數完全獨立；可分別部署在不同的地區。開發者無需購買、搭建服務器，只需編寫函數代碼並部署到雲端即可在小程序端調用，同時雲函數之間也可互相調用。

4.4.2安裝node.js

雲函數需要node的支持(需要安裝node.js)

下載node安裝包(至少是node v8.0以上的版本
安裝後在控制檯/終端輸入node-v 與 npm -v有效果代表安裝成功

4.1.13雲函數的位置

本地的位置

雲端的位置

4.1.3 創建雲函數

創建雲函數

自動上傳雲函數

雲開發位置查看雲函數

雲函數結構

package.json：一些模塊與配置信息

index.js 雲函數的入口文件

其它注意點

早期:wx-server-sdk錯誤，點擊安裝即可

調用時提示未安裝

雲函數右鍵，終端中打開輸入

npm install ‐‐save wx‐server‐sdk@latest

4.2雲函數的使用

4.2.1完成index.js中的函數

 
// 雲函數入口文件
//這裏拿到雲端信息，我們現在暫時用不到，可以把它進行註釋或者刪除
// const cloud = require('wx‐server‐sdk')
// cloud.init()
 
// 雲函數入口函數
/**
* event:小程序端調用這個方法傳過來的相應的參數
* context:上下文環境，也包括當前登錄用戶的一些信息
*/
exports.main = async (event, context) => {
    //返回一個對象，對象中包括咱們求和的函數
    return {
        sum:event.num1 + event.num2
    }
}

4.2.2上傳雲函數

每次修改完成後，都需要進行上傳部署右鍵雲函數，選擇上傳並部署

上傳並部署:雲端安裝依賴(不上傳node modules) -> 雲端安裝環境

上傳並部署:所有文件 -> 把環境傳上去可以在雲控制檯中進行雲函數的功能測試

4.2.3調用雲函數

準備按鈕

<view>雲函數</view>
<button bindtap="sum" type="primary">調用雲函數</button>

準備函數

sum(){
    wx.cloud.callFunction({ 
        name:"sum",
        data:{
            num1:4, num2:8
        }
    })
    .then(res => {console.log(res)})
    .catch(err=>{console.error(err)})
}

調用結果查看

查看函數調用狀態

4.3獲取openid

取openid對以後的登錄功能是非常有用的

我們不需要像傳統方式那樣再通過code去後臺拿對應的id

4.3.1小程序已有login函數

咱們依然需要先把login函數上傳

4.3.2準備代碼

按鈕準備

<button bindtap="getOpenId" type="primary">獲取openId</button>

功能代碼完成

getOpenId(){ wx.cloud.callFunction({
    name: "login"
    }).then(res => { console.log(res) })
    .catch(err => { console.error(err) })
}

結果查看

4.4雲函數操作數據庫

咱們可以通過雲函數批量刪除數據庫信息

4.4.1準備雲函數

不要忘了完成後上傳

// 雲函數入口文件
const cloud = require('wx‐server‐sdk') cloud.init()
 
// 雲函數入口函數
exports.main = async (event, context) => 
    { const wxContext = cloud.getWXContext(); const db = cloud.database();
    //此處把年紀大於20的都刪除掉
    // await只能在async函數中，代表完成後再返回
    try{
        return await db.collection("employee").where({ name:"阿里
    }).remove();
    }catch(e){
        console.error(e);
    }
}

4.4.2準備按鈕

<button bindtap="batchDelete" type="primary">批量刪除</button>

4.2.3調用方法

batchDelete(){ wx.cloud.callFunction({
    name:"deleteData"
    }).then(res => {
        console.log(res)
    })
    .catch(err => {
        console.error(err)
    })
}

4.4.4最終結果

五、雲存儲

咱們雲存儲主要是完成文件的上傳下載等操作

圖片可以從相冊中獲取，也可以直接拍照

5.1完成圖片的上傳

5.1.1準備按鈕

<button bindtap="uploadImg" type="primary">上傳圖片</button>

5.1.2準備選擇圖片的功能

在相應的頁面js中拿到圖片

文檔 -> api -> 媒體 -> 圖片(chooseImage)

uploadImg(){
    //選擇一張圖片
    wx.chooseImage({
    //可以選擇幾張圖片(最多9張，多張的話涉及到異步的問題)
    count: 1,
    //sizeType:確定是以源文件的形式還是壓縮文件形式上傳
    sizeType: ['original', 'compressed'],
    //sourceType：圖片來源,是本地圖庫還是從相機會獲取
    sourceType: ['album', 'camera'],
    success(res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        // 這個是成功後圖片的臨時路徑（後面上傳到雲存儲就需要用到） 
        const tempFilePaths =res.tempFilePaths
        console.log(tempFilePaths);
        }
    })
}

5.1.3準備上傳的功能

文檔 -> 雲開發 -> 存儲(uploadFile)

uploadImg(){
    //選擇一張圖片
    wx.chooseImage({
        //可以選擇幾張圖片(最多9張，多張的話涉及到異步的問題)
        count: 1,
        //sizeType:確定是以源文件的形式還是壓縮文件形式上傳
        sizeType: ['original', 'compressed'],
        //sourceType：圖片來源,是本地圖庫還是從相機會獲取
        sourceType: ['album', 'camera'],
        success(res) {
            // 這個是成功後圖片的臨時路徑（後面上傳到雲存儲就需要用到）
            const tempFilePaths =res.tempFilePaths
            console.log(tempFilePaths);
            //上傳到雲存儲的功能
            wx.cloud.uploadFile({
                //存放的雲存儲路徑(一樣的路徑會覆蓋)
                cloudPath: 'example.png',
                //特別注意:獲取的臨時路徑是個數組
                filePath: tempFilePaths[0], // 文件路徑
            }).then(res => {
                // 得到文件的id值(下一步我們把這個id存在數據庫，方便以後獲取) 
                console.log(res.fileID)
            }).catch(error => {
                console.error(error);
        }
    })
}

5.1.4查看雲控制檯

5.2保存文件id到雲數據庫中

5.2.1雲數據庫加一個集合

5.2.2把數據保存到雲集閤中

下面是整個上傳文件的完整代碼

uploadImg(){
//選擇一張圖片wx.chooseImage({
//可以選擇幾張圖片(最多9張，多張的話涉及到異步的問題) count: 1,
//sizeType:確定是以源文件的形式還是壓縮文件形式上傳sizeType: ['original', 'compressed'],
//sourceType：圖片來源,是本地圖庫還是從相機會獲取sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作爲img標籤的src屬性顯示圖片
// 這個是成功後圖片的臨時路徑（後面上傳到雲存儲就需要用到） const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);
//上傳到雲存儲的功能wx.cloud.uploadFile({
//存放的雲存儲路徑(使用時間綴，以免傳上去的文件產生覆蓋)) cloudPath: new Date().getTime()+'.png',
//特別注意:獲取的臨時路徑是個數組filePath: tempFilePaths[0], // 文件路徑
}).then(res => {
// 得到文件的id值
console.log(res.fileID)
//把文件的fileID保存到雲數據庫中db.collection("images").add({
data:{
fileID:res.fileID
}
}).then(res=>{ console.log(res);
}).catch(err=>{ console.error(err);
})
}).catch(error => { console.error(error);
})
}
})
}

5.3獲取圖片並展示

5.3.1獲取圖片路徑

//初始化咱們的數據庫（後面就可以使用db這個常量來代表咱們的雲數據庫） const db = wx.cloud.database();
Page({
 
/**
* 頁面的初始數據
*/ data: {
imagesPath:[]
},
...
//顯示相應的圖片showImg:function(){
//1.拿到當前登錄用戶的openid wx.cloud.callFunction({
//執行去函數login方法name:"login"
}).then(res=>{
//拿到對應的openid屬性
var openid = res.result.openid;
//2.根據openid拿到對應的圖片db.collection("images").where({
_openid: openid
}).get().then(res2=>{
//查看所有的結果console.log(res2);
//把結果交給全局的imagesPath數據this.setData({
imagesPath:res2.data
})
})
})
},
//...
})

5.3.1 準備顯示組件

<button bindtap='showImg' type='primary'>顯示圖片</button>
<!‐‐ block相當於咱們的div,但是它只模板，不會直接展示出來 ‐‐>
<block wx:for="{{imagesPath}}" wx:key="{{index}}">
<image src='{{item.fileID}}'></image>
</block>

5.4下載圖片

5.4.1下載圖片的按鈕

<button bindtap='showImg' type='primary'>顯示圖片</button>
<!‐‐ block相當於咱們的div,但是它只模板，不會直接展示出來 ‐‐>
<block wx:for="{{imagesPath}}" wx:key="{{index}}">
<image src='{{item.fileID}}'></image>
<button bindtap='downloadImg' data‐fileid="{{item.fileID}}">下載圖片</button>
</block>

5.4.2下載方法實現

雲開發 -> 小程序端API文檔 -> 存儲 -> downloadFile API -> 媒體 -> 圖片 - > saveImageToPhotosAlbum API -> 界面 -> 交互

//下載圖片的功能
downloadImg:function(event){
    //從雲存儲中拿到圖片
    var fileid = event.target.dataset.fileid;
    //下載功能
    wx.cloud.downloadFile({
        fileID: fileid
    }).then(res => {
        //這裏可以拿到臨時文件路徑
        wx.saveImageToPhotosAlbum({
            //準備圖片的路徑
            filePath: res.tempFilePath,
            success(res) {
                //成功後彈出相應的效果
                wx.showToast({
                    title: '成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    })
}

小程序雲開發

一. 雲開發的認識

三.雲數據庫測試

4.1.3 創建雲函數

985 碩士程序員，空窗 4 個月沒有 Offer！

營銷系統黑名單優化：位圖的應用解析

一文搞懂 Spring 循環依賴

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

python內置函數——sorted

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

抖音面試：說說延遲任務的調度算法？

桌面widget詳解（一）——基本demo構建

動態添加控件及將某XML動態加入到Activity顯示

動態添加綜合佈局---動態添加控件及將某XML動態加入到Activity顯示（續）

詳解Dialog(二)——有關列表的構建

桌面widget詳解（三）——桌面widget中的控件交互方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結