前言
經(jīng)過將近一個(gè)多月的開發(fā),我們團(tuán)隊(duì)開發(fā)的微信小程序 "出發(fā)吧一起" 終于開發(fā)完成,現(xiàn)在的線上版本為 2.2.4-beta 版
本文檔主要介紹該小程序在開發(fā)中所用到的技術(shù),已經(jīng)在開發(fā)中遇到問題的采取的解決方法
-
原文鏈接（轉(zhuǎn)載請(qǐng)注明出處）： 微信小程序：出發(fā)吧一起
小程序簡(jiǎn)介
“讓興趣不再孤單，讓愛好不再流浪” 是微信小程序《出發(fā)吧一起》的主題，這款小程序旨在解決當(dāng)代大學(xué)生在校園生活中的孤獨(dú)感，讓大家找到志同道合的朋友，在跑步、健身、競(jìng)賽等活動(dòng)中找到伙伴。利用小程序即開即用，用完就走的特點(diǎn)與交友相結(jié)合，它將會(huì)是一款高效快捷、無負(fù)擔(dān)的線下交友利器
本小程序由bmob 后端云提供數(shù)據(jù)處理與存儲(chǔ)支持
小程序碼
開發(fā)中技術(shù)問題匯總
1.使用e.target.dataset的出現(xiàn)問題
在小程序開發(fā)過程中,我們經(jīng)常會(huì)用到標(biāo)簽中屬性的屬性值,我們通常會(huì)在 <view> 中 設(shè)置 data-*="{{XXX}}" 然后在 JS 里通過 e.target.dateset.* 來獲取 XXX 值,但是我經(jīng)常遇到獲取的是 undefined ,使用 console.log(e) 查看輸出信息會(huì)發(fā)現(xiàn),在 e 對(duì)象中包含兩個(gè)對(duì)象分別是 currentTarget 和 target ,而往往有些時(shí)候數(shù)據(jù)在 currentTarget 中,
此時(shí)可以將代碼替換成這樣來獲取值
- WXML
<view bindtap="bintap" data-id="1"></view>
- JS
bintap:function(e){
var id = e.currentTarget.dataset.id;
}
網(wǎng)上還有一直說法是 data-* 里 * 命名的問題,去掉駝峰式命名,純小寫也能解決
2.小程序 textarea 文本框如何顯示實(shí)時(shí)字?jǐn)?shù)
- WXML
<view>
<view>
<textarea name="content" bindinput="bindTextAreaChange" maxlength="{{noteMaxLen}}" />
<view class="chnumber">{{noteNowLen}}/{{noteMaxLen}}</view>
</view>
</view>
- JS
data:{
noteMaxLen: 200,//備注最多字?jǐn)?shù)
noteNowLen: 0,//備注當(dāng)前字?jǐn)?shù)
}
//字?jǐn)?shù)改變觸發(fā)事件
bindTextAreaChange: function (e) {
var that = this
var value = e.detail.value,
len = parseInt(value.length);
if (len > that.data.noteMaxLen)
return;
that.setData({
content: value, noteNowLen: len
})
},
3.利用 JS 實(shí)現(xiàn)模糊查詢
由于我們使用的是Bmob 后端云提供的數(shù)據(jù)處理與存儲(chǔ)支持，根據(jù) Bmob 提供的開發(fā)文檔，免費(fèi)版的應(yīng)用無法進(jìn)行模糊查詢，看到這里，再看看已經(jīng)快完工的活動(dòng)檢索界面，感受無法言說。正當(dāng)準(zhǔn)備放棄的時(shí)候，突然想到一個(gè)方法，那就是先把所有的后臺(tái)所有數(shù)據(jù)都存到集合里，然后根據(jù)輸入的檢索值一個(gè)個(gè)匹配，想到之后馬上就開始著手干了，先查了一下 javaScript 文檔, String 對(duì)象有一個(gè)方法是 indexOf() ,可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置,這樣就成了,遍歷 所以數(shù)據(jù),檢索每一條數(shù)據(jù)的每個(gè)字符,如果出現(xiàn)了則將它加入到檢索結(jié)果的集合中.
- JS
//js 實(shí)現(xiàn)模糊匹配查詢
findEach: function (e) {
var that = this
var strFind = that.data.wxSearchData.value; //這里使用的 wxSearch 搜索UI插件,
if (strFind == null || strFind == "") {
wx.showToast({
title: '輸入為空',
icon: 'loading',
})
}
if (strFind != "") {
var nPos;
var resultPost = [];
for (var i in smoodList) {
var sTxt = smoodList[i].title || ''; //活動(dòng)的標(biāo)題
nPos = sTxt.indexOf(strFind);
if (nPos >= 0) {//如果輸入的關(guān)鍵字在該活動(dòng)標(biāo)題中出現(xiàn)過,則匹配該活動(dòng)
resultPost.push(smoodList[i]); //將該活動(dòng)加入到搜索到的活動(dòng)列表中
}
}
that.setData({
moodList: resultPost
})
}
},
更加詳細(xì)的代碼請(qǐng)前往 Github 查看
4.使用 JS 將字符串格式的時(shí)間轉(zhuǎn)換成幾秒前,幾分鐘前...
由于小程序中涉及評(píng)論,加入活動(dòng),收藏等一系列包括事件時(shí)間的功能,而數(shù)據(jù)庫(kù)中存的時(shí)間格式為 2017-11-30 23:36:10 現(xiàn)在想要在界面上不顯示具體時(shí)間,而是顯示與當(dāng)前時(shí)間的差,即幾秒前,幾分鐘前等等
實(shí)現(xiàn)起來并不復(fù)雜,主要思路是先把字符串的時(shí)間轉(zhuǎn)換成時(shí)間戳,然后與當(dāng)前的時(shí)間戳進(jìn)行比較,這樣就能轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等形式了
- JS
//字符串轉(zhuǎn)換為時(shí)間戳
function getDateTimeStamp(dateStr) {
return Date.parse(dateStr.replace(/-/gi, "/"));
}
//格式化時(shí)間
function getDateDiff(dateStr) {
var publishTime = getDateTimeStamp(dateStr) / 1000,
d_seconds,
d_minutes,
d_hours,
d_days,
timeNow = parseInt(new Date().getTime() / 1000),
d,
date = new Date(publishTime * 1000),
Y = date.getFullYear(),
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds();
//小于10的在前面補(bǔ)0
if (M < 10) {
M = '0' + M;
}
if (D < 10) {
D = '0' + D;
}
if (H < 10) {
H = '0' + H;
}
if (m < 10) {
m = '0' + m;
}
if (s < 10) {
s = '0' + s;
}
d = timeNow - publishTime;
d_days = parseInt(d / 86400);
d_hours = parseInt(d / 3600);
d_minutes = parseInt(d / 60);
d_seconds = parseInt(d);
if (d_days > 0 && d_days < 3) {
return d_days + '天前';
} else if (d_days <= 0 && d_hours > 0) {
return d_hours + '小時(shí)前';
} else if (d_hours <= 0 && d_minutes > 0) {
return d_minutes + '分鐘前';
} else if (d_seconds < 60) {
if (d_seconds <= 0) {
return '剛剛';
} else {
return d_seconds + '秒前';
}
} else if (d_days >= 3 && d_days < 30) {
return M + '-' + D + ' ' + H + ':' + m;
} else if (d_days >= 30) {
return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
}
}
5.微信小程序提交表單清空表單數(shù)據(jù)
在發(fā)布活動(dòng)之后,由于表單中的數(shù)據(jù)沒有清空,給用戶的體驗(yàn)必定不好,然而小程序的數(shù)據(jù)交互并不像 html + jS 那樣,使用 dataSet({}) 來給賦值,視圖層就能通過異步的方式活動(dòng)到值,于是想到,在提交表單后,給這些 input 都賦值為空,那樣就實(shí)現(xiàn)了清空表單的效果,當(dāng)然,表單中并不只包含 input ,但是都可以通過這種方式實(shí)現(xiàn)清空效果
- WXML
<form bindsubmit="submitForm">
<text class="key">活動(dòng)名稱</text>
<input name="title" maxlength="100" value="{{title}}" />
<button formType="submit">確定</button>
</form>
- JS
submitForm:function(e){
var title = e.detail.value.title;
......
success: function (res) {
//將title值設(shè)置空
that.setData({
title: ''
}
}
}
6.微信號(hào),QQ號(hào),手機(jī)號(hào) 正則校驗(yàn)
由于申請(qǐng)加入活動(dòng)需要填寫真實(shí)姓名,聯(lián)系方式等信息,為了防止用戶隨意填寫信息,必須要對(duì)這些信息進(jìn)行校驗(yàn)
- JS
var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); //微信號(hào)正則校驗(yàn)
var qqReg = new RegExp("[1-9][0-9]{4,}"); //QQ號(hào)正則校驗(yàn)
var phReg = /^1[34578]\d{9}$/; //手機(jī)號(hào)正則校驗(yàn)
var nameReg = new RegExp("^[\u4e00-\u9fa5]{2,4}$"); //2-4位中文姓名正則校驗(yàn)
7.使用 Bmob SDK 實(shí)現(xiàn)報(bào)名成功發(fā)送模板消息,生成小程序二維碼等
在開發(fā)過程中,由于想要實(shí)現(xiàn),當(dāng)用戶報(bào)名成功后如何通知用戶,查閱了小程序的開發(fā)文檔發(fā)現(xiàn)有一個(gè)發(fā)送模板消息的API,再查詢 Bmob 的開發(fā)文檔,發(fā)現(xiàn)實(shí)現(xiàn)了這個(gè)功能,這個(gè)真的太有用了.模板消息只能再真機(jī)上才能發(fā)送成功,經(jīng)過配置,重要成功,但是有在使用中出現(xiàn)一個(gè)問題 ,就是在小程序發(fā)布后 模板消息中如果帶有 page 參數(shù)將不會(huì)發(fā)送,但是在開發(fā)版中能發(fā)送成功, 這個(gè)問題已經(jīng)反饋了,估計(jì)等Bmob小程序 SDK 更新后會(huì)解決這個(gè)問題.
具體代碼我就不寫了,bmob開發(fā)文檔直達(dá)
截圖 & GIF
Bmob 數(shù)據(jù)庫(kù)表結(jié)構(gòu)設(shè)計(jì)
用戶表:(_User，自帶表)
|--objectId //Id |--userPic(String) //用戶頭像 |--username(String) //用戶名 |--password(String) //密碼 |--nickname(String) //昵稱 |--sex(Number) //性別 |--userData(Object) //微信登錄用戶數(shù)據(jù) |--eventJoin(Array) //參加的活動(dòng)Id 數(shù)組Array |--eventFavo(Array) //收藏的活動(dòng)Id 數(shù)組Array |--feednum(Number) //反饋次數(shù)
活動(dòng)信息表：(Events)
|--objectId //活動(dòng)Id
|--publisher(Pointer-->_User) //發(fā)起人
|--title(String) //活動(dòng)主題
|--content(String) //活動(dòng)內(nèi)容
|--actpic(File) //活動(dòng)宣傳照片
|--acttype(String) //活動(dòng)類別
{
1：運(yùn)動(dòng),2：游戲,3：交友,
4：旅行,5：讀書,6：競(jìng)賽,
7：電影,8: 音樂,9: 其他
}
|--isShow(Number) //是否公開顯示在首頁(yè)
|--endtime(String) //組隊(duì)截止時(shí)間
|--address(String) //活動(dòng)地點(diǎn)
|--latitude(Number) //地址緯度
|--longitude(Number) //地址經(jīng)度
|--peoplenum(String)//人數(shù)限制
|--likenum(Number) //點(diǎn)贊數(shù)
|--liker(Array) //點(diǎn)贊人Id集合
|--commentnum(Number) //評(píng)論數(shù)
|--joinnumber(Number) // 現(xiàn)在參加的人數(shù)
|--joinArray(Array) // 現(xiàn)在參加的人集合
活動(dòng)信息擴(kuò)展表:(EventMore)
|--objectId //活動(dòng)信息擴(kuò)展表Id |--event(Pointer-->Events) //活動(dòng) |--Status(Number) //活動(dòng)狀態(tài),(1:準(zhǔn)備中,2:進(jìn)行中,3:已結(jié)束) |--Statusname(String) //活動(dòng)狀態(tài)名稱 |--qrcode(File) //活動(dòng)群聊二維碼
評(píng)論表：(Comments)
|--objectId //評(píng)論Id |--publisher(Pointer-->_User) //評(píng)論發(fā)布者 |--olderUsername(String) //上一條評(píng)論人昵稱 |--olderComment(Pointer-->Comments) //上一條評(píng)論 |--event(Pointer-->Events) //評(píng)論的活動(dòng) |--content(String) //評(píng)論內(nèi)容
點(diǎn)贊表：(Likes)
|--objectId //點(diǎn)贊的Id |--liker(Pointer-->_User) //點(diǎn)贊人 |--event(Pointer-->Events) //點(diǎn)贊的活動(dòng)
收藏表:(Favos)
|--objectId //收藏的Id |--favor(Pointer-->_User) //收藏者 |--event(Pointer-->Events) //收藏的活動(dòng)
消息通知表:(Plyre)
|--objectId //消息通知的Id
|--fid(String) //活動(dòng)發(fā)布者Id(被贊或者被取消贊的人的ID,或者被回復(fù),被評(píng)論的人的ID)(被通知的人)
|--uid(Pointer-->_User) //消息通知人
|--wid (String) //被贊，或者取消贊，被評(píng)論，或者被回復(fù)，加入，取消加入的活動(dòng)id
|--avatar (String) //消息通知人的頭像
|--username (String) //消息通知人的姓名
|--is_read(Number) //這條消息是否已讀（1代表已讀，0代表未讀）
|--bigtype(Number) //消息通知大類(1代表消息，2代表通知)
|--behavior(Number) //(消息提醒類型)
{
1：贊
2：取消贊
3：被評(píng)論
4：被回復(fù)
5：加入活動(dòng)
6：取消加入活動(dòng)
7：修改了加入信息
}
活動(dòng)聯(lián)系表:(Contact)
|--objectId //聯(lián)系表Id |--publisher(Pointer-->_User) //活動(dòng)發(fā)布者 |--currentUser (Pointer-->_User) //當(dāng)前用戶 |--event(Pointer-->Events) //想要加入的活動(dòng) |--realname (String) //真實(shí)姓名 |--contactWay(String) //聯(lián)系方式(微信號(hào),手機(jī)號(hào),QQ號(hào)) |--contactValue(String) //聯(lián)系方式的號(hào)碼
