微信小程序-3-目录结构与配置

小程序结构目录

小程序框架(MINA小程序原生框架)的目标是通过尽可能简单,高效的方法让开发者可以在微信中开发具有原生APP体验的服务.

小程序框架提供了自己的视图层描述语言wxml和wxss,以及Javascript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑

小程序文件结构与传统Web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

通过以上对比可以看出,传统的Web是三层结构,而微信小程序是四层结构,多了一层配置json

基本项目目录

小程序配置文件

一个小程序应用会包括最基本的两种配置文件,一种是全局的app.json和页面自己的page.json

注意:配置文件中不能出现注释

全局配置 app.json

app.json是当前小程序的全局配置,包括了小程序的所有页面路径,界面表现,网络超时时间,底部tab等

{
	"pages": [
		"pages/index/index",
		"pages/logs/logs"
	],
	"window": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#fff",
		"navigationBarTitleText": "Weixin",
		"navigationBarTextStyle": "black"
	},
	"style": "v2",
	"sitemapLocation": "sitemap.json"
}

pages

用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

如果想再创建一个页面,就在微信开发者工具的这行代码下再加一个比如pages/demo/demo这样就会创建一个demo页面如果想让小程序开始启动就是demo页面的话,只需要把demo放在第一个的位置上

window

定义小程序所有页面的顶部背景颜色,文字颜色定义等

修改导航栏的背景颜色

"navigationBarBackgroundColor": "#6eb4ff"

修改导航栏文字

"navigationBarTitleText": "导航栏文字"

修改导航栏文字颜色

"navigationBarTextStyle": "white"

该属性只支持:white和black

下拉刷新

"enablePullDownRefresh": true

下拉loading样式

"backgroundTextStyle": "dark"

该属性只支持:light和dark

刷新背景颜色

"backgroundColor":"#00ffff"

tabBar

"tabBar": {
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },

• pagePath:页面路径
• text:文本
• iconPath:未选中时的图标路径
• selectedIconPath:选中时图标路径

• color:文本颜色

  "tabBar": {
  		"color":"#ff00ff",
  		"list": [{
  			
  			"pagePath": "pages/home/home",
  			"text": "首页",
  			"iconPath": "imgs/shouye.png",
  			"selectedIconPath": "imgs/shouye_1.png"
  		}, {
  			"pagePath": "pages/menu/menu",
  			"text": "菜单",
  			"iconPath": "imgs/caidan.png",
  			"selectedIconPath": "imgs/caidan_1.png"
  		}, {
  			"pagePath": "pages/mine/mine",
  			"text": "我的",
  			"iconPath": "imgs/wode.png",
  			"selectedIconPath": "imgs/wode_1.png"
  		}]
  	},
  

  

• selectedColor:选取时文字颜色

  "tabBar": {
  		"color":"#ff00ff",
  		"selectedColor":"#ff5500",
  		"list": [{
  			
  			"pagePath": "pages/home/home",
  			"text": "首页",
  			"iconPath": "imgs/shouye.png",
  			"selectedIconPath": "imgs/shouye_1.png"
  		}, {
  			"pagePath": "pages/menu/menu",
  			"text": "菜单",
  			"iconPath": "imgs/caidan.png",
  			"selectedIconPath": "imgs/caidan_1.png"
  		}, {
  			"pagePath": "pages/mine/mine",
  			"text": "我的",
  			"iconPath": "imgs/wode.png",
  			"selectedIconPath": "imgs/wode_1.png"
  		}]
  	},
  

  

• backgroundColor:背景颜色

  "tabBar": {
  		"color":"#ff00ff",
  		"selectedColor":"#ff5500",
  		"backgroundColor":"#55aa00",
  		"list": [{
  			
  			"pagePath": "pages/home/home",
  			"text": "首页",
  			"iconPath": "imgs/shouye.png",
  			"selectedIconPath": "imgs/shouye_1.png"
  		}, {
  			"pagePath": "pages/menu/menu",
  			"text": "菜单",
  			"iconPath": "imgs/caidan.png",
  			"selectedIconPath": "imgs/caidan_1.png"
  		}, {
  			"pagePath": "pages/mine/mine",
  			"text": "我的",
  			"iconPath": "imgs/wode.png",
  			"selectedIconPath": "imgs/wode_1.png"
  		}]
  	},
  

  

• position:导航栏位置

  "tabBar": {
  		"position":"top",
  		"color":"#ff00ff",
  		"selectedColor":"#ff5500",
  		"backgroundColor":"#55aa00",
  		"list": [{
  			
  			"pagePath": "pages/home/home",
  			"text": "首页",
  			"iconPath": "imgs/shouye.png",
  			"selectedIconPath": "imgs/shouye_1.png"
  		}, {
  			"pagePath": "pages/menu/menu",
  			"text": "菜单",
  			"iconPath": "imgs/caidan.png",
  			"selectedIconPath": "imgs/caidan_1.png"
  		}, {
  			"pagePath": "pages/mine/mine",
  			"text": "我的",
  			"iconPath": "imgs/wode.png",
  			"selectedIconPath": "imgs/wode_1.png"
  		}]
  	},
  

  该属性只支持:top和bottom

  如果导航栏在上方的时候,那么图片将不会被显示

页面配置文件 page.json

这里的page.json其实是用来标识页面目录下的page.json这类和小程序页面相关的配置.

开发者可以独立定义每个页面的一些属性,如顶部颜色,是否允许下拉刷新等等.

页面的配置只能设置app.json中部分window配置项的内容,页面中配置项会覆盖app.json的window中相同的配置项.这里就举一个例子就行了

• 修改导航栏文字

  "navigationBarTitleText":"首页"
  

  

• …

sitemap配置

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

具体的可以在官方文档中查看