初遇小程序

• 一、小程序配置
• • 1、全局配置 app.json
  • 2、页面配置 page.json
  • 3、小程序搜索
  • 4、项目配置 project.config.json
• 二、视图层
• • 1、WXML
  • 2、WXSS
• 三、逻辑层
• 四、小程序的宿主环境
• 五、小程序启动的过程
• 六、页面渲染的过程

一、小程序配置

1、全局配置 app.json

全局配置主要包括以下 5 个配置项：

• pages：用了记录当前小程序的所有页面路径
• windows：全局定义小程序所有页面的背景色、文字颜色等等
• style：全局定义小程序组件所使用的样式版本，删除默认使用旧版本
• sitemapLocation：sitemap.json文件的路径配置
• lazyCodeLoading：目前仅支持值 requiredComponents，代表开启小程序按需注入特性。

2、页面配置 page.json

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

注意：

• 页面中配置项在当前页面会覆盖app.json 中相同的配置项，即页面配置的优先级>全局配置
• 样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段
  

3、小程序搜索

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

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",  //allow代表允许小程序搜索，disallow表示不予许小程序搜索
  "page": "*" // * 代表所有页面
  }]
}

4、项目配置 project.config.json

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

• setting：保存了编译相关的配置
• projectname：项目名称
• appid：小程序的账号ID
  
  ps：我们还可以直接通过微 信开发者工具 来更改项目配置文件

二、视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

1、WXML

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

WXML和HTML的区别：

1.标签名称不同

• HTML ( div, span, img, a)
• WXML (view, text, image, navigator)

2.属性节点不同

• <a href="#">超链接</a>
• <navigator url="/pages/home/home"></ navigator>

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

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

2、WXSS

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

WXSS和CSS的区别:

1.新增了rpx尺寸单位

• CSS 中需要手动进行像素单位换算,例如rem
• WXSS 在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

2.提供了全局的样式和局部样式

• 项目根目 录中的app.wxss会作用于所有小程序页面
• 局部页面的 .WXss样式仅对当前页面生效

3.WXSS 仅支持部分CSS选择器

• class 和#id
• element
• 并集选择器、 后代选择器
• ::after 和::before等伪类选择器

三、逻辑层

在小程序中,我们通过js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

小程序中的JS文件分为三大类，如下

四、小程序的宿主环境

宿主环境指的是程序运行所必须的依赖环境，手机微信是小程序的宿主环境，如上图所示。

小程序的宿主环境包含内容：

1. 通信模型
   

2. 运行机制

3. 组件

4. API

五、小程序启动的过程

① 把小程序的代码包下载到本地
② 解析app.json全局配置文件
③ 执行app.js小程序入口文件，调用App()创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成

六、页面渲染的过程

① 加载解析页面的.json配置文件
② 加载页面的.wxml模板和.WXSS样式
③ 执行页面的.js 文件,调用Page()创建页面实例
④ 页面渲染完成