資訊專欄INFORMATION COLUMN
摘要：前言經(jīng)過將近一個多月的開發(fā)我們團隊開發(fā)的微信小程序出發(fā)吧一起終于開發(fā)完成現(xiàn)在的線上版本為版本文章主要介紹該小程序在開發(fā)中所用到的技術(shù)已經(jīng)在開發(fā)中遇到問題的采取的解決方法開源地址開發(fā)中技術(shù)問題匯總使用的出現(xiàn)問題在小程序開發(fā)過程中我們經(jīng)常會用
前言
經(jīng)過將近一個多月的開發(fā),我們團隊開發(fā)的微信小程序 "出發(fā)吧一起" 終于開發(fā)完成,現(xiàn)在的線上版本為 2.2.4-beta 版本文章主要介紹該小程序在開發(fā)中所用到的技術(shù),已經(jīng)在開發(fā)中遇到問題的采取的解決方法
開源地址
開發(fā)中技術(shù)問題匯總 1.使用e.target.dataset的出現(xiàn)問題在小程序開發(fā)過程中,我們經(jīng)常會用到標(biāo)簽中屬性的屬性值,我們通常會在
此時可以將代碼替換成這樣來獲取值
WXML
JS
bintap:function(e){
var id = e.currentTarget.dataset.id;
}
網(wǎng)上還有一直說法是 data-* 里 * 命名的問題,去掉駝峰式命名,純小寫也能解決
2.小程序 textarea 文本框如何顯示實時字?jǐn)?shù)WXML
{{noteNowLen}}/{{noteMaxLen}}
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 實現(xiàn)模糊查詢
由于我們使用的是 Bmob 后端云提供的數(shù)據(jù)處理與存儲支持，根據(jù) Bmob 提供的開發(fā)文檔，免費版的應(yīng)用無法進行模糊查詢，看到這里，再看看已經(jīng)快完工的活動檢索界面，感受無法言說。正當(dāng)準(zhǔn)備放棄的時候，突然想到一個方法，那就是先把所有的后臺所有數(shù)據(jù)都存到集合里，然后根據(jù)輸入的檢索值一個個匹配，想到之后馬上就開始著手干了，先查了一下javaScript 文檔,String 對象有一個方法是 indexOf() ,可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置,這樣就成了,遍歷 所以數(shù)據(jù),檢索每一條數(shù)據(jù)的每個字符,如果出現(xiàn)了則將它加入到檢索結(jié)果的集合中.
JS
//js 實現(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 || ""; //活動的標(biāo)題
nPos = sTxt.indexOf(strFind);
if (nPos >= 0) {//如果輸入的關(guān)鍵字在該活動標(biāo)題中出現(xiàn)過,則匹配該活動
resultPost.push(smoodList[i]); //將該活動加入到搜索到的活動列表中
}
}
that.setData({
moodList: resultPost
})
}
},
更加詳細(xì)的代碼請前往Github查看
4.使用 JS 將字符串格式的時間轉(zhuǎn)換成幾秒前,幾分鐘前...由于小程序中涉及評論,加入活動,收藏等一系列包括事件時間的功能,而數(shù)據(jù)庫中存的時間格式為 2017-11-30 23:36:10 現(xiàn)在想要在界面上不顯示具體時間,而是顯示與當(dāng)前時間的差,即幾秒前,幾分鐘前等等
實現(xiàn)起來并不復(fù)雜,主要思路是先把字符串的時間轉(zhuǎn)換成時間戳,然后與當(dāng)前的時間戳進行比較,這樣就能轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時前、幾天前等形式了
JS
//字符串轉(zhuǎn)換為時間戳
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;
}
}
5.微信小程序提交表單清空表單數(shù)據(jù)
在發(fā)布活動之后,由于表單中的數(shù)據(jù)沒有清空,給用戶的體驗必定不好,然而小程序的數(shù)據(jù)交互并不像html + jS 那樣,使用 dataSet({}) 來給賦值,視圖層就能通過異步的方式活動到值,于是想到,在提交表單后,給這些input都賦值為空,那樣就實現(xiàn)了清空表單的效果,當(dāng)然,表單中并不只包含input,但是都可以通過這種方式實現(xiàn)清空效果
WXML
JS
submitForm:function(e){
var title = e.detail.value.title;
......
success: function (res) {
//將title值設(shè)置空
that.setData({
title: ""
}
}
}
6.微信號,QQ號,手機號 正則校驗
由于申請加入活動需要填寫真實姓名,聯(lián)系方式等信息,為了防止用戶隨意填寫信息,必須要對這些信息進行校驗
JS
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位中文姓名正則校驗
7.使用 Bmob SDK 實現(xiàn)報名成功發(fā)送模板消息,生成小程序二維碼等
在開發(fā)過程中,由于想要實現(xiàn),當(dāng)用戶報名成功后如何通知用戶,查閱了小程序的開發(fā)文檔發(fā)現(xiàn)有一個發(fā)送模板消息的API,再查詢 Bmob 的開發(fā)文檔,發(fā)現(xiàn)實現(xiàn)了這個功能,這個真的太有用了.模板消息只能再真機上才能發(fā)送成功,經(jīng)過配置,重要成功,但是有在使用中出現(xiàn)一個問題
,就是在小程序發(fā)布后 模板消息中如果帶有 page 參數(shù)將不會發(fā)送,但是在開發(fā)版中能發(fā)送成功, 這個問題已經(jīng)反饋了,估計等Bmob小程序SDK更新后會解決這個問題.
具體代碼我就不寫了,bmob開發(fā)文檔直達(dá)
發(fā)送模板消息
生成小程序二維碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90195.html
摘要：微信小程序應(yīng)用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設(shè)計指南工具小程序開發(fā)者工具官方支持微信小程序?qū)崟r預(yù)覽的支持的微信小程序組件化開發(fā)框架轉(zhuǎn)在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應(yīng)用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設(shè)計指南 工具 小程序開發(fā)者...
摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
閱讀 3143·2021-11-11 16:54
閱讀 2320·2021-09-04 16:48
閱讀 3227·2019-08-29 16:08
閱讀 649·2019-08-29 15:13
閱讀 1354·2019-08-29 15:09
閱讀 2671·2019-08-29 12:45
閱讀 1936·2019-08-29 12:12
閱讀 459·2019-08-26 18:27
