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

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

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

---

上一篇回顧

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

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

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

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

---

接下來說新增功能

歐陽修說過，獨(dú)樂樂不如眾樂樂

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

首先我們?cè)?strong>index.wxml中新增一個(gè)分享按鈕

在wxss中新增一個(gè)樣式

.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)，完全免費(fèi)

編譯運(yùn)行小程序

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

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

打開微信公眾平臺(tái)小程序管理頁面，選擇成員管理，然后在項(xiàng)目成員下添加新成員

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

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

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

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

現(xiàn)在點(diǎn)擊這個(gè)卡片只是單純的進(jìn)入小程序而已，因?yàn)槲覀冞€沒有加任何信息在里面，接下來我們?cè)?strong>index.js里新增一個(gè)函數(shù)

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

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

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

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

onLoad: function (options)

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

我們?cè)?strong>onLoad函數(shù)里加一句

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

來看看打印出來是什么

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

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

運(yùn)行程序，打開控制臺(tái)可以看到日志

然后我們就可以根據(jù)這兩個(gè)字段的情況來提示用戶是否要加入新的賬本，新增如下函數(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] 用戶點(diǎn)擊確定') } else if (res.cancel) { console.log('[index processInvite] 用戶點(diǎn)擊取消') } }, }) }},

然后在onLoad函數(shù)中調(diào)用該函數(shù)

this.processInvite(options)

編譯運(yùn)行，會(huì)彈出邀請(qǐng)窗口

點(diǎn)擊確定會(huì)在控制臺(tái)打印出信息

點(diǎn)擊取消亦是如此

---

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

總結(jié)

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

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