中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
最新最全的云開發(fā)入門教程,微信小程序云開發(fā),云函數(shù),云數(shù)據(jù)庫學(xué)習(xí),微信小程序云開發(fā)擴展功能學(xué)習(xí)

寫在前面

1,講解視頻

視頻課我會在B站免費提供給大家,歡迎關(guān)注,歡迎三連。
https://space.bilibili.com/419474640/video

2,配套筆記

配套筆記會在csdn上免費給到大家,歡迎關(guān)注,筆記會持續(xù)更新。
https://blog.csdn.net/qiushi_1990

3,支持石頭哥??

3-1,源碼和配套資源獲取

目前源碼和配套的一些資源暫時不免費,如果有需要的同學(xué)可以私聊石頭哥,拿米來換。

3-2,筆記電子書

筆記我也有整理一套電子書,大家也可以私聊石頭哥獲取電子書版的配套筆記。電子書筆記方便后期查詢知識點。

4,問題解答(●’?’●)

另外石頭哥提供配套解答服務(wù)。當(dāng)然了,知識付費時代石頭哥解答是要米的,畢竟石頭哥精力有限,石頭哥也是要吃面包的。石頭哥有推出包月,包年解答服務(wù)。你在學(xué)習(xí)過程中有任何問題,或者工作中遇到任何編程問題,都可以來找石頭哥
石頭哥目前可以解答如下問題

  • 小程序方面的問題
  • 云開發(fā)方面的問題
  • Java,springboot,Javaweb方面的問題
  • 畢設(shè)方面的問題
  • 安卓app開發(fā)方面的問題
  • html+css+JavaScript方面的問題
  • 前端開發(fā)的問題
  • 后端開發(fā)的問題
  • 面試找工作方面的問題

一,認(rèn)識小程序云開發(fā)

1-1,云開發(fā)簡介

  • 小程序·云開發(fā)是微信團隊聯(lián)合騰訊云推出的專業(yè)的小程序開發(fā)服務(wù)。

  • 開發(fā)者可以使用云開發(fā)快速開發(fā)小程序、小游戲、公眾號網(wǎng)頁等,并且原生打通微信開放能力。

  • 開發(fā)者無需搭建服務(wù)器,可免鑒權(quán)直接使用平臺提供的API進行業(yè)務(wù)開發(fā)
    小程序

  • 云開發(fā)又簡稱tcb,是微信官方給我們提供的基于騰訊云的云服務(wù)器。目前云開發(fā)包含:云數(shù)據(jù)庫,云函數(shù),云存儲,云調(diào)用。后面章節(jié)會具體給大家講解這幾個。

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

1-2,云開發(fā)和傳統(tǒng)服務(wù)器對比

云開發(fā)相對于傳統(tǒng)服務(wù)器的優(yōu)勢如下表

通過上面的對比,我們可以看出,如果你想快速創(chuàng)建一個小程序的后臺,用云開發(fā)是不錯的選擇。

二,微信開發(fā)者工具的安裝與使用

工欲善其事必先利其器,我們在開發(fā)小程序之前,首先需要安裝小程序開發(fā)者工具,今天就來教大家安裝小程序開發(fā)者工具。

2-1,其實很簡單,只需要進入小程序官網(wǎng),然后點擊工具,如下圖所示。



當(dāng)然了,也可以直接通過下面鏈接去下載
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2-2,下載安裝包如下


不管你是window還是mac電腦,只需要雙擊安裝包實現(xiàn)安裝即可。

等待安裝即可

安裝完成

2-3,進入開發(fā)者工具


第一次進入時,如下


點擊上圖的加號,我們來創(chuàng)建一個新項目

完成上圖的配置后,點擊新建。即可創(chuàng)建項目。創(chuàng)建好以后的項目如下圖所示。

這樣我們就完成了小程序開發(fā)者工具的安裝了,后面我們就可以開始小程序的代碼編寫了。

三,注冊小程序

我們前面雖然可以用測試號創(chuàng)建小程序,但是測試號有很多功能會受限,比如我們接下來要講的云開發(fā),必須是注冊小程序后才可以使用,所以今天我們就來講講小程序的注冊.

其實官方給的注冊步驟很詳細(xì)了


官方注冊文檔:https://developers.weixin.qq.com/miniprogram/introduction/

微信小程序注冊地址:https://mp.weixin.qq.com/
進去以后點擊立即注冊

進入注冊頁面時,跟著提示一步步來就可以了

注意點:

  • 如果只是學(xué)習(xí)的話,注冊個人小程序即可.
  • 如果想商用,想使用微信支付,取用戶手機號等復(fù)雜功能,可以注冊企業(yè)小程序,不過企業(yè)小程序必須有營業(yè)執(zhí)照才可以注冊
  • 一個郵箱只能注冊一個小程序
  • 一個身份證可以注冊5個,個人小程序
  • 一個企業(yè)的營業(yè)執(zhí)照可以注冊50個企業(yè)小程序

四,云開發(fā)環(huán)境的創(chuàng)建與初始化

今天我們就來正式的創(chuàng)建自己的第一個云開發(fā)項目,在創(chuàng)建云開發(fā)之前,有下面幾個注意事項

  • 1,必須注冊小程序后才可以開通云開發(fā)
  • 2,一個小程序可以創(chuàng)建兩個云開發(fā)環(huán)境

4-1,創(chuàng)建一個初始項目

我們要開通云開發(fā)服務(wù),必須先要進入小程序開發(fā)者工具才可以。


和創(chuàng)建普通小程序一樣,如上圖所示,需要注意的就是這里必須要填寫自己的appid,不可以用測試號. appid的獲取如下圖所示.

如果你不使用自己的appid創(chuàng)建項目,就會出現(xiàn)下面的問題,所以一定要先去注冊一個小程序,然后用自己的appid。

由于云開發(fā)官方更新的太快,有些同學(xué)可能會遇到下面這樣的問題


沒有 不使用云服務(wù) 選型。這個時候該怎么辦呢。石頭哥也已經(jīng)更新課程,給大家提供的解決方案。

4-2,沒有“不使用云服務(wù)”選型解決方案(選看)

如果你出現(xiàn)上面的問題,再看這節(jié),如果沒出現(xiàn)這樣的問題,直接跳過就行。


我在配套資料里為大家準(zhǔn)備了一個空白項目的模板。大家只需要把這個模板下載到桌面,并解壓。

然后點擊導(dǎo)入,把項目導(dǎo)入即可。

然后如下所示,記得appid換成你自己的。

4-3,開通云開發(fā)

  • 1,點擊下圖箭頭所示,如果你第一步創(chuàng)建項目時,沒有使用自己的appid,這里不會有下圖箭頭所示的云朵.
  • 2,給云開發(fā)環(huán)境取名

    等待創(chuàng)建

    創(chuàng)建成功
  • 3,獲取云開發(fā)環(huán)境id

