微信小程序案例详解：页面搭建

作者：wu勿望我_957 | 来源：互联网 | 2017-05-11 02:04

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

底部标签底部标签是一个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的四个文件进行整合。
页面标题：

页面标题这个标题如何实现？我们翻看一下官方文档。

原来如此！我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可：

{
     "navigationBarTitleText": "功能"   
   }

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

代码也就出来了：function.wxml


    
      
        
      
    

function.js

//function.js
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    imgUrls: [
       &＃39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&＃39;,
       &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&＃39;,
       &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&＃39;
     ],  
  },
})

没错，微信小程序的轮播图就是这么简单！在这里可能有的同学要问了：“轮播图的图片用的是url地址，如果我想用本地的图片呢？能不能实现？ ”
这个官方文档没有介绍，但是我们经过测试，是可以实现的。代码如下

imgUrls: [
    &＃39;../../images/adv_50.png&＃39;,
    &＃39;../../images/adv_60.png&＃39;,
    &＃39;../../images/adv_80.png&＃39; 
],

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


    
         
        {{function.name}}
    
  
function.js

functions: [
      {
        "name": "刷卡消费",
        "pic_url": &＃39;../../images/icon_consume.png&＃39;
      },
      {
        "name": "提现",
        "pic_url": &＃39;../../images/icon_withdrawals.png&＃39;
      },
      {
        "name": "交易记录",
        "pic_url": &＃39;../../images/icon_records.png&＃39;
      },
      {
        "name": "实名认证",
        "pic_url": &＃39;../../images/icon_auth.png&＃39;
      },
      {
        "name": "飞机票",
        "pic_url": &＃39;../../images/icon_airplane.png&＃39;
      },
      {
        "name": "火车票",
        "pic_url": &＃39;../../images/icon_train.png&＃39;
      },
      {
        "name": "手机充值",
        "pic_url": &＃39;../../images/icon_phone_recharge.png&＃39;
      },
      {
        "name": "水电煤",
        "pic_url": &＃39;../../images/icon_water.png&＃39;
      }
    ]
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
}

这里通过width:25% 来实现每行排列四个功能按钮的效果。
完整代码
下面的布局就比较简单了，直接上完整的代码了：function.wxml


  
    
      
        
      
    
  

  
    
         
        {{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
}
.pider{
    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_pider{
    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: [
    //   &＃39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&＃39;,
    //   &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&＃39;,
    //   &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&＃39;
    // ],
    imgUrls: [
      &＃39;../../images/adv_50.png&＃39;,
      &＃39;../../images/adv_60.png&＃39;,
      &＃39;../../images/adv_80.png&＃39;
    ],
    functions: [
      {
        "name": "刷卡消费",
        "pic_url": &＃39;../../images/icon_consume.png&＃39;
      },
      {
        "name": "提现",
        "pic_url": &＃39;../../images/icon_withdrawals.png&＃39;
      },
      {
        "name": "交易记录",
        "pic_url": &＃39;../../images/icon_records.png&＃39;
      },
      {
        "name": "实名认证",
        "pic_url": &＃39;../../images/icon_auth.png&＃39;
      },
      {
        "name": "飞机票",
        "pic_url": &＃39;../../images/icon_airplane.png&＃39;
      },
      {
        "name": "火车票",
        "pic_url": &＃39;../../images/icon_train.png&＃39;
      },
      {
        "name": "手机充值",
        "pic_url": &＃39;../../images/icon_phone_recharge.png&＃39;
      },
      {
        "name": "水电煤",
        "pic_url": &＃39;../../images/icon_water.png&＃39;
      }
    ]
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: &＃39;../logs/logs&＃39;
    })
  },
  onLoad: function () {
    console.log(&＃39;onLoad&＃39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
      that.update()
    })
  }
})

更多微信小程序案例详解：页面搭建相关文章请关注PHP中文网！

推荐阅读

php
不用任何框架你们能从头到尾写一个完整的项目吗？

