微信小程序app开发 学习记录：（一）

一、项目的构成

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

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

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

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

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

6.project.config.jason项目的配置文件

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

二、小程序页面的组成部分

所有小程序的页面都存放在pages目录

以单独文件夹存在：

其中每个页面由四个基本文件组成：

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

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

3.wxml文件（页面的模板结构文件）

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

jason配置文件的作用：

jason是一种数据格式 jason总是以配置文件的形式所出现

小程序中有4种jason文件：

1.app.jason文件（整个项目的全局jason文件，包括所有页面的路径、窗口外观、界面表现、底部tab等）

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

（2）window：全局定义小程序所有页面的背景色、文字颜色

（3）style：全局定义小程序组件所使用的样式版本

（4）sitemap.jason：用来指明sitemap.jason的位置

2.project.config.jason文件（记录对小程序开发工具所做的个性化配置）

（1）setting：保存了编译相关的配置

（2）projectname：保存项目的名称

（3）appid：小程序账号的id

3.sitemap.jason配置文件（用于配置小程序页面是否允许被微信索引）

里面的rules数组用于设置索引规则

4.每个页面文件夹中的jason文件（用于对本页面的窗口外观进行配置，页面中的配置会覆盖app.jason的window中相同的配置项）

注：

navigationStyle 可用的值为：default 默认样式、custom 自定义导航栏（只保留右上角胶囊按钮）。自微信客户端 7.0.0（基础库 2.5.2）开始支持。

在微信小程序中，renderer 的配置项 skyline 和 webview 分别代表两种不同的渲染模式。

1. skyline： skyline 是微信团队为提升小程序性能和渲染效率而研发的一种新型渲染引擎。它采用更先进的布局算法和优化策略，旨在提供更快的页面滚动、滑动以及动态内容加载等体验。对于初学者来说，通常无需特别指定渲染模式，默认情况下，小程序会使用 skyline 渲染器进行页面渲染。

2. webview： webview 模式则基于传统的 WebView 内核来渲染页面。相较于 skyline，其渲染机制更为传统，对 CSS 和 JavaScript 的支持可能更为全面，但性能上可能不如 skyline 引擎优化得好，尤其是在处理大量数据和复杂布局时。

三、新建小程序页面

只需要需要在app.jason->pages中新增页面的存放路径

意味着在pages文件夹里创建list目录，目录里面存放着list页面。

四、修改项目的首页

调整app.jason->pages数组页面中路径的前后顺序即可修改项目的首页。小程序会把排在第一位的页面当做项目首页进行渲染，如图所示：

五、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中的模板语法

数据绑定

列表渲染

条件渲染

六、wxss

wxss是一套样式语言，用于描述wxml的组件样式，类似于网页开发中的css

wxss和css的区别

1.新增了rpx尺寸单位

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

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

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

app.wxss作用于所有小程序页面

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

3.wxss仅仅支持部分css选择器

七、小程序的.js文件

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

小程序.js文件的分类：

1.app.js:整个小程序项目的入口文件，通过调用app（）函数来启动整个小程序

2.页面的.js文件：是页面的入口文件，通过调用page（）函数创建并运行页面

3.普通.js文件：是普通的功能木块文件，用来封装公共的函数或属性供页面使用