4-4,初始化云開發(fā)環(huán)境(***重要)

在app.js里寫入環(huán)境id,注意這里要用你自己的云開發(fā)環(huán)境id

  • 初始化云開發(fā)環(huán)境前,先去云開發(fā)控制臺,拿到云開發(fā)環(huán)境id,如下圖


    這里的環(huán)境id建議直接復(fù)制,不要手寫,很容易寫錯。

  • 拿到環(huán)境id以后,就去app.js里做云開發(fā)環(huán)境初始化,如下

用時候云開發(fā)創(chuàng)建好以后,初始化可能需要一點時間,所以如果這里初始化有報錯,記得關(guān)閉開發(fā)者工具,等幾分鐘再重新打開即可.

五,云開發(fā)~云數(shù)據(jù)庫

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

5-1,在數(shù)據(jù)庫里新建集合(數(shù)據(jù)表)

我們這里以新建一個商品列表為例

5-2,數(shù)據(jù)庫權(quán)限管理

要想讓用戶查詢到我們創(chuàng)建的商品數(shù)據(jù),需要把權(quán)限改為所有用戶可讀

5-3,數(shù)據(jù)庫的增刪改查

5-3-1,查詢 get()

  • 傳統(tǒng)寫法
  • ES6簡潔寫法

    推薦第二種寫法

5-3-2,條件查詢 where()

5-3-3,查詢單條數(shù)據(jù)doc()

doc是用來查詢單條數(shù)據(jù)的。比如商品詳情頁。
doc里面用到的參數(shù)就是我們數(shù)據(jù)里的_id字段

5-3-4,添加數(shù)據(jù) add()

通過add可以實現(xiàn)數(shù)據(jù)的添加,

5-3-5,更新數(shù)據(jù)update()

修改數(shù)據(jù)庫里已存在的數(shù)據(jù),結(jié)合doc進行修改單條數(shù)據(jù)

5-3-6,刪除數(shù)據(jù)remove()

刪除數(shù)據(jù),結(jié)合doc刪除單條數(shù)據(jù)

5-4,增刪改查綜合案例

  • 1,能查看商品列表
  • 2,更動態(tài)添加商品
  • 3,能進入商品詳情頁
  • 4,能刪除某個商品
  • 5,能修改某個商品的價格

5-4-1 列表跳詳情 data-

  • 1,在wxml里定義data- 要綁定的數(shù)據(jù)
  • 2, 在js頁面里的點擊方法里拿到綁定的數(shù)據(jù)
  • 比如打印結(jié)果如下

5-4-2,列表跳詳情并攜帶商品id

  • 1,列表跳頁到詳情頁
  • 2,拿到列表跳頁時攜帶的id數(shù)據(jù)

5-4-3,查詢商品列表

5-4-4,添加商品并刷新商品列表

5-4-5,更新商品數(shù)據(jù)

用戶輸入新價格,調(diào)用update方法進行更新數(shù)據(jù)


我們更新成功的時候,會有如下所示的日志打印。

只有stats里的updated是1的時候,才代表成功的更新了一條數(shù)據(jù)。
如果這條商品不是你創(chuàng)建的,當(dāng)你對這條商品做更新操作時,打印的updated就是0。

這個時候代表沒有更新成功。這是因為操作時的權(quán)限問題,要解決這個問題,就要借助云函數(shù)了,這里我們先放在這里,在后面云函數(shù)章節(jié)會做具體講解。

5-4-6,彈窗提示確認(rèn)是否刪除

用戶刪除數(shù)據(jù)是一個危險操作,所以操作之前最好給用戶一個友好提示。
官方彈窗文檔:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

5-4-7,刪除商品

5-4-8,更新和刪除時的權(quán)限問題

如果這條商品不是你創(chuàng)建的,當(dāng)你對這條商品做刪除或者更新操作時,雖然也會返回成功,但是可以看到我們更新或者刪除的條數(shù)是0。


其實這個時候也意味著沒有更新或者刪除成功,這里是因為操作權(quán)限的問題,因為這條數(shù)據(jù)不是你創(chuàng)建的。所以你只能對這條數(shù)據(jù)做查詢操作,而不能做修改和刪除操作。要想解決這個問題,就要借助云函數(shù)了。后面云函數(shù)講解的部分,我會做具體講解的。

我們還是先接著學(xué)習(xí)數(shù)據(jù)庫操作的高級操作

5-6,常用快捷鍵

我們在開發(fā)時為了提高代碼編寫效率,通常會使用一些快捷鍵。我們小程序開發(fā)工具里常用的快捷鍵如下。
設(shè)置—》快捷鍵設(shè)置


然后點擊如下快捷鍵即可查看所有的快捷鍵

如果感覺默認(rèn)的快捷鍵不喜歡,可以自己重新設(shè)置快捷鍵。由于自帶的快捷比較多,我這里不一一列舉了,我把一些常用的快捷鍵拿出來給大家大致講一講,我這里以window電腦為例,如果你mac電腦,可以自己去看下開發(fā)者工具默認(rèn)的快捷鍵。多看幾遍把常用的記住就行了。

快捷鍵組合描述
Ctrl+a全選
Ctrl+c復(fù)制選中內(nèi)容
Ctrl+v粘貼復(fù)制的內(nèi)容
Ctrl+z撤銷當(dāng)前編輯
Ctrl+s保存并編譯項目
Ctrl+b重新編譯項目
Ctrl+x截切選中的內(nèi)容
Ctrl+/添加注釋
Ctrl+Shift+k刪除當(dāng)前行
Ctrl+Shift+f全局搜索
Ctrl+f當(dāng)前頁面內(nèi)搜索
Ctrl+Shift+h全局搜索并替換文本
Ctrl+h當(dāng)前頁面內(nèi)搜索并替換文本
Shift+Alt+F格式化代碼
Shift+Alt+?向上復(fù)制當(dāng)前行
Shift+Alt+?向下復(fù)制當(dāng)前行
Alt+?把當(dāng)前行向上移動一行
Alt+?把當(dāng)前行向下移動一行

有的電腦上快捷鍵可能會有細(xì)微差距,以開發(fā)者工具默認(rèn)自帶的快捷鍵為準(zhǔn)。

5-7,數(shù)據(jù)庫排序orderBy

orderBy方法在做排序的時候,接受兩個參數(shù)

  • 1,根據(jù)那個字段排序
  • 2,排序規(guī)則(升序或者降序)。升序用asc,降序用desc

如我們根據(jù)商品價格從低到高升序排列


如我們根據(jù)商品價格從高到低降序排列

5-8,返回指定條數(shù)的數(shù)據(jù)limit

limit用來指定查詢結(jié)果集數(shù)量上限,比如我們有100條數(shù)據(jù),只想返回前20條,我們可以通過limit(20)來指定只返回20條數(shù)據(jù)。

