⼩程序实际案例详解：页⾯搭建（附完整代码）
本⽂通过⼀个实际例⼦，来讲解如何进⾏⼩程序的页⾯搭建。⾸先看⼀下本⽂要实现的页⾯效果：
开发⼯具下载
01-
⼩程序架构
这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件。
02-
底部标签
底部标签是⼀个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",
selectediconpath什么意思
"backgroundTextStyle":"light"
}
}
值得注意的地⽅，就是 pages 接受⼀个数组，每⼀项都是字符串，来指定⼩程序由哪些页⾯组成。每⼀项代表对应页⾯的【路径+⽂件名】信息，数组的第⼀项代表⼩程序的初始页⾯。⼩程序中新增/减少页⾯，都需要对 pages 数组进⾏修改。
⽂件名不需要写⽂件后缀，因为框架会⾃动去寻路径.json, .js , .wxml, .wxss的四个⽂件进⾏整合。
03-
页⾯标题
这个标题如何实现？我们翻看⼀下官⽅⽂档。
看到这⾥，你应该就知道了，需要在指定页⾯的json⽂件中进⾏页⾯配置。继续查看官⽅的⽂档
原来如此！我们只需要把所有页⾯通⽤的配置放在 page.json，然后在各个page的 .json⽂件⾥⾯配置每个页⾯特有的属性即可。因为在上⾯的 app.json 中已经配置了通⽤页⾯的 window属性了，我们只需要在function.json中配置页⾯标题即可：
{
"navigationBarTitleText": "功能"
}
04-
轮播图
接下来实现顶部的轮播图。提供了⼀个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: [
'',
'',
''
],
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。