微信小程序简单使用

微信小程序目录结构介绍

demo1

讲解demo

1 app.json

app.json作为微信小程序的入口、路由到pages文件夹下的各个目录
标签详情可以参考官网: 小程序官方文档
pages: 每页跳转的页面详情
window: 导航栏
tabBar: 底部导航栏

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/song/song",
    "pages/navigate/navigate",
    "pages/navigate/index/index",
    "pages/navigate/map/map",
    "pages/navigate/test/test"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFD373",
    "navigationBarTitleText": "小宝第一个微信小程序Title",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#1E1A1A",
    "selectedColor": "#2F9860",
    "backgroundColor": "#FFD373",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "utils/image/unhappy.png",
        "selectedIconPath": "utils/image/eatting.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "utils/image/unhappy.png",
        "selectedIconPath": "utils/image/smile.png",
        "text": "日志"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "utils/image/unhappy.png",
        "selectedIconPath": "utils/image/eatting.png",
        "text": "其它"
      },
      {
        "pagePath": "pages/song/song",
        "iconPath": "utils/image/unhappy.png",
        "selectedIconPath": "utils/image/eatting.png",
        "text": "爱听歌"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

2 app.js文件

处理逻辑文件

3 app.wxss文件

作用同css

案例代码待更新。。。