例如,只返回3條數(shù)據(jù)的寫法如下

  • 注意:limit 在小程序端默認(rèn)及最大上限為 20,在云函數(shù)端默認(rèn)及最大上限為 1000

5-9,分頁方法skip

skip指定查詢返回結(jié)果時從指定序列后的結(jié)果開始返回,常用于分頁。比如我們有100條數(shù)據(jù),想從第10條開始返回數(shù)據(jù),可以通過skip(10)來實現(xiàn)

  • skip結(jié)合我們上面學(xué)的limit方法可以實現(xiàn)分頁效果

比如我們有100條數(shù)據(jù),每次返回20條數(shù)據(jù)。那么就可以分5頁返回。

  • 第1頁 limit(20).skip(0)
  • 第2頁 limit(20).skip(20)
  • 第3頁 limit(20).skip(40)
  • 第4頁 limit(20).skip(60)
  • 第5頁 limit(20).skip(80)

5-10,Command數(shù)據(jù)庫操作符

我門上面學(xué)完了數(shù)據(jù)庫的增刪改查,但是這些都是最基礎(chǔ)最簡單的操作,如果我們想實現(xiàn)復(fù)雜的數(shù)據(jù)查詢操作,該怎么辦呢
比如

  • 查詢價格大于100的商品?
  • 查詢年齡小于18歲的學(xué)生?
  • 如何同時修改多條數(shù)據(jù)?
  • 如何同時刪除多條數(shù)據(jù)?

我們?nèi)绻雽崿F(xiàn)上面這些復(fù)雜的操作,就需要用到數(shù)據(jù)庫里的 Command數(shù)據(jù)庫操作符,就是下面這位


官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html

5-10-1,gt查詢大于指定值的數(shù)據(jù)

比如查詢價格大于5的所有商品

5-10-2,gte查詢大于等于指定值的數(shù)據(jù)

比如查詢大于等于5元的商品

5-10-3,lt查詢小于指定數(shù)值的數(shù)據(jù)

比如查詢價格小于5的所有商品

5-10-4,lte查詢小于等于指定數(shù)值的數(shù)據(jù)

比如查詢價格小于等于5元的所有商品

5-10-5,and同時滿足多個條件的查詢

比如查詢價格大于5小于10元的所有商品

六,云開發(fā)~云函數(shù)

6-1,認(rèn)識云函數(shù)

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

我們先來看下官方給出的云函數(shù)簡介


其實通俗來講,云函數(shù)也是運行在服務(wù)器上的,只不過和我們傳統(tǒng)開發(fā)語言相比。微信官方為我們提供的傻瓜式的一鍵部署。也就是說你只需要把心思花在業(yè)務(wù)邏輯代碼的編寫上即可。無需關(guān)心寫好如何部署,無需關(guān)心安全問題,無需關(guān)心鑒權(quán)問題。

我們下面以獲取openid為例,來看看云函數(shù),php,Java的實現(xiàn)對比

  • php獲取用戶openid

    如果用php來獲取openid必須經(jīng)歷下面幾步
  • 1,去小程序后臺拿到appid和appSecret
  • 2,請求微信的對應(yīng)接口
  • 3,獲取數(shù)據(jù)后進行解碼
  • 4,購買服務(wù)器,配置服務(wù)器
  • 5,購買域名,域名備案,配置https
  • 6,部署php代碼到服務(wù)器
  • 7,小程序端調(diào)用php接口

Java獲取openid和上面的php步驟一樣,也是需要上面7步。而我們用云函數(shù)獲取openid呢,就只需要簡單的3步就行了,代碼量也能顯著減少

6-1-1,云函數(shù)獲取openid

用云函數(shù)的話,只需要3步

  • 1,編寫云函數(shù)
  • 2,一鍵部署云函數(shù)
  • 3,調(diào)用云函數(shù)

來看下云函數(shù)代碼,只需要10行代碼,即可輕松搞定

6-2,云函數(shù)的優(yōu)勢

我們用云函數(shù)和上一章的云數(shù)據(jù)庫進行下對比

操作云函數(shù)云數(shù)據(jù)庫
返回數(shù)據(jù)上限100條20條
更新數(shù)據(jù)都可以更新只有自己創(chuàng)建的才可以更新
刪除數(shù)據(jù)都可以刪除只有自己創(chuàng)建的才可以刪除
運行環(huán)境運行在云端Node.js環(huán)境運行在小程序本地
實現(xiàn)功能豐富度非常豐富只能實現(xiàn)數(shù)據(jù)庫增刪改查
  • 來看下官方文檔是如何描述云函數(shù)的
    云函數(shù)屬于管理端,在云函數(shù)中運行的代碼擁有不受限的數(shù)據(jù)庫讀寫權(quán)限和云文件讀寫權(quán)限。需特別注意,云函數(shù)運行環(huán)境即是管理端,與云函數(shù)中的傳入的 openId 對應(yīng)的微信用戶是否是小程序的管理員 / 開發(fā)者無關(guān)。

6-3,云函數(shù)調(diào)用演示

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html

6-3-0,初始化云函數(shù)的環(huán)境

  • 1,創(chuàng)建一個文件夾cloud和pages平行
  • 2,在project.config.json里面配置云函數(shù)所在目錄為cloud
    在project.config.json里面添加如下配置

    然后點擊保存,我們的cloud文件夾前面就有一個云朵

    就代表我們云函數(shù)初始化成功啦。
  • 新一個云函數(shù)
  • 如果只創(chuàng)建一個云函數(shù)的時候,會出現(xiàn)下面的問題。

    解決方案:只需要在cloud文件夾下新建一個空白文件即可。

6-3-1,云函數(shù)獲取openid

調(diào)用云函數(shù)有兩種寫法

  • 1,傳統(tǒng)的success和fail
  • 2,用promise寫法then和catch

6-3-2,數(shù)據(jù)的導(dǎo)入和導(dǎo)出

  • 數(shù)據(jù)導(dǎo)出,做數(shù)據(jù)備份

    比如導(dǎo)入為json數(shù)據(jù)如下
  • 數(shù)據(jù)導(dǎo)入,為了快速的大量的創(chuàng)建一些數(shù)據(jù)。
    為了方便付費用戶,我這里提前準(zhǔn)備好了108條數(shù)據(jù),付費用戶直接去下載即可

    把下載好的這108條數(shù)據(jù)的json文件,導(dǎo)入到數(shù)據(jù)庫如下

6-3-3,云函數(shù)獲取數(shù)據(jù)

注意:云函數(shù)只要有變動,就要重新部署,否則云函數(shù)不生效。

遇到了一個問題,如下


出現(xiàn)原因:如果你有兩個云開發(fā)環(huán)境,偶爾會出現(xiàn)上圖所示的問題。
解決問題:有兩種

  • 1,在云函數(shù)里指定你要使用那個云開發(fā)環(huán)境
  • 2,使用DYNAMIC_CURRENT_ENV常量 (提倡使用這個)

    我們這里會和小程序里直接調(diào)用數(shù)據(jù)庫的查詢進行下對比

