小程序开发笔记

小程序开发笔记

一.项目组成部分

从上到下：pages，utils，app.js，aoo.json，app.wxss，project.config,json，sitemap.json

1.pages：用来存放所有小程序的页面

2.utils：用来存放工具性质的模块（例如，格式化时间的自定义模块）

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

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

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

6.project.config.jon：项目配置文件

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

二.小程序页面组成部分

pages里面包含index和logs，他们有四个基本文件构组成分别是

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

2.json文件（当前页面的配置文件，配置窗口的外观，表现等）

3.wsml.文件（页面模块结构文件）

4.wxss文件（当前页面的样式表文件）

三.小程序代码的构成

1.json文件

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

小程序项目中一共有四种json配置文件，他们分别是

1.项目根目录中的app.json配置文件

2.项目根目录中的project.config.json配置文件

3.项目根目录中的sitemap.json配置文件

4.每个页面文件夹中的json配置文件

2.app.json文件

当前小程序的全局配置，包括小程序搜友页面、窗口外观、界面表现、底部tab等

Demo项目里边的app.json配置内容如下

1.pages（数组）：用来记录当前小程序所有页面的路径

2.window：全局定义小程序的所有背景色，文字颜色等

3.style：全局定义小程序组件所使用的版本

4.sitemaplocation：用来指明sitemap.json的位置

3.project.config,json文件

记录我们对小程序开发工具所做的个性化配置，例如

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

projectname保存的是项目名称

appid保存的小程序的账号

4.sitemap.json文件

小程序内搜索，类似与网页上的SEO.sitemap.json文件用来配置小程序是否支持微信索引功能

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

“rules”: [{ 搜索规则

“action”: “allow”, 都允许被索引（disallow）不被索引

“page”: “*” 所有页面

}]

5.页面的json文件

对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项，例如：

在index.json中配置 “navigationBarBackgroundColor”: "#00b26a"上面就会变成绿色

而且以页面配置为准

6.新建小程序页面

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

如： "pages/list/list"就可以自动创建list文件夹

7.修改小程序项目首页

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

WXML模板

1.什么是WXML

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

3.WXML和HTML的区别

1.标签名称不同

HTML（div,span,img,a）

WXML （view,text,image,navigator）

2.属性节点不同

超链接

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

数据绑定

列表渲染

条件渲染

WXSS样式

1.什么是WXSS样式

是一套样式语言，用于描述WXML的组件样式，类似于网页上的css。

2.WXSS和CSS的区别

1. 新增了rps的尺寸单位

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

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

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

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

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

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

   class和#id

   element

   并集选择器，后代选择器

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

   js逻辑交互

   1.小程序的js文件

   此文件用来处理用户的操作，例如：响应用户点击、获取用户位置等等

   2.js文件的分类

   1.app.js

   是整个项目的入口文件，通过调用APP（）函数来启动整个程序

   2.页面的js文件

   是页面的入口文件，通过调用Page（）函数来启动页面

   3.普通的js文件

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

   宿主环境

   1.什么是宿主环境

   程序运行所必须的依赖环境

   例如：安卓和苹果，他们的app是不能相互运行的

   2.小程序的宿主环境

   手机微信是小程序的宿主环境

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

   1.通信模型

   2.运行机制

   3.组件

   4.api

   通信模型

   1.通信的主体

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

   1.WXML和WXSS样式工作是在渲染层

   2.js脚本是工作在逻辑层的

   2.小程序的通信模型

   两个部分

   1.渲染层和逻辑层

   由微信客户端进行转发

   2.逻辑层和第三方服务器

   由微信客户端进行转发

   运行机制

   1.小程序的启动过程

   1.将小程序的代码包下载到本地

   2.解析里面的app.json全局配置文件

   3.执行app.js的小程序入口文件，调用APP()创建小程序案例

   4.渲染小程序首页

   5.小程序启动完成

   2.页面的渲染过程

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

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

   3.执行页面的js文件，调用Page（）创建页面实例

   组件

   1.小程序中组件的分类

、