微信小程序 基础入门

相关网页

所有的详细文档，请看官网

微信小程序入门概述

下载官方开发工具

官方工具教程

基础组件

框架文件介绍

├── pages    
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
├── utils
│    └── util.js
├── app.js
├── app.json
├── app.wxss
└── project.config.json

pages文件夹

pages文件夹 里面存放所有页面

每页文件都由四部分组成 .wxml（标签布局）、.js（逻辑）、.json（配置）、.wxss（布局样式）

utils文件夹

存放公共逻辑（有默认代码）

app.js

全局的逻辑（有默认代码）

app.json

全局配置（json文件没有注释，所以不能注释）

{   页面路径
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],

    首页配置
    "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "小程序-首页",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh":true
  }
}

导航栏

在 app.json 里添加配置，list 里的导航必须大于两个

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/index_active.png",
      "selectedIconPath": "icons/index.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "首页",
      "iconPath": "icons/index_active.png",
      "selectedIconPath": "icons/index.png"
    }
  ]
  }