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

(備注：微信小程序的wxml文件相當(dāng)于HTML文件，wxss文件相當(dāng)于CSS文件，js文件就是JavaScript文件，數(shù)據(jù)庫為NoSQL數(shù)據(jù)庫，數(shù)據(jù)庫腳本語言也同NoSQL，因為是運行在微信內(nèi)，所有不需要關(guān)心是Android還是IOS平臺，代碼托管在微信的代碼管理平臺，一個類似于Github的平臺)

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

---

上一篇回顧

上一篇中用到了實時數(shù)據(jù)監(jiān)聽，但是忘了說數(shù)據(jù)庫集合權(quán)限的問題，如果權(quán)限沒有設(shè)置正確監(jiān)聽是不會起作用的

這個權(quán)限在云數(shù)據(jù)庫管理界面可以設(shè)置，先打開云開發(fā)界面，切換到數(shù)據(jù)庫，選擇【權(quán)限設(shè)置】

然后勾選第一個設(shè)置

注意到第一句話沒有，之前我們的數(shù)據(jù)庫操作都是通過云函數(shù)來做的，所以不用考慮權(quán)限問題，但是數(shù)據(jù)監(jiān)聽是在小程序端配置的，所以這個才需要修改權(quán)限，然后再運行小程序就不會有監(jiān)聽失敗的問題了

---

接下來說新增功能

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

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

首先我們在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");}

這里的圖標(biāo)都是從阿里巴巴矢量圖標(biāo)庫中下載的，可以自行去選取喜歡的圖標(biāo)，完全免費

編譯運行小程序

當(dāng)然這只是在模擬器運行，沒法發(fā)給任何人

所以當(dāng)務(wù)之急是用多個賬號測試，這需要我們新增測試用的微信號

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

輸入微信號搜索添加，可以把三個權(quán)限都打開，方便使用

然后回到開發(fā)工具中，點擊預(yù)覽按鈕，掃描二維碼即可在真機(jī)上運行

然后接收到分享卡片的人就可以通過點擊卡片進(jìn)入小程序

卡片里的圖片可以自定義，像我這樣不定義的就會截取屏幕作為預(yù)覽

現(xiàn)在點擊這個卡片只是單純的進(jìn)入小程序而已，因為我們還沒有加任何信息在里面，接下來我們在index.js里新增一個函數(shù)

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

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

那在哪里接收這些信息呢？答案是onload函數(shù)

還記得onLoad函數(shù)的簽名把

onLoad: function (options)

他的參數(shù)option就包括所有傳進(jìn)來的信息

我們在onLoad函數(shù)里加一句

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

來看看打印出來是什么

應(yīng)該有人會問，測試分享功能的時候如果只能用真機(jī)測試豈不是很麻煩？確實很麻煩，其實我們也可以用開發(fā)工具來測，選擇合適的編譯條件即可，針對我們要測的傳入信息我們可以設(shè)置相應(yīng)的條件進(jìn)行測試

這樣就設(shè)置好了進(jìn)入小程序時所攜帶的信息，達(dá)到模擬點擊卡片進(jìn)入的情況

運行程序，打開控制臺可以看到日志

然后我們就可以根據(jù)這兩個字段的情況來提示用戶是否要加入新的賬本，新增如下函數(shù)

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函數(shù)中調(diào)用該函數(shù)

this.processInvite(options)

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

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

點擊取消亦是如此

---

OK，本篇就先到這里，下一篇繼續(xù)講如何邀請別人加入你的賬本

總結(jié)

以上是生活随笔為你收集整理的小程序onload_微信小程序开发入门之共享账本（十四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。