6-3-4,云函數(shù)修改數(shù)據(jù)

本地小程序直接調(diào)用數(shù)據(jù)庫修改會有問題

  • 只能修改自己創(chuàng)建的數(shù)據(jù),別人創(chuàng)建的數(shù)據(jù),就沒有辦法修改了。

  • 如何解決呢? 用云函數(shù)來修改就可以解決這個問題啦。

  • 1,先創(chuàng)建云函數(shù)update0129

  • 2,調(diào)用云函數(shù)就行修改

6-3-5,云函數(shù)刪除數(shù)據(jù)

  • 1,創(chuàng)建一個刪除商品的云函數(shù)remove0129
  • 2,調(diào)用這個云函數(shù)進行刪除操作

6-3-6,提交數(shù)據(jù)到云函數(shù)

  • 1,創(chuàng)建云函數(shù),并部署
  • 2,調(diào)用云函數(shù)

6-4,使用云函數(shù)常見問題

6-4-1,云函數(shù)里面沒有初始化環(huán)境變量


解決方案如下:
使用DYNAMIC_CURRENT_ENV

代碼片段

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV 
})

七,云開發(fā)~云存儲

首先來看下官方對云存儲的介紹:
官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html


說白了,云存儲就是可以用來存儲視頻,音頻,圖片,文件的一個云存儲空間。如果你的小程序需要用到視頻播放,音頻播放,圖片展示,文件上傳與下載功能,就可以用到我們的云存儲了。

  • 使用云存儲來存儲文件時,文件名的命名有一些規(guī)則,建議看一下。

7-1,云開發(fā)控制臺管理文件

控制臺也可以很方便的管理文件。

7-2,上傳圖片到云存儲

我們上傳圖片之前需要先選擇圖片,所以這里用到一個圖片選擇的功能


對應(yīng)的官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

然后調(diào)用文件上傳的api接口即可

官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

7-3,給商品列表加商品圖片

我們既然已經(jīng)學(xué)完圖片上傳功能了,那么我們就可以改造下我們之前的商品列表了,給我們的商品列表添加商品圖片。

7-4,上傳視頻到云存儲

上傳視頻之前同樣需要先選擇視頻,選擇視頻的代碼如下


對應(yīng)的官方文檔如下:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

選擇好視頻以后,同樣是調(diào)用文件上傳api,因為視頻也是一個文件。

7-5,上傳word,excel文件到云存儲

7-5-1,上傳之前先選擇文件

選擇文件的時候記得把type設(shè)置為file


對應(yīng)的官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

  • 這里有一點需要注意
    在電腦模擬器上是選擇電腦上的文件,在手機上運行小程序進行選擇文件時是選擇你聊天記錄里的文件。

7-5-2,上傳文件

在上面選擇好文件以后,我們還是要調(diào)用uploadFile進行文件上傳

7-6,下載文件

使用wx.cloud.downloadFile下載文件
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html

7-7,下載并打開word,excel,pdf

使用wx.openDocument打開文件
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

八,列表的下拉刷新

8-1,開啟頁面下拉刷新

我們需要在app.json獲取頁面對應(yīng)的json里設(shè)置enablePullDownRefresh屬性為true來開啟下拉刷新。



由于我們的刷新動畫默認(rèn)是白色圓點,所以還要在json里設(shè)置頁面背景色才可以看到動畫。

8-2,在Page的onPullDownRefresh里監(jiān)聽刷新


在page里的onPullDownRefresh方法里監(jiān)聽下拉刷新

8-3,用戶下拉刷新時請求最新數(shù)據(jù)

8-4,數(shù)據(jù)請求成功后停止刷新

我們在下拉刷新時,刷新動畫一般很久才結(jié)束,正常情況下應(yīng)該是數(shù)據(jù)請求成功后就結(jié)束刷新動畫。所以我們通過wx.stopPullDownRefresh()方法來結(jié)束刷新動畫。
官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html


代碼示例如下

九,列表的分頁加載

9-1,小程序數(shù)據(jù)庫每次最多20條

小程序數(shù)據(jù)庫api和云函數(shù)調(diào)用數(shù)據(jù)的限制
小程序端直接調(diào)用云數(shù)據(jù)庫時,每次最多可以獲取20條,云函數(shù)里調(diào)用云數(shù)據(jù)庫時每次最多獲取100條。所以我們數(shù)據(jù)多的時候要做分頁加載。

9-2,分頁加載的核心方法

我們做分頁加載時,主要用到了skip和limit方法,對應(yīng)的官方文檔如下

  • skip:每頁加載多少條
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html
  • limit: 加載第幾頁的數(shù)據(jù)https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html

其實這個skip和limit我在數(shù)據(jù)庫的那一節(jié)有做初步講解,這一節(jié)我們就借助具體分頁加載的案例來做綜合講解

9-3,導(dǎo)入108條數(shù)據(jù)

9-3-1,下載數(shù)據(jù)源

這108條數(shù)據(jù)是石頭哥提前為付費用戶/年卡用戶準(zhǔn)備好的,如果你沒有付費,可以自己去數(shù)據(jù)庫里創(chuàng)建108條數(shù)據(jù)即可。

9-3-2,導(dǎo)入到數(shù)據(jù)表

我這里導(dǎo)入到num數(shù)據(jù)表,導(dǎo)入成功如下:

9-3-3,別忘記修改表權(quán)限

把數(shù)據(jù)表(集合)的權(quán)限改為所有用戶可讀,僅創(chuàng)建者可讀寫。

9-4,上拉加載更多監(jiān)聽

我們的列表滑動到最后一個數(shù)據(jù)時,會執(zhí)行下面的方法


所以我們的分頁加載要在onReachBottom里做。

9-5,數(shù)據(jù)庫分頁加載代碼實現(xiàn)

直接調(diào)用數(shù)據(jù)庫每次最多只能加載20條數(shù)據(jù)


wxml里只做簡單的列表數(shù)據(jù)顯示就行了

wxss做個簡單的樣式

對應(yīng)的效果如下

9-5-1,沒有更多數(shù)據(jù)時的友好提示

9-5-2,加載中和加載完成的友好提示

  • 加載中
   wx.showLoading({
      title: '加載中...',
    })
  • 隱藏加載中
wx.hideLoading()

9-6,通過云函數(shù)實現(xiàn)分頁加載

通過云函數(shù)調(diào)用數(shù)據(jù)庫,每次最多可以加載100條數(shù)據(jù).

  • 如果每頁20條以內(nèi),不建議用云函數(shù)
  • 如果分頁的時候,每頁大于20條,就用云函數(shù)。

十,搜索功能

