(一). 微信小程序介绍
1. 开发微信的小程序原因
2.其他小程序
(二). 小程序目录结构
1.小程序文件结构和传统的web对比
2.基本的项目目录
(三)小程序配置文件
1.全局配置文件app.json
1.1 "pages" 字段
1.2 "window"字段
1.3 tabbage
2.页面配置文件page.json
3.sitemap 配置
微信小程序,简称小程序,Mini Program ,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用于扫描或搜索即可打开程序
小程序框架的目标是通过尽量可能简单/高效的方式让开发者可以在微信中开发具有原生app体验的服务.
小程序框架提供了自己的视图层描述语言wxml和wxss,以及javascript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑
小程序 => 结构:wxml 样式:wxss 逻辑:javascript 配置:jspon
web => 结构:html 样式:css 逻辑:javascript 配置:无
传统web是三层结构,而微信小程序是四层结构,多了一层配置jspon
小程序应用程序包括基本的两种配置文件,一种是全局的app.json 和 页面自己的page.json
注意:配置文件中不能出现注释
全局配置: 全局配置 | 微信开放文档
"pages" :页面,内部存放的字段,表示当前页面有几个子页面,并且路径是和左侧pages文件完全对应,
注意 : 直接在"pages"字段添加文件,保存自动在对应位置生成该文件,并且,在"pages"数组中,第一个位置文件为打开小程序默认显示的文件页面(此操作仅限在微信开发者工具中使用,在其他地方使用不生效)
"windows" :定义小程序所有页面的顶部背景颜色/文字颜色定义等
"window"属性 : 全局配置 | 微信开放文档
navigationBar :导航栏外观表现
注意:配置文件在vsCode中书写不存在提示,在小程序开发工具中书写有提示,所以配置文件尽量在小程序的开发工具中书写.
全局配置 | 微信开放文档 (qq.com)
{
"pages":[
"pages/index/index",
"pages/img/img",
"pages/mine/mine",
"pages/search/search",
"pages/demo01/demo01",
"pages/demo02/demo02",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ffaaaa",
"navigationBarTitleText": "我的应用",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "小图标/1.png",
"selectedIconPath": "小图标/2.png"
},
{
"pagePath": "pages/img/img",
"text": "图片",
"iconPath": "小图标/3.png",
"selectedIconPath": "小图标/4.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "小图标/5.png",
"selectedIconPath": "小图标/6.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "小图标/7.png",
"selectedIconPath": "小图标/8.png"
}
],
"color": "#ffaaaa",
"selectedColor": "#aaaaff",
"backgroundColor": "#ffffaa"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
页面配置: 小程序配置 | 微信开放文档
这里的page.json是用page目录下文件的page.json
可以独立定义每个页面的一些属性,如顶部颜色/是否允许下拉刷新等.
页面的配置只能设置app.json中部分window配置顶的内容,页面中配置顶会覆盖app.json的window中相同的配置
小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信搜索