微信小程序实际案例详解：页面搭建（附完整代码） 作者...

zhichi_admin

本文通过一个实际例子，来讲解如何进行微信小程序的页面搭建。首先看一下本文要实现的页面效果：

开发工具下载微信官方有开发者工具，集成了开发调试、代码编辑及程序发布等功能。
微信小程序架构

这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。
底部标签底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json
[mw_shl_code=applescript,true]
{
  "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"
  }
}[/mw_shl_code]
值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。
页面标题这个标题如何实现？

我们翻看一下官方文档。


看到这里，你应该就知道了，需要在指定页面的json文件中进行页面配置。继续查看官方的文档



原来如此！我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可：
[mw_shl_code=applescript,true] {
     "navigationBarTitleText": "功能"   
   }[/mw_shl_code]

轮播图

接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

代码也就出来了：function.wxml

[mw_shl_code=applescript,true]
<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'
     ],  
  },
})[/mw_shl_code]

没错，微信小程序的轮播图就是这么简单！在这里可能有的同学要问了：“轮播图的图片用的是url地址，如果我想用本地的图片呢？能不能实现？ ”

这个官方文档没有介绍，兔子哥经过测试，是可以实现的。代码如下
[mw_shl_code=applescript,true]imgUrls: [
    '../../images/adv_50.png',
    '../../images/adv_60.png',
    '../../images/adv_80.png'
],[/mw_shl_code]
中间功能模块

中间的8个功能模块，类似Android的GridView效果。本文采取循环的方式来实现：function.wxml

游客，如果您要查看本帖隐藏内容请回复

这里通过width:25% 来实现每行排列四个功能按钮的效果。

完整代码

下面的布局就比较简单了，直接上完整的代码了：function.wxml

[mw_shl_code=applescript,true]

  <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
   
      
        
      
   
  

  
   
        
        {{function.name}}
   
  

  

  
      
      特色业务
  
  

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()
    })
  }
})[/mw_shl_code]

作者：Dreawer
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

索大骆驼

楼主好人，感谢分享

༽安྆静྆的྆

楼主好人，感谢分享。

tksinfo

谢谢，好好学习

kingfang

啥也不说了，感谢楼主分享哇！

′Acai

啥也不说了，感谢楼主分享哇！

lk916149022

支持楼主，正好学习学习！！

亚平宁的清风

啥也不说了，感谢楼主分享哇！

hanhao

使用、转载或引用本文时必须同时征得该帖子作者和微信小程序开发论坛－咫尺论坛－微信小程序论坛－bbs.zhichiwangluo.com的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、微信小程序开发论坛－咫尺论坛－微信小程序论坛－bbs.zhichiwangluo.com管理员和版主
- 本文出自微信小程序开发论坛－咫尺论坛－微信小程序论坛－bbs.zhichiwangluo.com，原文地址：http://bbs.zhichiwangluo.com/for ... hread&tid=11881

寒星傲宇

学习下学习下学习下学习下