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