今天來給大家講講小程序的搜索功能。我這里后臺數(shù)據(jù)庫用的是小程序云開發(fā)的云數(shù)據(jù)庫。所以我們搜索的時候就要借助云開發(fā)來實現(xiàn)。

10-1,需求

比如我這里有如下的一些數(shù)據(jù)

我們想實現(xiàn)如下搜索需求

  • 1,搜索標(biāo)題(title)包含'小石頭’的數(shù)據(jù)
  • 2,搜索標(biāo)題(title)或者描述(desc)包含'小石頭’的數(shù)據(jù)
  • 3,搜索標(biāo)題(title)描述(desc)都包含'小石頭’的數(shù)據(jù)

我們知道數(shù)據(jù)庫查詢的時候有個where語句,但是where語句是查詢某個字段全部包含你輸入的內(nèi)容時才可以,所以單純用where語句來做搜索的話,結(jié)果太單一。所以我們今天就來學(xué)習(xí)下模糊搜索功能的實現(xiàn)。我們以上面三個需求為例,來一個個講解。

10-2,實現(xiàn)原理

我們做模糊搜索的時候,其實就是查詢某個字段里是否包含我們的搜索詞。而模糊搜索需要借助RegExp,來看看RegExp是什么。


官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

  • 再來看看官方示例

    可能看官方示例會有點糊涂,那么我們接下來就結(jié)合具體代碼來給大家做下講解。

10-3,模糊搜索的代碼實現(xiàn)

10-3-1,模糊搜索單個字段

  • 需求:搜索標(biāo)題(title)包含'小石頭’的數(shù)據(jù)

代碼如下


查詢結(jié)果如下:

可以看到我們成功的查詢到了標(biāo)題里包含'小石頭的數(shù)據(jù)’

10-3-2,模糊搜索多個字段(滿足一個即可)

  • 需求:搜索標(biāo)題(title)或者描述(desc)包含'小石頭’的數(shù)據(jù)

由于我們要查詢多個字段,所以我們這里用到了command高級操作符里的or


代碼如下:

查詢結(jié)果:

我們來分析下這兩條數(shù)據(jù)

  • 1,標(biāo)題和描述都包含'小石頭’,符合
  • 2,雖然標(biāo)題里沒有'小石頭’,但是描述里有,所以也符合。
  • 3,title和desc里都沒有'小石頭’,所以不符合。

10-3-3,模糊搜索多個字段(要同時滿足)

  • 需求:搜索標(biāo)題(title)描述(desc)都包含'小石頭’的數(shù)據(jù)

由于我們要查詢多個字段,所以我們這里用到了command高級操作符里的and

代碼如下:

查詢結(jié)果:


我們來分析下這兩條數(shù)據(jù)

  • 1,標(biāo)題和描述都包含'小石頭’,符合
  • 2,雖然desc里沒有'小石頭’,但是title里沒有,所以也不符合。
  • 3,title和desc里都沒有'小石頭’,所以也不符合。

10-4,源碼

為例方便大家使用,我把完整的代碼貼到這里,后面大家使用時,直接復(fù)制這里的代碼,略微改造下就可以了。

    //我這里簡單起見就把搜索詞寫死,正常應(yīng)該用戶輸入的
    let searchKey = '小石頭'
    let db = wx.cloud.database()
    let _ = db.command

    db.collection('news')
      .where(_.or([
        {//標(biāo)題
          title: db.RegExp({ //使用正則查詢,實現(xiàn)對搜索的模糊查詢
            regexp: searchKey,
            options: 'i', //大小寫不區(qū)分
          }),
        },
        {//描述
          desc: db.RegExp({
            regexp: searchKey,
            options: 'i',
          }),
        }
      ])).get()
      .then(res => {
        console.log('查詢成功', res)
      })
      .catch(res => {
        console.log('查詢失敗', res)
      })

10-5,獲取用戶輸入的搜索詞進行搜索

十一,登錄注冊

十二,點贊與收藏

十三,CMS網(wǎng)頁版管理后臺

13-1,開通cms的準(zhǔn)備工作

開通cms需要你云開發(fā)里使用按量付費,如果你是第一次開通云開發(fā),記得做如下選擇。


如果你已經(jīng)開通過云開發(fā),記得把付費模式改為按量付費。

云開發(fā)實戰(zhàn)案例···》

實戰(zhàn)一,云開發(fā)實現(xiàn)訂閱消息推送

之前的通過formid發(fā)送模板消息推送,將在2020年1月10日下線,所以我們不得不使用訂閱消息了。

我們先來看下訂閱消息的官方簡介。


接下來我們就來借助云開發(fā),來快速實現(xiàn)小程序消息推送的功能。

1,獲取模板 ID

這一步和我們之前的模板消息推送是一樣的,也是先添加模板,然后拿到模板id


首先是開通訂閱消息功能,很簡單,如下圖

由于長期性訂閱消息,目前僅向政務(wù)民生、醫(yī)療、交通、金融、教育等線下公共服務(wù)開放,后期將逐步支持到其他線下公共服務(wù)業(yè)務(wù)。僅就線下公共服務(wù)這一點,長期性訂閱消息就和大部分開發(fā)者無緣了。
所以我們這里只能以使用一次性訂閱消息為例。

如上圖,我們從公共模板庫里選擇一個一次性訂閱的模板。然后編輯模板如下圖

下圖就是我們添加好的模板,下圖的模板id就是我們需要的。

2,請求用戶授權(quán)

我們做訂閱消息授權(quán)時,只能是用戶點擊或者支付完成后才可以調(diào)起來授權(quán)彈窗,官方是這么要求的:


我們這里用到了wx.requestSubscribeMessage這個方法,來獲取用戶的授權(quán)。

  • 1,編寫index.wxml代碼
  • 2,編寫index.js代碼,實現(xiàn)點擊獲取授權(quán)

    這一步tmplIds里的一串字符,就是我們自己添加的模板id
  • 3,點擊按鈕運行效果如下
    開發(fā)者工具模擬器上點擊授權(quán)彈窗是這樣的:

    手機上的授權(quán)彈窗是這樣的:

    可以看到,這里顯示的就是我們添加的 '上課提醒’的模板。
    細(xì)心的同學(xué)可以看到, 真機上多了一個 '總是保持以上選擇,不再詢問’
    其實,你自己仔細(xì)多品一些。也能明天,我們正常訂閱消息授權(quán)時,用戶允許的話,你只能推送一次消息。也就是用戶允許一次,我們就可以推送一條消息給用戶,并且這個允許不存在過期。所以我們可以讓用戶盡量多的點擊允許,這樣我們就可以盡量多的給用戶發(fā)送消息了。

這里用戶允許后,我們就可以給用戶推送消息了,接下來我們來借助云開發(fā)的云函數(shù)來實現(xiàn)消息推送功能。

3,獲取用戶的opneid

先來看官方爸爸是怎么說的。


