小程序01

页面目录介绍

|--pages  # 所有页面的存放位置
    |--index
    |   |--{}index.js  # 每个页面的JS文件
    |   |--index.json  # 每个页面的配置
    |   |--index.wxml  # 每个相当于html文件
    |   |--idnex.wxss  # 每个相当于css文件
    |--logs 
|--utils
    |--util.js  # 公共方法存放位置
|--app.js  # 全局的app对象文件,启动app
|--app.json  # 全局的app配置
|--app.wxss  # 全局的类似css文件
|--project.config.json  # 多人开发统一的配置文件
|--sitemap.json  # 关于本app小程序的对外描述信息

app.json全局配置

# 新增页面  在全局的app.json中的pages数组中注册，注意如果是首页的话，必须将注册的文件夹写在最前面的位置才起作用，其后的其他文件夹就会被覆盖掉，不能作为首页使用；
{
"pages": [
    "pages/tests/test",
    "pages/index/index",
    "pages/logs/logs"  # 末尾的文件夹注册不能加逗号，不然报错  
  ],
    
 # 小程序页面的头部配置
  "window": {
    "backgroundTextStyle": "light",  # 修改小程序名称字体背景颜色 只能是dark和light
    "navigationBarBackgroundColor": "#fff",  # 修改头部的背景颜色
    "navigationBarTitleText": "WeChat",  # 修改小程序的名称
    "navigationBarTextStyle": "black",  # 修改头部出现的所有字体的颜色，只能是black和white
      "enablePullDownRefresh": true  # 首页是否具有下拉刷新的功能
  },
  
 # 底部导航栏  list元组中最多不超过5项
 "tabBar": {
     "color": "#660066",  # 没被激活时的颜色
    "selectedColor": "#6666FF",  # 激活后的颜色
    "backgroundColor": "#FFFF99",  # 导航栏的背景颜色
    "borderStyle": "white",  # 导航栏上边框的颜色，只有black和white
     "list": [{
      "pagePath": "pages/tests/test",  # 显示的页面，对应我们在pages中创建的文件夹
      "text": "首页", # 创建的导航栏对应页面文字信息
      "iconPath": "images/icon1.png",  # 文字信息上面的小图标路径  我们需要自己创建一个与pages同级别的文件夹images，内部放我们需要展示的小图标
      "selectedIconPath": "images/icon1-active.png"  # 点击图标（或说文字），使图标高亮（激活状态），代表跳转到对应的页面
    },{
      "pagePath": "pages/tests1/test1",
      "text": "商品分类",
      "iconPath": "images/icon2.png",
      "selectedIconPath": "images/icon2-active.png"
    }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

创建的文件夹中.json文件的配置

{
  "usingComponents": {},
  "navigationBarTitleText": "八折活动"  # 局部配置头部标题，就优先使用局部，不会使用全局的“微信小程序”
}

数据绑定

以我们创建的tests文件夹为例：
1.在 test.js中注册变量
2.在test.wxml中的view标签中渲染数据，将属性或变量写在{{}}中
<view>{{ name }}</view>