小程序的简单认识

用到的知识

• 页面布局：WXML，类似HTML
• 页面样式：WXSS，类似CSS
• 页面脚本：js + WXS

小程序基本文件结构

常见的配置文件

• project.config.json：项目配置文件, 比如项目名称、appid等
• sitemap.json：小程序搜索相关的
• app.json：全局配置
• page.json：页面配置

项目配置文件
小程序搜索

全局配置

app.json文件用于全局属性的基本配置
下面是全局配置中几个重要的属性

pages 页面路径列表

1.用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息（类似于路由）
2. 小程序中所有的页面都是必须在pages中进行注册

"pages": [
    "pages/home/home",
    "pages/about/about",
    "pages/category/category"
  ],

window 全局的默认窗口展示

用户指定窗口如何展示, 其中还包含了很多其他的属性

"window": {
   "navigationBarBackgroundColor": "#ff5777",
   "navigationBarTitleText": "我的小程序",
   "navigationBarTextStyle": "white"
  },

tabBar 底部tab栏的展示

设置底部 tab 栏的相关属性

"tabBar": {
    "selectedColor": "#ff5777",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "assets/tabbar/home.png",
      "selectedIconPath": "assets/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "assets/tabbar/category.png",
      "selectedIconPath": "assets/tabbar/category_active.png"
    }]
  }

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置
另外，页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#ff0000",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

app.json 文件

{
  "pages": [
    "pages/home/home",
    "pages/about/about",
    "pages/category/category"
  ],
  "window": {
   "navigationBarBackgroundColor": "#ff5777",
   "navigationBarTitleText": "我的小程序",
   "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "selectedColor": "#ff5777",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "assets/tabbar/home.png",
      "selectedIconPath": "assets/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "assets/tabbar/category.png",
      "selectedIconPath": "assets/tabbar/category_active.png"
    }]
  }
}

简答的一个小程序