可以看出官方提供了兩種方式,我們這里使用云調(diào)用。說白了就是在云函數(shù)里調(diào)用推送功能。

  • 推送所需參數(shù)

    可以看到我這里用來openapi功能,并且需要用到用戶的opneid,關(guān)于openid的獲取,我之前有寫過文章,也錄過視頻的。文章的話,大家去翻下我歷史的文章,視頻的話,點擊這個即可:《借助云函數(shù)獲取用戶openid》
    這里的openid的獲取我就不再詳細(xì)講解了,把對應(yīng)云函數(shù)的代碼給大家貼出來。

    在使用云開發(fā)時,有幾點需要注意的
  • 1,需要在project.config.json里創(chuàng)建云函數(shù)目錄如下圖
  • 2,需要在app.js里初始化云開發(fā)環(huán)境

    至于云開發(fā)的環(huán)境id從哪里拿,我視頻里也講過很多遍了,直接去看我視頻或者翻看我歷史文章即可。
    《零基礎(chǔ)入門云開發(fā)視頻》

4,用云函數(shù)實現(xiàn)消息推送

我們只需要創(chuàng)建一個云函數(shù)如下,然后填入用戶的openid,要跳轉(zhuǎn)的小程序頁面鏈接,模板內(nèi)容,模板id即可。通常這些數(shù)據(jù)都應(yīng)該傳進來,簡單起見,我就把這里的模板內(nèi)容寫成固定的。

注意:我在編寫上面的代碼時,推送內(nèi)容的key必須和小程序模板里的key保持一致,否則就會報如下錯誤。

  • 然后看下調(diào)用這個云函數(shù)的地方

    如果用戶沒有授權(quán),我們推送會報如下錯誤

    如果用戶授權(quán)過,我們就可以成功推送了,推送后的打印日志如下

    還記得我們真機上的授權(quán)嗎,如果用戶只是點擊了允許,沒有選擇一直允許,那我我們在推送成功一次后,如果再次推送,就需要用戶重新授權(quán)。否則,還是會報這個錯誤的

    所以我們用戶點擊一次允許,我們就可以推送一次消息,比如,我點擊了4次允許那么我就可以成功的推送4次

效果圖


可以看到,我們成功的收到 上課提醒的模板消息,點擊進去,就是我們具體的推送內(nèi)容

其實我這是連續(xù)收到了4條消息,因為我點擊了4次允許推送,所以就可以成功的推送4次。

到這里我們就完整的實現(xiàn)模板消息推送功能了,下面我把主要代碼貼給大家,大家也可以私信我獲取完整源碼。

  • index.wxml
<button bindtap="shouquan" type='primary'>獲取訂閱消息授權(quán)</button>
<button bindtap="getOpenid">獲取用戶的openid并推送消息</button>
  • index.js
//編程小石頭wechat:2501902696
Page({
  //獲取授權(quán)的點擊事件
  shouquan() {
    wx.requestSubscribeMessage({
      tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //這里填入我們生成的模板id
      success(res) {
        console.log('授權(quán)成功', res)
      },
      fail(res) {
        console.log('授權(quán)失敗', res)
      }
    })
  },
  //獲取用戶的openid
  getOpenid() {
    wx.cloud.callFunction({
      name: "getopenid"
    }).then(res => {
      let openid = res.result.openid
      console.log("獲取openid成功", openid)
      this.send(openid)
    }).catch(res => {
      console.log("獲取openid失敗", res)
    })
  },
  //發(fā)送模板消息到指定用戶,推送之前要先獲取用戶的openid
  send(openid) {
    wx.cloud.callFunction({
      name: "sendMsg",
      data: {
        openid: openid
      }
    }).then(res => {
      console.log("推送消息成功", res)
    }).catch(res => {
      console.log("推送消息失敗", res)
    })
  }
})
  • 推送對應(yīng)的云函數(shù)
//編程小石頭wechat:2501902696
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid, //要推送給那個用戶
      page: 'pages/index/index', //要跳轉(zhuǎn)到那個小程序頁面
      data: {//推送的內(nèi)容
        thing1: {
          value: '小程序入門課程'
        },
        thing6: {
          value: '杭州浙江大學(xué)'
        },
        thing7: {
          value: '第一章第一節(jié)'
        }
      },
      templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

后面我會分享更多小程序相關(guān)的知識出來,請持續(xù)關(guān)注。

注意:授權(quán)一次,只能發(fā)送一條消息。

5,發(fā)送訂閱消息給多個用戶

//發(fā)送訂閱消息給多個用戶
  sendAll() {
    if (name == null || name == '') {
      wx.showToast({
        icon: "none",
        title: '請輸入課程名',
      })
      return
    }
    let users = [
      "oc4sa0Vp_s65LEItm4JSWT5WFQds",
      "oc4sa0dZ-pSCu95djiLCt7jo97bY"
    ]

    users.forEach(item => {
      console.log("for循環(huán)", item)
      this.sendFun(item, name)
    })
  },
  //封裝的方式方法
  sendFun(openid, name) {
    wx.cloud.callFunction({
      name: "fasong",
      data: {
        openid: openid,
        name: name
      }
    }).then(res => {
      console.log("發(fā)送單條成功", res)
    }).catch(res => {
      console.log("發(fā)送單條失敗", res)
    })
  }

實戰(zhàn)二,短信驗證碼

老規(guī)矩先看效果圖

普通短信


驗證碼短信

今天被云開發(fā)官方告知,云開發(fā)支持發(fā)短信功能了,然后就迫不及待的來嘗下鮮。

官方文檔:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

進入官方文檔一看,云開發(fā)給咱們開發(fā)者的福利還真不小。
不僅僅可以很方便的使用短信功能,還送了咱們1000條免費短信。不用白不用嘛。這1000條短信足夠咱們把小程序短信功能,和小程序短信驗證碼功能都學(xué)會了。
廢話不多說了,咱們直接來擼代碼

1,使用云開發(fā)短信的條件

這個前置條件很重要,條件不滿足,你就沒法使用云開發(fā)短信功能。

