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

发布日期： 2017-03-04 阅读量： 作者： ADMIN

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

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

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

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

这个就是程序的基本架构。最关键也是必不可少的，是 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"
  }
}

下一篇: wordpress用的什么编程语言

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

随便看看