微信小程序基本組件和API已擼完，總歸要回到正題的，花了大半天時間做了個精簡版的百思不得姐，包括段子，圖片，音頻，視頻，四個模塊。這篇就帶著大家簡述下這個小的APP，源碼會放到GitHub上歡迎start。
項目中我能學(xué)到什么？
app.json全局配置文件
{ "pages":[ "pages/word/word", "pages/image/image", "pages/voice/voice", "pages/video/video", "pages/detail/detail" ], "tabBar": { "color": "#a9b7b7", "selectedColor": "#eb4f38", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/word/word", "text": "段子", "iconPath": "image/wordN.png", "selectedIconPath": "image/wordS.png" }, { "pagePath": "pages/image/image", "text": "圖片", "iconPath": "image/imageN.png", "selectedIconPath": "image/imageS.png" }, { "pagePath": "pages/voice/voice", "text": "聲音", "iconPath": "image/voiceN.png", "selectedIconPath": "image/voiceS.png" }, { "pagePath": "pages/video/video", "text": "視頻", "iconPath": "image/videoN.png", "selectedIconPath": "image/videoS.png" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#eb4f38", "navigationBarTextStyle":"white" }} 
這里我們只要配置下程序全局屬性，每個頁面需要在pags屬性中引入，有時候tabbar不顯示有可能是因為這個，tabbar底部導(dǎo)航Item分為四個就是list里面的，這里主要配置選中未選中顏色背景色及每個底部選項頁面頁面引入和圖片引入。window 屬性主要配置窗體整體的顏色文字顏色和背景色，這里的window屬性會被每個頁面的window屬性給覆蓋。
app.wxss
/*整體view樣式*/.containsView{ padding: 15rpx 15rpx 15rpx 15rpx; margin-top: 15rpx; margin-bottom: 15rpx; background-color: white;}/*頭部整體樣式*/.topContainsView{ display: flex; flex-direction: row; align-items: center; margin-bottom: 18rpx;}/** * 頭像樣式*/.profileImage{ width: 60rpx; height: 60rpx; border-radius: 30rpx;}/*頭部顯示名字和時間整體樣式*/.topRightView{ margin-left: 15rpx; display: flex; flex-direction: column;}/*用戶名稱樣式*/.topRightName{ font-size: 18rpx;}/*時間樣式*/.topRightTime{ font-size: 14rpx; color: #b8b2b2; margin-top: 10rpx;}/*因為中間部分不一樣不放在整體樣式中*//*底部view整體樣式*/.bottomView{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}/*每個Item樣式*/.bottomItemView{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 18rpx; padding-left: 10rpx; padding-right: 10rpx;}/*Item樣式中的圖標(biāo)樣式 頂 踩 分享 評論*/.bottomItemImage{ width: 45rpx; height: 45rpx;}/*Item中的文字樣式 頂 踩 分享 評論*/.bottomItemText{ font-size: 15rpx; color: #b8b2b2; margin-left: 10rpx; margin-top: 8rpx;}/*分割線樣式*/.divLine{ background: #f3f3f3; width: 100%; height: 15rpx;} 
app.wxss我將四個模塊分為三個部分 頭部，內(nèi)容區(qū)域， 底部因為每個頁面頭部，底部樣式都一樣而中間部分不一樣所以我把1，3抽到全局中，注釋比較清晰
段子模塊
word.wxml
<loading hidden="{{loadingHidden}}">正在加載...</loading><scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割線 --> <view class="divLine"></view> <!-- 整體item樣式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <!-- 中間內(nèi)容 --> <text class="centerContent">{{item.text}}</text> <!-- 底部view樣式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block></scroll-view>外層我們用scroll-view包裹以實現(xiàn)加載更多和上拉刷新 bindscrolltoupper=”bindscrolltoupper” 這個屬性當(dāng)滑動到頂部會調(diào)用這個方法bindscrolltolower=”bindscrolltolower”這個則滑到底部會調(diào)用，起始這里還可以將頭部和底部布局抽出來通過引入方式使用，就不用四個頁面都寫了，自己可以弄下
word.js
Page({ data: { list: [], maxtime: '', loadingHidden: false }, onLoad: function (options) { // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) //加載最新 this.requestData('newlist'); }, /** * 上拉刷新 */ bindscrolltoupper: function () { //加載最新 // this.requestData('newlist'); }, /** * 加載更多 */ bindscrolltolower: function () { console.log('到底部') //加載更多 this.requestData('list'); }, /** * 請求數(shù)據(jù) */ requestData: function (a) { var that = this; console.log(that.data.maxtime) wx.request({ url: 'http://api.budejie.com/api/api_open.php', data: { a: a, c: 'data', maxtime: that.data.maxtime, type: '29', }, method: 'GET', success: function (res) { console.log(res) console.log('上一頁', that.data.list) that.setData({ // 拼接數(shù)組 list: that.data.list.concat(res.data.list), loadingHidden: true, maxtime: res.data.info.maxtime }) } }) }, onReady: function () { // 頁面渲染完成 }, onShow: function () { // 頁面顯示 }, onHide: function () { // 頁面隱藏 }, onUnload: function () { // 頁面關(guān)閉 }}) 
這里通過requestData方法加載數(shù)據(jù)，這個方法接受個參數(shù)，就是通過這個參數(shù)加載最新還是更多，通過maxtime這個參數(shù)去加載下一頁，上一頁的maxtime作為加載下一頁的條件， 加載下一頁數(shù)據(jù)我們通過concat方法將數(shù)組進(jìn)行拼接，并改變加載狀態(tài)loading。word.wxml和word.json中一個設(shè)置內(nèi)容字體大小，一個設(shè)置導(dǎo)航條字，就不貼了。
圖片模塊
image.wxml
<loading hidden="{{loadingHidden}}">正在加載...</loading><scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割線 --> <view class="divLine"></view> <!-- 整體item樣式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <text style="font-size: 30rpx">{{item.text}}</text> <!-- 當(dāng)時gif圖 --> <view wx:if="{{item.is_gif != 0}}" style="position: relative;"> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> </view> <!-- 普通大圖 可點擊查看全部圖片 --> <view data-url="{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}" bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}" style="position: relative;"> <!-- 圖片資源 --> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> <!-- 圖片上浮動的點擊查看詳情圖片view --> <view class="flexView"> <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" /> <text class="flexText">點擊查看全圖</text> </view> </view> <!-- 底部view樣式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block></scroll-view> 
這里主要看中間部分我們通過是否是gif來區(qū)分處理圖片，不是gif可以點擊查看大圖，這里有個view懸浮效果，結(jié)合界面和image.wxss看
image.wxss
/*中間文字樣式*/.centerContent{ margin-top: 20rpx; width: 100%; height: 600rpx;}/*中間浮動文字樣式*/.flexView{display: flex;justify-content: center;align-items: center;width: 100%;height: 80rpx;position: absolute;z-index: 2;top: 540rpx;background: #000000;opacity: 0.6}/*浮動文字*/.flexText{ color: white; font-size: 35rpx;}image.js
var detail = '../detail/detail'Page({ data: { list: [], maxtime: '', loadingHidden: false }, onLoad: function (options) { // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) this.requestData('newlist'); }, /** * 滾動到底部時加載下一頁 */ bindscrolltolower: function () { console.log('到底部') this.requestData('list'); }, /** * 加載數(shù)據(jù) */ requestData: function (a) { var that = this; wx.request({ url: 'http://api.budejie.com/api/api_open.php', data: { a: a, c: 'data', // 上一頁的maxtime作為加載下一頁的條件， maxtime: this.data.maxtime, type: '10', }, method: 'GET', success: function (res) { console.log(res) console.log('上一頁', that.datalist) that.setData({ // 拼接數(shù)組 list: that.data.list.concat(res.data.list), loadingHidden: true, maxtime: res.data.info.maxtime }) } }) }, /** * 查看大圖 */ lookBigPicture: function (e) { console.log(e); console.log(e.currentTarget.id) //圖片url 對應(yīng)wxml中data-url="{{item.url}}" var url = e.currentTarget.dataset.url; //獲取圖片高度 對應(yīng)wxml中data-height="{{item.height}}" var height = e.currentTarget.dataset.height; //獲取圖片高度 對應(yīng)wxml中data-width="{{item.width}}" var width = e.currentTarget.dataset.width; // 傳參方式向GET請求 wx.navigateTo({ url: detail + '?' + 'url=' + url + "&height=" + height + "&width=" + width, success: function (res) { console.log(res) }, fail: function (err) { console.log(err) }, }) }, onReady: function () { // 頁面渲染完成 }, onShow: function () { // 頁面顯示 }, onHide: function () { // 頁面隱藏 }, onUnload: function () { // 頁面關(guān)閉 }})這里主要看lookBigPicture方法 view data-url=”{{item.cdn_img}}” data-height=”{{item.height}}” data-width=”{{item.width}}”會在邏輯代碼中裝換成.語法使用 var url = e.currentTarget.dataset.url; 傳值調(diào)轉(zhuǎn)則向GET發(fā)送請求一樣按照格式來就行了
音頻和視頻模塊大致雷同看代碼去吧！！！
地址： https://github.com/shuncaigao/BS 歡迎start
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
