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