話不多說,先看效果圖個(gè)人覺得先看官方文檔,了解它有什么,再開始動(dòng)手寫效果會(huì)好點(diǎn)。 小程序文件結(jié)構(gòu) 一個(gè)頁面由四個(gè)文件組成,并且四個(gè)文件必須同名 wxml : 頁面結(jié)構(gòu),類似html。 wxss : 頁面樣式表,類似css。 ...
本文作者Harvie_Z ,已經(jīng)獲得授權(quán)
話不多說,先看效果圖
個(gè)人覺得先看官方文檔,了解它有什么,再開始動(dòng)手寫效果會(huì)好點(diǎn)。
一個(gè)頁面由四個(gè)文件組成,并且四個(gè)文件必須同名
在 app.json 文件中注冊(cè)需要加載的頁面、navigationBar和底部tab的各種屬性、網(wǎng)絡(luò)超時(shí)時(shí)間。
注冊(cè)頁面
"pages":[
"pages/index/index",
"pages/index/detail",
"pages/login/login",
"pages/membercenter/membercenter",
"pages/recommend/recommend",
"pages/attention/attention"
],
放在第一的頁面將會(huì)在程序加載完成時(shí)顯示。
配置窗口
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "black",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white",
"backgroundColor": "#eaeaea"
},
這里配置的是所有窗口的顯示樣式,如果某個(gè)頁面需要更改顯示樣式,直接為相應(yīng)的頁面添加一個(gè)json文件配置即可。
其他的json文件只能配置window屬性。
配置tabBar
"tabBar": {
"color": "black",
"borderStyle": "white",
"selectedColor": "rgb(176,170,168)",
"backgroundColor": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "精華",
"iconPath": "images/tabBar/tabBar_essence_click_icon.png",
"selectedIconPath": "images/tabBar/tabBar_essence_icon.png"
},
{
"pagePath": "pages/recommend/recommend",
"text": "推薦關(guān)注",
"iconPath": "images/tabBar/tabBar_new_click_icon.png",
"selectedIconPath": "images/tabBar/tabBar_new_icon.png"
}
}]
},
配置底部tabBar的文字顏色、圖標(biāo)、頁面路徑等,和iOS開發(fā)中設(shè)置tabBar的思路挺像的。
網(wǎng)絡(luò)超時(shí)時(shí)間和調(diào)試開關(guān)
"networkTimeout": {
"request": 10000
},
"debug":true
networkTimeout
配置的是網(wǎng)絡(luò)超時(shí)時(shí)間,這里的時(shí)間單位是毫秒,這里配置的也就是10秒超時(shí)。debug
控制是否開啟調(diào)試,如果開啟了,可以看到log打印。
基本的配置搞定后,就可以開始填內(nèi)容了。
<view class="top-tab">
<view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">
{{item}}
</view>
</view>
wx:for
結(jié)構(gòu)循環(huán)渲染出5個(gè)ItemswitchTab
data-idx
用來記錄每個(gè)Item的索引,以便在點(diǎn)擊的時(shí)候能夠知道是哪個(gè)Item被點(diǎn)擊。
<swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px" >
<!--全部-->
<swiper-item>
<scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData" >
<block wx:for="{{allDataList}}" wx:for-item="item">
<navigator url="detail?id={{item.id}}">
<template is="mainTabCell" data="{{item}}" />
</navigator>
</block>
</scroll-view>
</swiper-item>
...
...
</swiper>
因?yàn)樾枰獧M向分頁滾動(dòng),所以我選擇使用swiper
作為容器,然后再讓每個(gè)swiper-item
包裹一層可以上下滾動(dòng)的scrollView
,再使用wx:for
循環(huán)渲染出列表。
navigator 是導(dǎo)航組件。
template,即模板,作用是定義代碼片段,然后在不同的地方調(diào)用。
小程序中不能操作Dom,動(dòng)態(tài)渲染頁面的唯一方式就是在頁面中綁定數(shù)據(jù),然后在js文件中修改數(shù)據(jù)。比如在第一個(gè)swiper-item
中綁定了一個(gè)數(shù)組allDataList
,當(dāng)在js文件中調(diào)用setData方法修改這個(gè)數(shù)組時(shí),列表也會(huì)被修改。
要使用網(wǎng)絡(luò)數(shù)據(jù)當(dāng)然得先進(jìn)行網(wǎng)絡(luò)訪問,微信已經(jīng)提供了網(wǎng)絡(luò)請(qǐng)求的API。
var that = this;
wx.request({
url: 'http://api.budejie.com/api/api_open.php?a=list&c=data&type=1',
data: {},
method: 'GET',
header: "application/json", // 設(shè)置請(qǐng)求的 header
success: function(res){
console.log(res);
//通過修改綁定的數(shù)組來改變頁面
that.setData({
allDataList: res.data.list
});
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
請(qǐng)求結(jié)果如下
從結(jié)果中可以看出,數(shù)組中裝著的是一個(gè)個(gè)的對(duì)象,我們可以直接通過字段取到他們的值。所以我們?cè)趙xml文件中綁定數(shù)據(jù)的時(shí)候就可以這樣寫:
<view class="top">
<!--頭像-->
<image class="avator" src="{{item.profile_image}}" mode="aspectFit"></image>
<!--標(biāo)題、時(shí)間-->
<view class="title-time">
<text class="title">{{item.name}}</text>
<text class="time">{{item.create_time}}</text>
</view>
<!--更多按鈕-->
<image class="morebtnnormal" src="../../images/index/morebtnnormal.png" mode="center" ></image>
</view>
這樣就直接綁定了頭像 profile_image、名字 name、創(chuàng)建時(shí)間 create_time。其他部分也是用這種方式綁定的。
實(shí)現(xiàn)下拉刷新有兩種方式,第一種是綁定scrollView的bindscrolltoupper
方法
<scroll-view scroll-y bindscrolltoupper="scrolltoupper">
scrolltoupper:function(){
//刷新數(shù)據(jù)
}
還有一種是在Page的onPullDownRefresh
方法中發(fā)出請(qǐng)求刷新數(shù)據(jù)。
//監(jiān)聽用戶下拉動(dòng)作
onPullDownRefresh:function(){
//刷新數(shù)據(jù)
},
上拉加載更多也有兩種方法,第一種是綁定scrollView的bindscrolltolower
方法,但是列表數(shù)量少的時(shí)候,這個(gè)方法不靠譜,經(jīng)常不會(huì)觸發(fā)
<scroll-view scroll-y bindscrolltolower ="scrolltolower">
scrolltolower:function(){
//發(fā)出請(qǐng)求添加數(shù)據(jù)
}
第二種方法是在Page的onReachBottom
方法中發(fā)出請(qǐng)求加載數(shù)據(jù)
onReachBottom:function(){
currentPage++;
//發(fā)出請(qǐng)求添加數(shù)據(jù)
}
首頁 http://api.budejie.com/api/api_open.php?a=list&c=data&type=1
評(píng)論列表 http://api.budejie.com/api/api_open.php?a=dataList&c=comment&data_id=22062938&hot=1
推薦關(guān)注
我的 http://api.budejie.com/api/api_open.php?a=square&c=topic
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)