现在的新手程序猿，动不动就是框架，就连外面培训的也是框架，我就问一句，没了框架是不是就啥也不会了 ... [详细]

蜡笔小新 2024-11-25 12:37:01
copy
如何高效学习鸿蒙操作系统：开发者指南

本文探讨了开发者如何更有效地学习鸿蒙操作系统，提供了来自行业专家的建议，包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]

蜡笔小新 2024-11-23 19:22:14
copy
2023年，Android开发前景如何？25岁还能转行吗？

近期，关于Android开发行业的讨论在多个平台上热度不减，许多人担忧其未来发展。本文将探讨当前Android开发市场的现状、薪资水平及职业选择建议。 ... [详细]

蜡笔小新 2024-11-21 18:08:07
string
微信小程序开发指南：创建动态电影选座界面

本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件，提高用户体验。通过合理的布局和交互设计，使用户能够轻松选择心仪的座位。 ... [详细]

蜡笔小新 2024-11-19 15:36:11
string
华为云openEuler环境下的Web应用部署实践

本文详细记录了在华为云openEuler系统上进行Web应用部署的具体步骤，包括配置yum源、安装Apache、MariaDB、PHP及其相关组件，并完成WordPress的安装与配置过程。 ... [详细]

蜡笔小新 2024-11-25 12:39:31
string
IIS6批量添加主机头，修改IIS数据库

首先，找到IIS的数据库。默认是在C:\WINDOWS\system32\inetsrv下的MetaBase.xml文件。如果找不到，请右键右键站点-》所有服务-》将配置保存到一个 ... [详细]

蜡笔小新 2024-11-25 10:44:48
cookie
深入理解PHP中的超全局变量与AJAX技术

本文详细介绍了PHP中的几种超全局变量，包括$GLOBAL、$_SERVER、$_POST、$_GET等，并探讨了AJAX的工作原理及其优缺点。通过具体示例，帮助读者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-24 16:35:09
get
Docker基础入门与环境配置指南

本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker，用户能够将应用及其依赖打包进容器内，实现高效、轻量级的虚拟化。容器之间采用沙箱机制，确保彼此隔离且资源消耗低。 ... [详细]

蜡笔小新 2024-11-24 09:54:53
object
物联网学习之旅：微信小程序控制STM32（三）STM32代码编写

STM32代码编写STM32端不需要写关于连接MQTT服务器的代码，连接的工作交给ESP8266来做，STM32只需要通过串口接收和发送数据，间接的与服务器交互。串口三配置串口一已 ... [详细]

蜡笔小新 2024-11-23 21:37:55
grid
全面覆盖的前端技术资源大全

本文提供了一个详尽的前端开发资源列表，涵盖了从基础入门到高级应用的各个方面，包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]

蜡笔小新 2024-11-23 12:05:53
grid
支付宝免费提现攻略详解

在日常生活中，支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现，帮助用户更好地管理个人财务，避免不必要的手续费支出。 ... [详细]

蜡笔小新 2024-11-21 16:47:52
grid
从CodeIgniter中提取图像处理组件

本指南旨在帮助开发者在未使用CodeIgniter框架的情况下，如何独立使用其强大的图像处理功能，包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]

蜡笔小新 2024-11-20 19:57:35
get
解决MenuItem中通过app:actionLayout使用Switch时出现的空指针异常问题

在Android应用开发中，当在MenuItem中通过app:actionLayout属性使用Switch控件时，可能会遇到空指针异常的问题。本文将探讨该问题的原因及解决方案。 ... [详细]

蜡笔小新 2024-11-25 21:37:06
string
C/C++ 应用程序的安装与卸载解决方案

本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序，包括自动检测并安装所需的运行库，确保应用能够顺利安装和卸载。 ... [详细]

蜡笔小新 2024-11-23 13:44:53
object
HTML前端开发：UINavigationController与页面间数据传递详解

本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递，适合初学者和有一定基础的开发者学习。 ... [详细]

蜡笔小新 2024-11-20 09:46:39

wu勿望我_957

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章