使用條件

  • 1,必須是企業(yè)小程序,目前個人小程序無法使用短信發(fā)送
  • 2,必須開通靜態(tài)網(wǎng)站功能(后面應(yīng)該會逐步放開)
  • 3,必須開通云開發(fā)(這個沒得說,不開通云開發(fā)你還用啥云開發(fā)功能?。?/li>

上面條件都滿足以后,我們就可以來愉快的擼代碼了。

年卡福利

  • 1,可以獲取石頭哥目前所有視頻課
  • 2,未來一年內(nèi)出的新課也可以獲取
  • 3,一對一問題解答,遠(yuǎn)程協(xié)助
  • 4,可以借用石頭哥的企業(yè)小程序

感興趣可以加石頭哥微? 2501902696 備注年卡

2,開通靜態(tài)網(wǎng)站功能

如果你不開通靜態(tài)網(wǎng)站,直接調(diào)用短信發(fā)送,會報如下錯誤。


其實官方文檔里也有給出這個錯誤。

那么我們就來開通靜態(tài)網(wǎng)站功能。開通靜態(tài)網(wǎng)站功能之前,必須開通云開發(fā),配置好云開發(fā)的環(huán)境。這些我在云開發(fā)入門里講過很多遍。還不知道的同學(xué)可以翻看下我前面的文章或者視頻:https://edu.csdn.net/course/detail/26572

這里開通云開發(fā)我們借助小程序開發(fā)者工具來實現(xiàn)快速開通。

2-1,注冊小程序

這里我就不再多說了,只有注冊過小程序的appid才可以開通云開發(fā)


我們注冊好小程序后,就可以拿到appid了,如上圖

2-2,創(chuàng)建一個小程序項目

小程序項目的創(chuàng)建,我這里不再多說,我前面小程序基礎(chǔ)課里有講過很多遍。《小程序基礎(chǔ)學(xué)習(xí)》


這里強調(diào)一點,就是創(chuàng)建小程序項目時一定要用我們自己的appid不要用測試號。

如果你一開始是用測試appid創(chuàng)建的,也可以通過上圖的方式更換成自己的小程序的appid。

2-3,開通云開發(fā)

這里云開發(fā)的開通,我就不做過多講解了,我云開發(fā)課程里也講過很多遍。大家可以去翻看下


只需要點擊開發(fā)者工具里的云開發(fā)按鈕,跟著提示一步步操作就可以快速開通云開發(fā)。

2-4,開通靜態(tài)網(wǎng)站功能


我們上面云開發(fā)開通好以后,就可以在這里快速開通靜態(tài)網(wǎng)站了。

點擊以后,直接點擊開通即可

這時候開通有個條件

我們必須按照要求改變自己小程序的付費方式,把我們的付費方式改成按量付費即可。

這里不用擔(dān)心,這里的按量付費,每月都有免費額度。這些額度我們開發(fā)學(xué)習(xí)基本上夠用了


這個時候我們的靜態(tài)網(wǎng)站功能就開通成功了。

開通成功以后如下圖。

3,編寫發(fā)送短信的云函數(shù)

其實上面靜態(tài)網(wǎng)站功能開通以后,我們不用上傳網(wǎng)站資源,就可以直接來使用短信功能了。
下面我們就來使用云開發(fā)的云函數(shù)功能來做短信發(fā)送功能。
老規(guī)矩先看效果圖


代碼編寫也很簡單

其實發(fā)送短信的代碼很簡單,就上面這幾行。下面就來教大家如何編寫這個云函數(shù)。

3-1,初始化云開發(fā)環(huán)境id

新建一個和pages平級的目錄cloud,用于存放云函數(shù)


然后在project.config.json里添加cloudfunctionRoot選項。

然后對cloud選擇當(dāng)前環(huán)境

在app.js里配置環(huán)境變量

這個env環(huán)境id需要你去云開發(fā)控制臺獲取

3-2,創(chuàng)建云函數(shù)

右鍵cloud目錄,新建Node.js云函數(shù)


然后新建一個云函數(shù),名字你可以自定隨便定。我這里用sendSms

3-3,編寫云函數(shù)


我這里把代碼貼給大家,記得把env和接收短信的手機號換成你自己的。

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.cloudbase.sendSms({
      env: 'xiaoshitou-zfl2q',
      content: '編程小石頭發(fā)布了新的能力',
      phoneNumberList: [
        "+8615611823564"
      ]
    })
    return result
  } catch (err) {
    return err
  }
}

3-4,部署云函數(shù)

上面云函數(shù)編寫好了,一定要記得部署下云函數(shù)。右鍵sendSms然后點擊下面箭頭所示的即可。


上傳部署成功后,會有下面這樣的提示

4,調(diào)用云函數(shù)發(fā)送短信

我們上面云函數(shù)編寫并部署成功以后,就可以來調(diào)用這個云函數(shù),發(fā)送短信了。

4-1,編寫wxml文件

在wxml文件里寫一個button按鈕,編寫一個bindtap點擊事件

4-2,編寫js文件

在js文件里實現(xiàn)上面button的點擊事件,然后調(diào)用云函數(shù)


調(diào)用云函數(shù)時,一定要記得這里的name必須和你的云函數(shù)名一模一樣。

4-3,點擊發(fā)送短信

點擊發(fā)送短信


點擊發(fā)送 短信以后,可以看到日志里打印openapi.cloudbase.sendSms:ok
這就代表發(fā)送成功了。
然后再看下手機,收到下面的短信。

到這里我們的短信發(fā)送功能就完整的實現(xiàn)了。
其實到這里該實現(xiàn)的功能,就已經(jīng)實現(xiàn)了。但是我們使用短信場景更多的是用短信發(fā)送驗證碼。所以接下來給大家做一個發(fā)送短信驗證碼的例子出來

5,發(fā)送驗證碼短信

老規(guī)矩,先看效果圖


我們只需要獲取用戶輸入的手機號,然后點擊獲取驗證碼,最后輸入短信里接收到的驗證碼,進行驗證即可。

5-1,編寫wxml

頁面比較簡單,就兩個輸入框和兩個按鈕

5-2,編寫js

js里主要是獲取用戶輸入的手機號,然后發(fā)送驗證碼,發(fā)送驗證碼調(diào)用云函數(shù)實現(xiàn)短信驗證碼發(fā)送功能。用戶輸入驗證碼以后進行校驗即可。

5-3,發(fā)送短信驗證碼

用戶輸入手機號以后,點擊發(fā)送,可以看到我們手機上收到了如下短信。


然后用戶輸入獲取到的驗證碼,點擊驗證。

可以看到驗證成功,驗證成功以后后面的操作就可以自己定了,比如驗證成功以后跳轉(zhuǎn)到登錄成功頁。

到這里我們就實現(xiàn)了驗證碼發(fā)送功能了。

5-4,生成隨機驗證碼的方法

我這里把生成隨機驗證碼的方法貼給大家。

字母和數(shù)字混合

  //獲取隨機驗證碼,n代表幾位
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  }

數(shù)字混合

  //獲取隨機驗證碼,n代表幾位
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 9);
      res += chars[id];
    }
    return res;
  }

實戰(zhàn)三,群發(fā)短信

我們上面給單個手機發(fā)送驗證碼的功能實現(xiàn)了,接下來就教大家如何群發(fā)短信。

老規(guī)矩,先看效果圖


官方文檔:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

使用云開發(fā)短信的條件

