前言
這是一個基礎版本，做的有些糙，歡迎給出意見及建議，後續會繼續完善
關於微信小程式開發前期的準備工作及一些介紹此處就不再贅述，可以去閱讀官方文件
小程式的api介面都來自於玩Android 開放API
小程式的圖示都來自於Iconfont-阿里巴巴向量圖示庫
關於小程式的UI，有參考其他app或小程式的介面
對了~先來放一張小程式的主頁
本文的程式碼是關聯在一個測試賬號下的，但是本人上架了一個相同的個人版小程式，歡迎掃碼體驗，後期還有功能會繼續完善，鑑於個人版本無法使用web-view，點選之後很多都是複製對應文章的連結。
一、建立頁面
說是建立頁面，但是這裡只能建立最外層的大頁面，畢竟小程式是VM模式，詳細頁面顯示還需要請求的資料回來之後在wxml檔案裡面去解析 由上圖可以看見有五個大的TAB頁面，所以我們需要在小程式pages目錄下建立五個類似於下圖的五個資料夾
注意：每次建立完一個新的頁面需要在app.json檔案中進行註冊，類似於安卓建立一個新的activity需要去AndroidManifest.xml中去註冊
"tabBar": {
"selectedColor": "#1296db",
"color": "#2c2c2c",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"text": "首頁",
"iconPath": "pages/images/home_normal.png",
"selectedIconPath": "pages/images/home_select.png"
},
{
"pagePath": "pages/system/system",
"text": "體系",
"iconPath": "pages/images/system_normal.png",
"selectedIconPath": "pages/images/system_select.png"
},
{
"pagePath": "pages/hot/hot",
"text": "熱搜",
"iconPath": "pages/images/hot_normal.png",
"selectedIconPath": "pages/images/hot_select.png"
},
{
"pagePath": "pages/project/project",
"text": "專案",
"iconPath": "pages/images/project_normal.png",
"selectedIconPath": "pages/images/project_select.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "pages/images/mine_normal.png",
"selectedIconPath": "pages/images/mine_select.png"
}
]
},
複製程式碼-----------------以下操作全部以首頁home頁面的實現為例來講解-----------------
二、請求資料
鑑於api介面都是以http打頭，但是微信小程式規定是所有請求地址都需要是https的，方便測試可以勾選下圖方框中的選項。
//載入資料
loadData() {
var that = this
wx.request({ //請求文章列表資料
url: "http://www.wanandroid.com/article/list/" + this.data.pageNum + "/json",
data: {},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
if (res.data.errorCode == 0) {
var responseList = [];
// console.log('success')
that.data.isFirstRequest ? responseList = res.data.data.datas : responseList = that.data.articles.concat(res.data.data.datas)
that.setData({
articles: responseList
})
wx.hideLoading();
// 隱藏導航欄載入框
wx.hideNavigationBarLoading();
// 停止下拉動作
wx.stopPullDownRefresh();
// that.setData({
// articles: res.data.data.datas
// })
} else {
console.log('獲取失敗');
}
}
})
},
複製程式碼貼出home.js全部程式碼
home.js
var app = getApp();
Page({
/**
* 頁面的初始資料
*/
data: {
isFirstRequest: true,
BannerData: [],
swiperCurrent: 0,
articles: [],
pageNum: 0
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function(options) {
var that = this
wx.request({ //請求banner的資料
url: app.globalData.HomeBannerUrl, //這裡是在app.js的globalData中宣告的，如同java中的全域性變數
data: {},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
if (res.data.errorCode == 0) {
that.setData({
BannerData: res.data.data
})
} else {
console.log('獲取失敗');
}
}
})
this.setData({
isFirstRequest: true
}),
this.loadData()
},
//載入資料
loadData() {
var that = this
wx.request({ //請求banner下面的文章列表資料
url: "http://www.wanandroid.com/article/list/" + this.data.pageNum + "/json",
data: {},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
if (res.data.errorCode == 0) {
var responseList = [];
// console.log('success')
that.data.isFirstRequest ? responseList = res.data.data.datas : responseList = that.data.articles.concat(res.data.data.datas)
that.setData({
articles: responseList
})
wx.hideLoading();
// 隱藏導航欄載入框
wx.hideNavigationBarLoading();
// 停止下拉動作
wx.stopPullDownRefresh();
// that.setData({
// articles: res.data.data.datas
// })
} else {
console.log('獲取失敗');
}
}
})
},
//輪播圖的切換事件
swiperChange: function(e) {
this.setData({
swiperCurrent: e.detail.current
})
},
//輪播圖點選事件
swipclick: function(e) {
console.log(e.currentTarget.dataset)
app.globalData.webUrl = e.currentTarget.dataset.data.url
// app.globalData.fromWhere='homeBanner'
wx.navigateTo({
url: '../web/web'
});
},
//首頁列表點選事件
articleClick: function(e) {
console.log(e.currentTarget.dataset)
app.globalData.webUrl = e.currentTarget.dataset.data.link
// app.globalData.fromWhere = 'homearticles'
wx.navigateTo({
url: '../web/web'
});
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function() {//下拉重新整理
var that = this;
wx.showNavigationBarLoading();
that.setData({
pageNum: 0,
isFirstRequest: true
}),
that.loadData()
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function() {//上拉載入更多
var that = this;
wx.showLoading({
title: '玩命載入中',
})
that.setData({
pageNum: that.data.pageNum + 1, //頁碼增加請求更多
isFirstRequest: false
}),
that.loadData()
},
})
複製程式碼請求資料是很簡單的，就幾行程式碼就可以完成，複雜的是資料回來如何顯示的問題。
三、解析資料+詳細頁面展示
前面請求資料已經涉及到了home.js，下面的操作將涉及home.wxml和home.wxss
VM模式，資料在home.js裡面請求，然後在home.wxml中來解析及展示,至於home.wxss就是輔助home.wxml展示的，其實就類似於html+css。 #home.wxml
<scroll-view>
<view class="swiper-container">
<swiper autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
<block wx:for="{{BannerData}}" wx:key="unique">
<swiper-item data-id="{{item.id}}" data-url="{{item.url}}">
<image src="{{item.imagePath}}" class="img" bindtap='swipclick' data-data="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{BannerData}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view style="padding-top:10rpx"></view>
<view>
<block wx:for="{{articles}}" wx:key='sss'>
<view class='card' bindtap='articleClick' data-data="{{item}}">
<view class='article-view'>
<text class='article-author'>{{item.author}}</text>
<text class='article-niceDate'>{{item.niceDate}}</text>
</view>
<view class='article-title'>{{item.title}}</view>
<view class='article-view'>
<text class='article-ChapterName'>{{item.superChapterName}}/{{item.chapterName}}</text>
<image class='article-collect-img' src="../images/collect_normal.png"></image>
</view>
</view>
</block>
</view>
</scroll-view>
複製程式碼上述home.wxml程式碼中的BannerData 就是home.js中data{}中的BannerData，就是後臺返回的資料的list，下面的articles也是一樣，使用wx:for來解析list中的資料，程式碼中item就是list資料中單條的資料。
home.wxss就是home.wxml頁面展示的樣式 #home.wxss
/* pages/home/home.wxss */
.swiper-container {
padding: 15rpx;
position: relative;
}
.swiper-container .swiper {
height: 400rpx;
}
.swiper-container .swiper .img {
width: 100%;
height: 100%;
}
.swiper-container .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot {
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #fff;
border-radius: 8rpx;
transition: all 0.6s;
}
.swiper-container .dots .dot.active {
width: 24rpx;
background: #f80;
}
.card {
border: 2px solid #fff;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 2px #ccc;
margin: 8px;
position: relative;
}
.article-author {
color: gray;
font-size: 0.8rem;
padding-left: 10rpx;
}
.article-title {
color: black;
font-size: 0.9rem;
margin-top: 15rpx;
margin-left: 5rpx;
}
.article-niceDate {
color: gray;
padding-right: 10rpx;
font-size: 0.8rem;
}
.article-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 10rpx;
}
.article-ChapterName {
color: #1296db;
font-size: 0.8rem;
margin-top: 30rpx;
margin-left: 5rpx;
}
.article-collect-img {
width: 40rpx;
margin-right: 10rpx;
margin-top: 30rpx;
flex: none;
height: 38rpx;
}
複製程式碼四、點選事件
這個小程式最終開啟基本都是以連結的形式，所以這裡使用了web-view,也是測試版才能使用，否則需要註冊個體或者公司資訊。
點選事件在home.wxml中宣告，在home.js中實現。
舉個例子
<swiper-item data-id="{{item.id}}" data-url="{{item.url}}">
<image src="{{item.imagePath}}" class="img" bindtap='swipclick' data-data="{{item}}"></image>
</swiper-item>
複製程式碼程式碼中的bindtap就是宣告一個點選事件
//輪播圖點選事件
swipclick: function(e) {
console.log(e.currentTarget.dataset)
app.globalData.webUrl = e.currentTarget.dataset.data.url
// app.globalData.fromWhere='homeBanner'
wx.navigateTo({
url: '../web/web'
});
},
複製程式碼在home.js中實現這個點選事件，此處就是攜帶一個url跳轉到web-view的頁面來展示。
這裡主要分析了首頁的頁面實現，其他頁面基本思路都是一樣。