wechat-pinkDiary微信小程序-以粉粉日記APP為參考做的一個日記本。首先,開發(fā)微信小程序你需要準(zhǔn)備好這些工具:下載微信開發(fā)者工具,附上地址:https://mp.weixin.qq.com/debu...下載好后就可以進(jìn)行開發(fā)了,不過呢, ...
微信小程序-以粉粉日記APP為參考做的一個日記本。
首先,開發(fā)微信小程序你需要準(zhǔn)備好這些工具:
下載微信開發(fā)者工具,附上地址:https://mp.weixin.qq.com/debu... 下載好后就可以進(jìn)行開發(fā)了,不過呢,如果要發(fā)布你的小程序呢,你要去申請AppId走各種流程,不過平時練練手可以選擇無Appid進(jìn)行開發(fā),不過會有一些局限。具體開發(fā)詳情你可以去https://mp.weixin.qq.com 這里了解。
在創(chuàng)建了一個微信小程序后,會自動生成一些基本文件:
page文件夾 頁面文件夾 包含你所有的頁面文件,至少包含.js .wxml .wxs后綴文件,.json可選
utlis文件夾 一般放置一些全局需要使用的js文件
app.js 控制全局的邏輯結(jié)構(gòu)
app.json 配置一些全局?jǐn)?shù)據(jù),所有頁面都要在此處注冊
app.wxml 內(nèi)容顯示
app.wxss 全局樣式
下面切入我們的正題:
嘻嘻,先來一波gif圖(好尷尬,動圖太大,加載不出來)那只好來一波圖片啦~
體驗動圖可到源碼查看
"pages":[
"pages/index/index", //首頁,也就是tabBar里“社區(qū)“對應(yīng)的頁面
"pages/my/index", // tabBar“我的”頁面
"pages/detail/index", //首頁推薦內(nèi)容的詳情頁
"pages/new/index", // 編輯日記頁面
"pages/diary/index", //日記列表頁面
"pages/logs/logs"
]
輪播圖
寫日記
話題評論
帶emoji的輸入
上傳圖片
字體大小,顏色改變
地理定位
下拉刷新
tabbar切換良好交互
獲取用戶信息
動態(tài)選擇日記日期
首先,在社區(qū)這一塊,我用到大量數(shù)據(jù)都是用mock來模擬數(shù)據(jù),詳情可見Easy Mock Easy Mock是一個可視化工具,能快速生成模擬數(shù)據(jù)的服務(wù),它能為我們提供一個數(shù)據(jù)接口url,然后使用wx.request({ url: url, .....})來發(fā)送數(shù)據(jù)請求,不得不說mock是前端人員的有力工具。
輪播圖
輪播圖是微信小程序自帶的輪播圖(swiper)組件
HTML結(jié)構(gòu)
<swiper class="swiper_box"
indicator-color="{{indicatorcolor}}"
indicator-active-color="{{indicatoractivecolor}}"
vertical="{{vertical}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
indicator-dots="indicatorDots">
<block wx:for="{{images}}" wx:key="item">
<swiper-item>
<image src="{{item}}" class="slide-image"></image>
</swiper-item>
</block>
</swiper>
js配置
Page({
data: {
indicatorDots:true,
vertical:false,
autoplay:true, //自動輪播
interval:3000, //輪播時間差為3000ms
duration:1200,
indicatorcolor:"#fff", //設(shè)置底部小圓點(diǎn)為白色
indicatoractivecolor:"pink", //當(dāng)圓點(diǎn)狀態(tài)為active是,呈現(xiàn)粉色
......
}
})
tabbar切換良好交互
這個功能實現(xiàn)起來比較簡單,主要是將app.json文件中的tabBar里設(shè)置樣式、頁面路徑、圖片路徑,用列表list來渲染,詳細(xì)請參考以下代碼
"tabBar": {
"color":"#999",
"selectedColor":"#ff71a8",
"borderStyle":"white",
"list": [{
"pagePath": "pages/index/index",
"text": "社區(qū)",
"iconPath": "images/lifeNormal.png",
"selectedIconPath": "images/lifeSelected.png"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "images/myNormal.png",
"selectedIconPath": "images/mySelected.png"
}]
}
寫日記
因為編輯日記和展示日記在兩個不同的頁面,所以兩個頁面之間需要傳遞日記的內(nèi)容,這里我主要是借助wx.setLocalStorage(key:key,value:value)將需要傳遞的數(shù)據(jù)存放到本地緩存中,雖然我們不建議將關(guān)鍵信息全部存在localStorage,以防用戶換設(shè)備的情況。 但是在我們沒有更好的數(shù)據(jù)共享的方式前可以一試。最后我們在日記列表頁面通過wx.getStorage(key)得到我們之前存儲的東西,然后再頁面上顯示出來。在日記列表頁面可以對你的日記進(jìn)行刪除和修改操作,刪除就很簡單了,直接利用wx.clearStorage()將你存儲在localSroage里的數(shù)據(jù)全部清空就可以了。這里可以借助setTimeout來實現(xiàn)一個假的效果,修改的話,就是通過wx.navigateTo()里的url將日記的text作為參數(shù)傳遞給編輯頁面,詳情見代碼:
日記列表頁面代碼:
//modify就是點(diǎn)擊修改按鈕觸發(fā)的事件
modify: function(){
console.log('aaa')
wx.navigateTo({
url:"/pages/new/index?content="+this.data.content
})
}
修改頁面,在onLoad()獲取參數(shù):
onLoad:function(query) {
that.setData({
content:query.content
})
.....
話題評論
頁面展示的話題詳情和已經(jīng)展示的評論是從mock里獲取的數(shù)據(jù),評論功能的實現(xiàn)主要是借助數(shù)組的concat()方法,將你添加的評論和原有的評論連接起來,
首先在data里面我們有個空的commentList來存放新發(fā)布的評論,獲取評論內(nèi)容等在這就不細(xì)講,重點(diǎn)看一下發(fā)布評論的代碼:
submitComment: function() {
var that = this, conArr = [];
//此處延遲的原因是 在點(diǎn)發(fā)送時 先執(zhí)行失去文本焦點(diǎn) 再執(zhí)行的send 事件 此時獲取數(shù)據(jù)不正確 故手動延遲100毫秒
setTimeout(function () {
if (that.data.comment.trim().length > 0) {
conArr.push({
avatar:that.data.avatar, //在onLoad()里通過wx.getUserInfo()獲取了用戶信息
username:that.data.username,
time:util.formatTime(new Date()),
content:that.data.comment, //評論的text包括表情
images:that.data.photos //評論所帶圖片地址
})
that.setData({
commentList: that.data.commentList.concat(conArr),
comment: "",//清空文本域值
photos:[],
isShow: false,
photoShow:false,
})
} else {
that.setData({
comment: "",//清空文本域值
photos:[],
})
}
}, 100)
}
地理定位
我在定位功能的實現(xiàn)中使用了騰訊地圖的定位API,具體使用可參考網(wǎng)址詳細(xì)解析http://lbs.qq.com/qqmap_wx_js... <br/>
但是有3步是必不可少的:
1 申請開發(fā)者密鑰(key):[申請密鑰] http://lbs.qq.com/key.html
2 下載微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0
3 安全域名設(shè)置,需要在微信公眾平臺添加域名地址https://apis.map.qq.com 完成
以上3步,你就可以友好地使用Api了,首先使用wx.getLocation()獲取當(dāng)前用戶位置的
經(jīng)緯度,然后通過逆地址解析獲取當(dāng)前的具體位置,這里就是使用騰訊位置服務(wù)平臺提的
reverseGeocoder接口,在逆地址解析結(jié)果中獲取省份和城市信息。參考代碼:
getLocation: function() {
let that=this;
wx.getLocation({ //首先獲得經(jīng)緯度
type: 'wgs84',
success:(res)=> {
var latitude = res.latitude
var longitude = res.longitude
demo.reverseGeocoder({ //然后借助騰訊位置服務(wù)提供個逆地址解析api將經(jīng)緯度轉(zhuǎn)換成具體的地址
location:{
latitude,
longitude
},
success: function(res) {
console.log(res.result)
var location=res.result.address_component.province+res.result.address_component.city
that.setData({
location,
locationStyle:'background-image:url(./../../images/blue.png);color:#1296db;'
});
wx.setStorage({
key:"location",
data:location
})
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
});
}
})
}
下拉刷新評論
這里主要是借助了微信小程序的視圖容器scroll-view,可滾動區(qū)域,設(shè)置屬性scroll-y="true",表示可沿著y軸滾動,需要注意使用豎向滾動時,需要給<scroll-view/>一個固定高度,我這里是通過wx.getSystemInfo()得到windowHeight,然后將固定高度設(shè)置為和windowHeight一樣。當(dāng)滾動到評論底部時,會觸發(fā)會觸發(fā) scrolltolower 事件,在事件對應(yīng)的處理方法里我們將預(yù)先設(shè)置好的評論信息加載到頁面上。這樣就形成一個下拉加載的效果。參考代碼:
//哈哈,方法命名有點(diǎn)粗糙~
refresh:function(){
console.log('bottom')
let that = this,conArr = []
if (that.data.refreshTime < 3) { //refreshTime是在data里定義的一個常量,用來控制加載次數(shù),這里最多3次
for(let i=0;i<3;i++){
conArr.push({
'avatar':'../../images/avatar.jpg',
'username':'西瓜君',
'content':'簡直66666',
'time':util.formatTime(new Date()) //獲取當(dāng)前時間,utils文件夾下的util.js里定義了formateTime()方法,詳情見源碼~
})
}
wx.showToast({ //顯示加載提示框
title: '加載中',
icon: 'loading',
duration: 3000
})
setTimeout(function () {
that.setData({
commentList: that.data.commentList.concat(conArr)
})
},3000)
} else {
that.setData({
nodata:true
})
}
++that.data.refreshTime;
}
上傳圖片
通過wx.chooseImage(OBJECT)來從本地相冊選擇圖片或使用相機(jī)拍照,具體參數(shù)如圖:
主要代碼:
wx.chooseImage({
count: 1, // 默認(rèn)9 表示可選擇圖片的數(shù)量
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
this.setData({
photos: tempFilePaths
})
}
})
.....
帶emoji輸入框
這里首先我們需要在data里定義一個emojiChar,注意這個emojiChar是有一大串可愛表情連起來的字符串,具體可以看下面的js代碼,首先我們通過split()將字符串emojiChar切割成一個表情數(shù)組emChar[],但是這些表情不是顯示在表情框中的表情形式,我們需要將他們轉(zhuǎn)化成上圖所示的qq和微信的原始表情展示。每一個表情都有相應(yīng)的字符編碼,但是其實我們這里并不是使用正則來轉(zhuǎn)換成實體字符,這里我們是通過image將所有的表情以圖片的形式顯示出來,這里的圖片訪問地址從別人的項目里借鑒過來的,具體見代碼。完成了emoji顯示,接下來的就是實現(xiàn)當(dāng)點(diǎn)擊emoji時,將它顯示到input文本域中。但是其實這里呈現(xiàn)出來的是我們之前在emojiChar里定義的表情樣式,通過dataSet傳遞所選中的表情,詳情見js代碼的emojichoose()方法。完成以上這些,一個可愛的小型emoji輸入框就是實現(xiàn)啦~
HTML結(jié)構(gòu):
<!-- emoji表情盒子 -->
<view class="emoji-box {{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {{isLoad ? 'no-emoji-move' : ''}}" >
<scroll-view scroll-y="true" bindscroll="emojiScroll" style="height:200px">
<block wx:for="{{emojis}}" wx:for-item="e" wx:key="">
<view class="emoji-cell">
<image class="touch-active" bindtap="emojiChoose"
src="http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/{{e.emoji}}.png"
data-emoji="{{e.char}}"
data-oxf="{{e.emoji}}">
</image>
</view>
</block>
</scroll-view>
</view>
js控制
Page({
data: {
.......
emojiChar: "?-
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)