②微信小程序--》组成结构 文件作用 宿主环境

目录

 🍇项目组成结构

🌑基本文件构成

🌒基本文件含义

🌒小程序页面的组成部分

🌒json配置文件的作用 

🌒全局配置文件app.json 

🌒project.config.json文件 

🌒sitemap.json 文件 

🌒页面的 .json 配置文件

🌒修改项目首页

🍈项目开发准备 

🌑解决索引问题

🌒解决自动热重载问题

🌓配置首页颜色 

🌔新建页面 

🌕修改页面首页 

🍉WXML模板 

🌑什么是WXML

🌒WXML 和 HTML 的区别

🍊WXSS样式 

🌑什么是WXSS

🌒WXSS 和 CSS 的区别

🌑JS逻辑交互 

 🍋宿主环境

🌑通信模型

🌑运行机制 

👀引言

   ⚓经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。

 🍇项目组成结构

在项目开始之前首先先了解一下创建项目的基本组成结构（标准划重点）

🌑基本文件构成

pages:用来存放所有小程序的页面

utils:用来存放工具性质的模块(例如：格式化时间的定义模块)

.eslintrc.js：是一个名为 ESLINT 的工具的配置文件，目标是使代码更加一致并避免错误

app.js：小程序的项目入口文件

app.json：小程序项目的全局配置文件

app.wxss：小程序项目的全局样式文件

project.config.json：项目公共配置文件

project.private.config.json：项目个人配置文件，相同设置优先级高于公共配置文件

sitemap.json：用来配置小程序及其页面是否允许被微信索引

🌒基本文件含义

🌒小程序页面的组成部分

小程序官方建议把所有小程序的页面，都存放在 pages 目录 中，以单独的文件夹存在，如图所示：

其中，每个页面由 4 个基本文件 组成，它们分别是： 

.js文件：页面的脚本文件，存放页面的数据，事件处理函数等

.json文件：页面配置文件，配置窗口的外观，表现等

.wxml文件：页面的模板结构文件

.wxss文件：页面的样式表文件

🌒json配置文件的作用 

json是一种数据格式，在实际开发中，json总是以 配置文件的形式出现。小程序项目中也不例外：通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件，分别是：

• 项目根目录的app.json配置文件；
• 项目根目录中的project.config.json配置文件；
• 项目根目录中的sitemap.json配置文件；
• 每个页面文件夹中的.json配置文件

🌒全局配置文件app.json 

app.json是当前小程序的全局配置 ，包括了小程序的所有页面路径 、窗口外观、界面表现 、底部 tab 等。

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", //加载小圆圈的颜色
    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色
    "navigationBarTitleText": "Weixin", //导航栏的文本内容
    "navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这 4 个配置项的作用： 

1. pages ：用来记录当前小程序所有页面的路径
   未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
   小程序中新增/减少页面，都需要对 pages 数组进行修改。
2. window ：全局定义小程序所有页面的背景色、文字颜色等
3. style ：全局定义小程序组件所使用的样式版本
4. sitemapLocation ：用来指明 sitemap.json 的位置

🌒project.config.json文件 

文件project.config.json是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置 ，例如

setting 中保存了 编译相关的配置

projectname 中保存的是 项目名称

appid 中保存的是 小程序的账号 ID

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "condition": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

🌒sitemap.json 文件 

微信现已开放小程序内搜索 ，效果类似于PC 网页的 SEO 。sitemap.json 文件用来配置小程序页面是否允许微信索引 。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

注意：未显式指明 "disallow" 的都默认被索引
sitemap 的索引提示（终端黄色警告）是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。 

🌒页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来 对本页面的窗口外观进行配置 ，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。

新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。

  "pages":[
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs"
  ],

🌒修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染。

🍈项目开发准备 

在日常开发中可能会遇到一些不舒服的警告或要根据自己的喜好设置风格，现在开始解决。

🌑解决索引问题

 出现以上索引问题，我们一般会通过 project.config.json 配置文件解决。

通过设置 checkSiteMap 为 false 即可，新版本可能没有 checkSiteMap 可以手动添加。 

🌒解决自动热重载问题

点开详情找到本地设置关闭热重载按钮即可。 

🌓配置首页颜色 

找到pages页面文件下的.json文件，配置如下命令，个人配置会覆盖app.json下的全局配置。

🌔新建页面 

在app.json下的pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。

🌕修改页面首页 

将自己想要放到首页的文件，提到app.json文件下，pages配置中的首位就可以了。

🍉WXML模板 

🌑什么是WXML

WXML (WeiXin Markup Language) 是小程序框架设计的一套标签语言，用来构建小程序页面结构，其作用类似于网页开发中的 HTML 。

🌒WXML 和 HTML 的区别

标签名称的不同

HTML（div,span,img,a）

WXML（view,text,image,navigator）

属性节点的不同 

<a href="#">超链接</a>

<navigator url="/pages/home/home"></navigator>

提供了类似于 Vue 中的模板语法 

数据绑定、列表渲染、条件渲染

🍊WXSS样式 

🌑什么是WXSS

WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 组件的样式，类似于网页开发中的CSS。

🌒WXSS 和 CSS 的区别

新增了 rpx 尺寸单位

CSS中需要手动进行像素单位换算，例如 rem

WXSS在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

 提供了全局样式和局部样式

项目根目录中的 app.wxss 会作用于所有小程序页面

局部页面的 .wxss 样式仅对当前页面生效

WXSS 仅支持部分 CSS 选择器 

.class 和 #id

element

并集选择器、后代选择器

::after 和 ::before 等伪类选择器

🌑JS逻辑交互 

通过.js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等等。

小程序中的JS文件分为三大类，分别是:

app.js

• 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

页面的.js 文件

• 是页面的入口文件，通过调用Page()函数来创建并运行页面

普通的.js 文件

• 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

 🍋宿主环境

宿主环境就是依赖环境，小程序的宿主环境是手机微信

主要包含四个内容：通信模型，运行机制， 组件， API

宿主环境 (host environment) 指的是程序运行所必须依赖的环境。

Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的! 

手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。例如：微信扫码、微信支付、微信登录、地理定位等 

🌑通信模型

小程序的通信主体是 渲染层 和 逻辑层 ，其中：

WXML 模板和 WXSS 样式工作在渲染层

JS脚本工作在逻辑层

小程序的通信模型分为两部分：

渲染层 与 逻辑层 之间的通信：由微信客户端进行转发

逻辑层 与 第三方服务器 之间的通信 ：由微信客户端进行转发

通信的主体：渲染层 和 逻辑层

小程序中的通信模型分为两部分:

渲染层和逻辑层之间的通信由微信客户端进行转发。

逻辑层和第三方服务器之间的通信由微信客户端进行转发

 

🌑运行机制 

小程序启动过程：

1、把小程序的代码包下载到本地

2、解析 app.json 全局配置文件

3、执行app.js 小程序入口文件，调用 App() 创建小程序实例

4、渲染小程序首页

5、小程序启动完成

页面渲染过程：

1、加载解析页面的 .json 配置文件

2、加载页面的 .wxml 模板和 .wxss样式

3、执行页面的 .js 文件，调用Page()创建页面实例

4、页面渲染完成