這個前置條件很重要,條件不滿足,你就沒法使用云開發(fā)短信功能。

  • 1,必須是企業(yè)小程序,目前個人小程序無法使用短信發(fā)送
  • 2,必須開通靜態(tài)網(wǎng)站功能(后面應(yīng)該會逐步放開)
  • 3,必須開通云開發(fā)(這個沒得說,不開通云開發(fā)你還用啥云開發(fā)功能?。?/li>

上面條件都滿足以后,我們就可以來愉快的擼代碼了。

年卡福利

  • 1,可以獲取石頭哥目前所有視頻課
  • 2,未來一年內(nèi)出的新課也可以獲取
  • 3,一對一問題解答,遠(yuǎn)程協(xié)助
  • 4,可以借用石頭哥的企業(yè)小程序

感興趣可以加石頭哥微? 2501902696 備注年卡

1,編寫wxml頁面

簡單起見,我這里只定義一個輸入手機號的輸入框和一個button按鈕


對應(yīng)的代碼如下

2,獲取用戶輸入的手機號

我這里以*來分割手機號,如下圖所示。


然后我們定義一個bindinput事件來獲取用戶輸入的內(nèi)容。

可以看到,我們成功的獲取到了用戶輸入的手機號了。

但是官方文檔里已經(jīng)說明,我們?nèi)喊l(fā)短信的時候需要用到的是一組手機號,也就是說需要用數(shù)組來存放數(shù)據(jù)。但是我們這里是一個字符串。那么我們就要分割字符串成數(shù)組了。

3,分割字符串成數(shù)組

我們分割字符串用到的是字符串的split()方法


當(dāng)然觸發(fā)的時機,應(yīng)該是在用戶點擊群發(fā)按鈕的時候。那么我們就為群發(fā)按鈕定義bindtap點擊事件send

可以看到我們成功的把字符串分割成了數(shù)組。

但是我們數(shù)組里的手機號前面有個回車鍵,所以安全起見,我們在分割字符串之前,需要先把這回車鍵給剔除掉。

4,去除字符串里的回車鍵

去除字符串里的回車鍵語法如下

字符串.replace(/[\r\n]/g, "")

可以看到我們只需要調(diào)用字符串.replace方法即可,后面括號里跟的是回車鍵對應(yīng)的正則表達式。這里不需要記住,后面用的時候來我筆記這里復(fù)制就行了。


可以看到我們剔除回車鍵以后,再分割的字符串里就沒有回車鍵了。

5,遍歷數(shù)組給手機號前面+86

如果你有仔細(xì)閱讀官方文檔,可以看到我們?nèi)喊l(fā)的手機號前面必須以+86開頭。并且每次群發(fā)的手機號不能超過1000條。


那么我們接下來就要遍歷數(shù)組,給每個手機號前面都添加'+86’了。
當(dāng)然了這里有很多種方法來實現(xiàn)這一目的,我這里用一個for循環(huán)和一個map方法來分別實現(xiàn)下。

可以看出用map方法更簡介一點。但是對于新手來說第二種方法可能不是很好理解。所以這里你用那種方法都可以,不做強制要求。

5-1,通過for循環(huán)來實現(xiàn)

5-2,通過map方法來實現(xiàn)

6,編寫群發(fā)短信的內(nèi)容

那么我們接下來要做的就是實現(xiàn)群發(fā)功能了。我們這里要想成功的實現(xiàn)群發(fā),需要兩個元素

  • 要群發(fā)的短信內(nèi)容
  • 要群發(fā)的手機號

關(guān)于手機號和群發(fā)內(nèi)容都有要求


我們?nèi)喊l(fā)手機號這里已經(jīng)符合要求了,接下來就是群發(fā)的內(nèi)容了。群發(fā)內(nèi)容最長不能超過60個字節(jié),一個漢字通常2~3個字節(jié)。也就是說我們短信內(nèi)容不能超過20個字,所以群發(fā)的短信一定要精細(xì)。用最少的字來吸引用戶。

這里其實就是一個input來獲取用戶輸入的內(nèi)容就行了。我不再多講,直接把代碼貼出來。


在js里獲取用戶輸入的短信內(nèi)容

現(xiàn)在完事具備,只欠一個云函數(shù)了

7,編寫群發(fā)短信的云函數(shù)

短信內(nèi)容和群發(fā)的手機號都已經(jīng)成功拿到了,我們接下來就要來編寫群發(fā)的云函數(shù)了。


云函數(shù)其實我們短信驗證碼那一節(jié)基本上一樣,區(qū)別就是

  • 短信驗證傳入的是:驗證碼+單個手機號
  • 群發(fā)傳入的是:短信內(nèi)容+多個手機號

云函數(shù)編輯好,記得重新部署下。

8,調(diào)用云函數(shù)實現(xiàn)群發(fā)

上面云函數(shù)編輯好了,也部署好了,接下來就是要調(diào)用云函數(shù)實現(xiàn)短信群發(fā)了。


調(diào)用其實很簡單。

9,群發(fā)演示失敗

接下來我們就要驗證自己的勞動成果了。如下,我發(fā)這樣的內(nèi)容給兩個手機號。為什么是兩個呢,我這里是學(xué)習(xí),要節(jié)省短信條數(shù)。官方只送我們1000條。所以要省著點用。

其實群發(fā)兩個手機號,和群發(fā)1000個沒區(qū)別,只要群發(fā)兩個成果,那么群發(fā)1000個也一樣的。


辛辛苦苦編寫好了,測試了下,居然報錯

什么鬼,代碼明明沒有錯誤啊,程序員有時候就是莫名的自信。
官方給的發(fā)送成果返回字段如下

石頭哥發(fā)送返回結(jié)果如下

百思不得其解啊。不會真是代碼寫錯了吧。。。。
還好石頭哥比較聰明,翻譯了一下報錯信息。

發(fā)送時間限制,也沒看到官方文檔有說時間限制啊。后來又去官方文檔翻來覆去,終于在一個角落里看到了這句話。

原來是石頭哥寫文章太晚了。。。。

本來想寫完文章,直接錄講解視頻給大家的,,,,看來只能等第二天8-22:00來續(xù)寫這篇文章了。。。。

10,群發(fā)演示成功

終于等到了第二天8點47,下面我們把昨天的群發(fā)短信再演示一遍,看這次能不能成功。
先來看我們的日志


可以看出日志上顯示成功的發(fā)送兩個。那么收到的短信長什么樣子,也給大家截個圖。
第一個手機號是安卓手機

第二個手機號是蘋果手機


到這里我們的群發(fā)短信功能就完整的實現(xiàn)了。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
小程序·云開發(fā)快速上手
mpvue+小程序云開發(fā),純前端實現(xiàn)婚禮邀請函
微信小程序開發(fā)平臺新功能「云開發(fā)」快速上手體驗
小程序·云開發(fā)最佳實踐:零基礎(chǔ)如何快速上手小程序開發(fā)?
微信小程序開發(fā)—消息推送
基于微信小程序的校園二手平臺的設(shè)計與實現(xiàn)
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服