页面目录介绍
- |--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>
小程序 01
来源: http://www.bubuko.com/infodetail-3384199.html