微信小程序開發入門之共享賬本(十四)

微信小程序開發入門之共享賬本(十四)

微信小程序開發入門之共享賬本(十四)

(備註:微信小程序的wxml文件相當於HTML文件,wxss文件相當於CSS文件,js文件就是JavaScript文件,數據庫為NoSQL數據庫,數據庫腳本語言也同NoSQL,因為是運行在微信內,所有不需要關心是Android還是IOS平臺,代碼託管在微信的代碼管理平臺,一個類似於Github的平臺)

(ps:區塊鏈最近可真是火,但是也不能因此亂了方寸,做事要有始有終不是,等寫完小程序的文章再和大家共同學習下區塊鏈的知識吧)

上一篇回顧

上一篇中用到了實時數據監聽,但是忘了說數據庫集合權限的問題,如果權限沒有設置正確監聽是不會起作用的

微信小程序開發入門之共享賬本(十四)

這個權限在雲數據庫管理界面可以設置,先打開雲開發界面,切換到數據庫,選擇【權限設置】

微信小程序開發入門之共享賬本(十四)

然後勾選第一個設置

微信小程序開發入門之共享賬本(十四)

注意到第一句話沒有,之前我們的數據庫操作都是通過雲函數來做的,所以不用考慮權限問題,但是數據監聽是在小程序端配置的,所以這個才需要修改權限,然後再運行小程序就不會有監聽失敗的問題了

接下來說新增功能

歐陽修說過,獨樂樂不如眾樂樂

既然我們是共享賬本,肯定是有人一起記賬最好,所以本篇我們要新增邀請其他人一起來記賬的功能

首先我們在index.wxml中新增一個分享按鈕

wxss中新增一個樣式

.share {
 width: 70rpx;
 height: 70rpx;
 background-image: url("https://746a-tj-tianji-1300186850.tcb.qcloud.la/share.png?sign=8105c0a0dafadda106bd6ace80584752&t=1569152158");
}

這裡的圖標都是從阿里巴巴矢量圖標庫中下載的,可以自行去選取喜歡的圖標,完全免費

編譯運行小程序

微信小程序開發入門之共享賬本(十四)

當然這只是在模擬器運行,沒法發給任何人

所以當務之急是用多個賬號測試,這需要我們新增測試用的微信號

打開微信公眾平臺小程序管理頁面,選擇成員管理,然後在項目成員下添加新成員

微信小程序開發入門之共享賬本(十四)

輸入微信號搜索添加,可以把三個權限都打開,方便使用

然後回到開發工具中,點擊預覽按鈕,掃描二維碼即可在真機上運行

微信小程序開發入門之共享賬本(十四)

然後接收到分享卡片的人就可以通過點擊卡片進入小程序

微信小程序開發入門之共享賬本(十四)

卡片裡的圖片可以自定義,像我這樣不定義的就會截取屏幕作為預覽

現在點擊這個卡片只是單純的進入小程序而已,因為我們還沒有加任何信息在裡面,接下來我們在index.js裡新增一個函數

onShareAppMessage: function (res) {
 return {
 title: '快來和我一起記賬吧',
 path: '/pages/index/index?acctBookId='+this.data.acctBookInfo._id+"&acctBookName="+this.data.acctBookInfo.name,
 imageUrl:'/images/shareBook.jpg'
}
},

這是一個系統函數,當點擊open-type='share'的按鈕或者選擇小程序界面右上角菜單中的分享時,就會調用該函數,如果不自己定義的話就是上圖那種情況,現在我們給分享卡片加入了賬本的信息和預覽圖片,別人點擊你分享的卡片之後就會帶著這些信息過來,

微信小程序開發入門之共享賬本(十四)

那在哪裡接收這些信息呢?答案是onload函數

還記得onLoad函數的簽名把

onLoad: function (options)

他的參數option就包括所有傳進來的信息

我們在onLoad函數里加一句

console.log('[index onload] options',options)

來看看打印出來是什麼

應該有人會問,測試分享功能的時候如果只能用真機測試豈不是很麻煩?確實很麻煩,其實我們也可以用開發工具來測,選擇合適的編譯條件即可,針對我們要測的傳入信息我們可以設置相應的條件進行測試

微信小程序開發入門之共享賬本(十四)

這樣就設置好了進入小程序時所攜帶的信息,達到模擬點擊卡片進入的情況

運行程序,打開控制檯可以看到日誌

微信小程序開發入門之共享賬本(十四)

然後我們就可以根據這兩個字段的情況來提示用戶是否要加入新的賬本,新增如下函數

processInvite(option){
 console.log(option)
 let acctBookId = option.acctBookId, acctBookName = option.acctBookName
 if (acctBookId && acctBookName){
 let that = this
 wx.showModal({
 title: '是否加入賬本',
 content: acctBookName,
 success(res) {
 if (res.confirm) {
 console.log('[index processInvite] 
 用戶點擊確定')
 } else if (res.cancel) {
 console.log('[index processInvite] 
 用戶點擊取消')
 }
 },
 })
 }
},

然後在onLoad函數中調用該函數

this.processInvite(options)

編譯運行,會彈出邀請窗口

微信小程序開發入門之共享賬本(十四)

點擊確定會在控制檯打印出信息

微信小程序開發入門之共享賬本(十四)

點擊取消亦是如此

OK,本篇就先到這裡,下一篇繼續講如何邀請別人加入你的賬本

微信小程序開發入門之共享賬本(十四)


分享到:


相關文章: