本文通過一個實際例子，來講解如何進行微信小程序的頁面搭建。首先看一下本文要實現的頁面效果：
開發(fā)工具下載：微信官方有開發(fā)者工具，集成了開發(fā)調試、代碼編輯及程序發(fā)布等功能。
微信小程序架構：
這個就是程序的基本架構。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。
底部標簽底部標簽是一個tabBar。實現比較簡單，只需要簡單配置一下即可。 app.json
{
"pages":[
"pages/function/function",
"pages/pay/pay",
"pages/account/account",
"pages/index/index",
"pages/logs/logs"
],
"tabBar":{
"color": "#464a56",
"selectedColor": "#6595e9",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [{
"pagePath": "pages/function/function",
"text": "功能",
"iconPath": "images/tab_function_default.png",
"selectedIconPath": "images/tab_function_sel.png"
},{
"pagePath": "pages/pay/pay",
"text": "收款",
"iconPath": "images/tab_consume_default.png",
"selectedIconPath": "images/tab_consume_sel.png"
},{
"pagePath": "pages/account/account",
"text": "賬戶",
"iconPath": "images/tab_account_default.png",
"selectedIconPath": "images/tab_account_sel.png"
}]
},
"window":{
"navigationBarBackgroundColor": "#6595e9",
"navigationBarTextStyle":"white",
"navigationBarTitleText": "V50",
"backgroundColor": "#eeeeee",
"backgroundTextStyle":"light"
}
}
值得注意的地方，就是 pages 接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。
小程序中新增/減少頁面，都需要對 pages 數組進行修改。
文件名不需要寫文件后綴，因為框架會自動去尋找路徑.json, .js , .wxml, .wxss的四個文件進行整合。
頁面標題：
頁面標題這個標題如何實現？ 我們翻看一下官方文檔。
看到這里，你應該就知道了，需要在指定頁面的json文件中進行頁面配置。繼續(xù)查看官方的文檔
原來如此！我們只需要把所有頁面通用的配置放在 page.json，然后在各個page的 .json文件里面配置每個頁面特有的屬性即可。因為在上面的 app.json 中已經配置了通用頁面的 window屬性了，我們只需要在function.json中配置頁面標題即可：
{
"navigationBarTitleText": "功能"
}
輪播圖
接下來實現頂部的輪播圖。微信提供了一個swiper組件來實現輪播圖。
代碼也就出來了：function.wxml
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
function.js
//function.js
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
},
})
沒錯，微信小程序的輪播圖就是這么簡單！在這里可能有的同學要問了：“輪播圖的圖片用的是url地址，如果我想用本地的圖片呢？能不能實現？ ”
這個官方文檔沒有介紹，但是我們經過測試，是可以實現的。代碼如下
imgUrls: [
'../../images/adv_50.png',
'../../images/adv_60.png',
'../../images/adv_80.png'
],
中間功能模塊
中間的8個功能模塊，類似Android的GridView效果。本文采取循環(huán)的方式來實現：function.wxml
<view class='function_container'>
<view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
<image class='function_img' src='{{function.pic_url}}'/>
<view class='function_name'>{{function.name}}</view>
</view>
</view>
function.js
functions: [
{
"name": "刷卡消費",
"pic_url": '../../images/icon_consume.png'
},
{
"name": "提現",
"pic_url": '../../images/icon_withdrawals.png'
},
{
"name": "交易記錄",
"pic_url": '../../images/icon_records.png'
},
{
"name": "實名認證",
"pic_url": '../../images/icon_auth.png'
},
{
"name": "飛機票",
"pic_url": '../../images/icon_airplane.png'
},
{
"name": "火車票",
"pic_url": '../../images/icon_train.png'
},
{
"name": "手機充值",
"pic_url": '../../images/icon_phone_recharge.png'
},
{
"name": "水電煤",
"pic_url": '../../images/icon_water.png'
}
]
function.wxss
/**function.wxss**/
.container {
height: 650px;
}
.slide-image{
display: block;
height: 280rpx;
width:100%
}
.function_container{
display:flex;
flex-wrap: wrap;
width:100%;
}
.function_item{
width:25%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:12px;
box-sizing:border-box;
padding-bottom:10px;
padding-top:10px
}
.function_img{
width:60px;
height:60px;
}
.function_name{
padding-top:10px
}
<!--function.wxml--> <scroll-view scroll-y="true" class="container"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper> <view class='function_container'> <view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function"> <image class='function_img' src='{{function.pic_url}}'/> <view class='function_name'>{{function.name}}</view> </view> </view> <view class='divider' /> <view class='specialities_layout'> <view class='view_divider' /> <text class="specialities_text">特色業(yè)務</text> </view> <image class='bottom-image' src='../../images/app_banner.jpg'/> </scroll-view> function.wxss /**function.wxss**/ .container { height: 650px; } .slide-image{ display: block; height: 280rpx; width:100% } .function_container{ display:flex; flex-wrap: wrap; width:100%; } .function_item{ width:25%; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; box-sizing:border-box; padding-bottom:10px; padding-top:10px } .function_img{ width:60px; height:60px; } .function_name{ padding-top:10px } .divider{ background: #f5f5f5; height: 40rpx; width:100%; } .specialities_layout{ display:flex; flex-wrap: wrap; width:100%; flex-direction:row; margin-left: 16px; margin-top:16px; margin-bottom: 16px; } .view_divider{ background: #EEA9B8; height: 40rpx; width:10rpx; } .specialities_text { margin-left: 8px; font-size: 16px; height: auto; width:auto; margin-top: 6rpx; } .bottom-image{ height: 280rpx; width:100%; } .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } function.js //function.js //獲取應用實例 var app = getApp() Page({ data: { userInfo: {}, indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, // imgUrls: [ // 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' // ], imgUrls: [ '../../images/adv_50.png', '../../images/adv_60.png', '../../images/adv_80.png' ], functions: [ { "name": "刷卡消費", "pic_url": '../../images/icon_consume.png' }, { "name": "提現", "pic_url": '../../images/icon_withdrawals.png' }, { "name": "交易記錄", "pic_url": '../../images/icon_records.png' }, { "name": "實名認證", "pic_url": '../../images/icon_auth.png' }, { "name": "飛機票", "pic_url": '../../images/icon_airplane.png' }, { "name": "火車票", "pic_url": '../../images/icon_train.png' }, { "name": "手機充值", "pic_url": '../../images/icon_phone_recharge.png' }, { "name": "水電煤", "pic_url": '../../images/icon_water.png' } ] }, //事件處理函數 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function (userInfo) { //更新數據 that.setData({ userInfo: userInfo }) that.update() }) } })
這里通過width:25% 來實現每行排列四個功能按鈕的效果。
完整代碼
下面的布局就比較簡單了，直接上完整的代碼了：function.wxml
以上就是分享給新手的頁面搭建的源碼內容。希望對大家有幫助
愛盈利（aiyingli.com）移動互聯網最具影響力的盈利指導網站。定位于服務移動互聯網創(chuàng)業(yè)者，移動盈利指導。我們的目標是讓盈利目標清晰可見！降低門檻，讓缺乏經驗、資金有限的個人和團隊獲得經驗和機會，提高熱情，激發(fā)產品。
【轉載說明】 若上述素材出現侵權，請及時聯系我們刪除及進行處理：[email protected]
