我是一名安卓程序員，以前沒(méi)有接觸過(guò)前端開(kāi)發(fā)，直到有幸接手了公司的小程序項(xiàng)目。小程序?qū)W起來(lái)還是很快的，對(duì)于有編程經(jīng)驗(yàn)的人，看著示例代碼，對(duì)照著官方文檔，幾天就能上手了。
自從接觸了小程序，一直想做一個(gè)自己的東西，要是每天有點(diǎn)人用就更好了。
有一天和我家寶寶玩成語(yǔ)接龍，突然想到，我可以做一個(gè)成語(yǔ)接龍的小程序??！
產(chǎn)品
琢磨了兩天，大概想做成這樣：
接龍可以有「所有人可參與」、「指定群成員參與」等類型
不校驗(yàn)是否是成語(yǔ)，否則就無(wú)法使用「印賊做父」了
成語(yǔ)的讀音，還是要校驗(yàn)一下的
難免會(huì)有人亂填，所以每條成語(yǔ)可以贊，也可以踩
在有一定數(shù)據(jù)量后可以增加排行榜
設(shè)計(jì)
想法有了，還有兩件比較棘手的事：
起個(gè)牛逼的名字
求我家寶寶給我畫(huà)設(shè)計(jì)圖
我想過(guò)很多名字，「成語(yǔ)接龍吧」、「接下去」、「接吧」、「接一個(gè)」...
寶寶：low 爆了，叫「碰詞」，碰也有接的意思，成語(yǔ)也是個(gè)詞嘛
這么 6 的名字居然有人先想到了，于是最終決定用「碰詞er」
隨便放兩張?jiān)O(shè)計(jì)圖，美如畫(huà)啥的就不說(shuō)了：
下面說(shuō)一下在開(kāi)發(fā)方面，幾個(gè)我認(rèn)為值得一提的地方。
獲取用戶信息
現(xiàn)在大部分的小程序都是一打開(kāi)，就彈出用戶信息授權(quán)框，有的甚至強(qiáng)制需要授權(quán)才可使用。我之前做的一個(gè)也是需要拿到 unionId 去登錄才能使用的，為此我還寫(xiě)過(guò)一篇文章說(shuō)明如何實(shí)現(xiàn)。
但顯然，微信認(rèn)為這是一個(gè)很不好的體驗(yàn)。在用戶沒(méi)有接觸你的小程序之前，憑什么要信任你，把自己的用戶信息暴露給你。
為了規(guī)范用戶信息的獲取，官方出了這篇文章：獲取用戶信息方案介紹（FAQ 里面有兩個(gè)問(wèn)題還是我提的）
剛好拿這個(gè)小程序來(lái)實(shí)踐一下。
首先，明確什么情況下需要用到用戶信息。這里需要用戶信息顯示在成語(yǔ)旁，所以在創(chuàng)建接龍或者發(fā)送成語(yǔ)之前，需要先獲取到用戶信息。如果你只是進(jìn)來(lái)看看，是不需要你任何授權(quán)的，只有點(diǎn)擊了創(chuàng)建接龍的按鈕，或者發(fā)送成語(yǔ)的按鈕，才會(huì)彈出授權(quán)提示框。
我是這樣做的。沒(méi)有用戶信息時(shí)，設(shè)置 button 的 open-type 為 getUserInfo，點(diǎn)擊會(huì)觸發(fā)用戶信息的獲取。要是已經(jīng)有用戶信息了，則是一個(gè)普通的跳轉(zhuǎn)按鈕：
<view class="create-button">
<button wx:if="{{hasUserInfo}}" class="button" bindtap="navigateToCreate">
<image class="img" src="/images/icon_add.png" mode="aspectFit"/>
</button>
<button wx:else class="button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
<image class="img" src="/images/icon_add.png" mode="aspectFit"/>
</button>
</view>
當(dāng)用戶確定授權(quán)了，可以在 bindgetuserinfo 綁定的方法里，用 e.detail.userInfo 拿到用戶信息。
但還有個(gè)問(wèn)題，open-type="getUserInfo" 要到基礎(chǔ)庫(kù) 1.3.0 才能用，最好還是做一下低版本兼容處理。
群能力
目前，小程序已經(jīng)支持獲取到微信群的群 id 和顯示群名。
當(dāng)用戶創(chuàng)建的接龍類型是指定群成員參與時(shí)，指定的群就是第一個(gè)轉(zhuǎn)發(fā)到的群。而成員也只有通過(guò)這個(gè)群的分享進(jìn)入小程序，才可參與接龍。下面說(shuō)說(shuō)這兩種情況是如何獲取到群 id 的。
在可分享的頁(yè)面，調(diào)用 wx.showShareMenu() 顯示轉(zhuǎn)發(fā)按鈕。添加 onShareAppMessage 方法，并在里面設(shè)置分享信息：
onShareAppMessage: function () {
var that = this
return {
title: "一起來(lái)玩成語(yǔ)接龍！",
path: 'pages/xxx/xxx?id=' + this.data.id,
success(res) {
that.getShareInfo(res.shareTickets[0])
}
}
}
在 getShareInfo 方法里，需要獲取到分享信息，現(xiàn)在能獲取到的只有群 id：
wx.getShareInfo({
shareTicket: shareTicket,
success(res) {
// 解密獲取到 openGId
}
})
這里和 getUserInfo 一樣，拿到的數(shù)據(jù)是加密的，需要將 res.encryptedData 和 res.iv 傳給后臺(tái)解密。加密方式和 userInfo 是一樣的，所以可以用同一個(gè)接口解密。解密后的 openGId 就是我們要的群 id。
至于從微信群進(jìn)入的情況，我們需要對(duì) app.js 的 onLaunch 方法動(dòng)手。在 onLaunch 方法里可以獲取到一個(gè)場(chǎng)景值，它區(qū)分了各種進(jìn)入小程序的場(chǎng)景，各種場(chǎng)景值說(shuō)明可以在這里查到。其中可以看到：
當(dāng)場(chǎng)景值為 1044 時(shí)，我們就可能獲取到攜帶的 shareTicket：
onLaunch: function (ops) {
if (ops != null && ops.scene == 1044) {
this.globalData.shareTicket = ops.shareTicket
}
}
之后再對(duì)這個(gè) shareTicket 進(jìn)行解密，獲取 openGId，判斷用戶是否可參與。
聊天列表
從設(shè)計(jì)圖可以看到，成語(yǔ)列表是置底的，類似微信聊天的效果。但列表都是默認(rèn)置頂?shù)?，如何讓它置底呢?/p>
其實(shí)很簡(jiǎn)單，這里利用了 scroll-view 組件的 scroll-into-view 屬性：
注意這里有個(gè)細(xì)節(jié)，id 不能以數(shù)字開(kāi)頭，但我的 id 就是數(shù)字開(kāi)頭的怎么辦？前面隨便加個(gè)字母就好了：
<scroll-view class="scroll" scroll-y="true" scroll-into-view="x{{toView}}">
<!-- ...... -->
</scroll-view>
item 的 id 前面也記得加個(gè) x。
然后在獲得頁(yè)面數(shù)據(jù) setData 之后，將列表定位到底部：
setTimeout(function () {
that.setData({
toView: list[list.length - 1].id
})
}, 300)
這里的延時(shí)是不可少的，因?yàn)轫?yè)面渲染需要點(diǎn)時(shí)間，不同性能的手機(jī)需要的時(shí)間還不一樣?？催^(guò)幾臺(tái)手機(jī)，300 毫秒應(yīng)該是比較合適的。
如果要實(shí)現(xiàn)滑動(dòng)到頂部加載更多的話，可以用上 bindscrolltoupper 這個(gè)屬性：
獲取更多后，將 toView 設(shè)置為新獲取到的列表最后一項(xiàng)的 id。
浮動(dòng)按鈕
首頁(yè)右下角的按鈕美如畫(huà)，但是它會(huì)造成一定的遮擋。
安卓里有一個(gè)叫 FloatActionButton 的控件，當(dāng)列表滾動(dòng)時(shí)，可以向下移動(dòng)隱藏，我嘗試在小程序里實(shí)現(xiàn)類似的效果。
我覺(jué)得遮擋其實(shí)只對(duì)列表最底部有影響，所以當(dāng)列表滾到底部時(shí)隱藏就好了，發(fā)生滾動(dòng)再顯示。
在不使用 scroll-view 的情況下，頁(yè)面觸底會(huì)觸發(fā) onReachBottom 方法，滾動(dòng)會(huì)觸發(fā) onPageScroll 方法，所以這個(gè)功能可以這樣實(shí)現(xiàn)：
js
onReachBottom: function (event) {
// 隱藏按鈕，避免遮擋
this.setData({
showBtn: false
})
},
onPageScroll: function (event) {
// 顯示創(chuàng)建按鈕
this.setData({
showCreateBtn: true
})
}
wxml
<view class="button {{showBtn?'show-button':'hide-button'}}"/>
wxss
.show-button {
transform: translateY(0);
transition: 0.3s;
}
.hide-button {
transform: translateY(180rpx);
transition: 0.3s;
}
是不是很簡(jiǎn)單，效果還不錯(cuò)：
但是這里面有兩個(gè)坑：
在開(kāi)發(fā)工具上沒(méi)什么問(wèn)題，但在真機(jī)上，列表到達(dá)底部觸發(fā) onReachBottom 之后，居然還會(huì)觸發(fā) onPageScroll。我的做法是在 onReachBottom 之后的三百毫秒內(nèi)不顯示按鈕。
在列表高度不滿屏幕高度時(shí)，向上滑動(dòng)列表，也會(huì)觸發(fā) onReachBottom，但是不會(huì)觸發(fā) onPageScroll，導(dǎo)致隱藏后就不會(huì)再顯示了。解決方法是，可以先判斷列表是否可滾動(dòng)，不可滾動(dòng)的情況下不隱藏按鈕。
總結(jié)
剛開(kāi)始，在沒(méi)有推廣的情況下，在我身邊的人都不愿意玩的情況下，每天會(huì)有一兩百個(gè)新用戶。在上次知曉程序推薦過(guò)后，現(xiàn)在居然每天有一兩千個(gè)新用戶！流量費(fèi)都快給不起了，非常感謝大家的捧場(chǎng)。
最后，感謝我家寶寶做了這么好看的設(shè)計(jì)圖。
