微信小程序1-配置文件

(一). 微信小程序介绍

1. 开发微信的小程序原因

2.其他小程序

(二). 小程序目录结构

1.小程序文件结构和传统的web对比

2.基本的项目目录

(三)小程序配置文件

1.全局配置文件app.json

1.1 "pages" 字段

 1.2 "window"字段

1.3 tabbage

2.页面配置文件page.json

3.sitemap 配置

---

(一). 微信小程序介绍

微信小程序,简称小程序,Mini Program ,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用于扫描或搜索即可打开程序

1. 开发微信的小程序原因

• 微信用户规模大,粘性高,在微信里开发产品更容易触达用户;
• 推广app或公众号的成本太高
• 开发适配成本低
• 容易小规模试错,然后快速迭代
• 跨平台

2.其他小程序

• 支付宝小程序
• 百度小程序
• QQ小程序
• 今日头条 + 抖音小程序

(二). 小程序目录结构

小程序框架的目标是通过尽量可能简单/高效的方式让开发者可以在微信中开发具有原生app体验的服务.

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

1.小程序文件结构和传统的web对比

小程序 => 结构:wxml 样式:wxss 逻辑:javascript 配置:jspon

web => 结构:html 样式:css 逻辑:javascript 配置:无

传统web是三层结构,而微信小程序是四层结构,多了一层配置jspon

2.基本的项目目录

(三)小程序配置文件

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

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

1.全局配置文件app.json

全局配置: 全局配置 | 微信开放文档

1.1 "pages" 字段

"pages" :页面,内部存放的字段,表示当前页面有几个子页面,并且路径是和左侧pages文件完全对应,

注意 : 直接在"pages"字段添加文件,保存自动在对应位置生成该文件,并且,在"pages"数组中,第一个位置文件为打开小程序默认显示的文件页面(此操作仅限在微信开发者工具中使用,在其他地方使用不生效)

 1.2 "window"字段

"windows" :定义小程序所有页面的顶部背景颜色/文字颜色定义等

"window"属性 : 全局配置 | 微信开放文档

navigationBar :导航栏外观表现 

注意:配置文件在vsCode中书写不存在提示,在小程序开发工具中书写有提示,所以配置文件尽量在小程序的开发工具中书写.

1.3 tabbage

全局配置 | 微信开放文档 (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"
}

2.页面配置文件page.json

页面配置: 小程序配置 | 微信开放文档

这里的page.json是用page目录下文件的page.json

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

页面的配置只能设置app.json中部分window配置顶的内容,页面中配置顶会覆盖app.json的window中相同的配置

3.sitemap 配置

 :sitemap 配置 | 微信开放文档 (qq.com)

 小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信搜索