微信小程序开发② - 小程序项目的基本组成

442 阅读5分钟

image.png

一、pages:所有的小程序页面,每个页面以单独的文件夹存在。例如这里的 index 文件夹

index 页面文件夹下包含 4 个基本的页面文件,这四个文件共同组成了 index 页面:

  1. index.js(.js文件) :页面的脚本文件,存放页面的数据、事件处理函数、生命周期等
  2. index.json(.json文件) :页面的配置文件,配置页面的外观、表现等
  3. index.wxml(.wxml文件) :页面的模板结构文件
  4. index.wxss(.wxss文件) :页面的样式表文件

二、utils 工具类文件夹

三、app.js:项目逻辑文件,用来 注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

四、app.json:公共配置文件,决定页面文件的路径、窗口表现、设置网络超时事件、设置多 tab 等

五、app.wsxx:小程序的公共样式表

六、project.config.json :项目配置文件,用来记录 对小程序开发工具所做的个性化配置

  1. setting 保存 编译相关的配置
  2. projectname 保存 项目名称
  3. appid 保存 小程序的账号ID

七、sitemao.json :配置小程序机器页面是否允许被微信索引

rules 保存 索引规则列表的配置。rules 规则中,action 表示页面是否能被索引(allow / disallow),page 表示生效的页面

相关问题

1.1. 一个小程序的页面由什么组成

小程序的页面由 4 个文件组成,并且这 4 个文件应被放入 pages 文件夹下的用一个文件夹中。

1.2. project.config.json 文件的作用是什么

项目配置文件,用来记录 对小程序开发工具所做的个性化配置

1.3. sitemap.json 文件的作用是什么

配置小程序机器页面是否允许被微信索引

1.4. 是否可以再 wxml 文件中,写入 div 标签?并说出原因

可以写入 div 标签,但是不要使用。 div 标签会被解析成 类view 标签效果。wxml 中需要写入小程序提供的组件,如果写入的为 非小程序组件,则会被解析为 类view 标签效果。

  • 什么是 WXML

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

  • WXML 和 HTML 的区别

(1)标签名称不同

HTML:div、span、img、a

WXML:view、text、image、navigator

(2)属性节点不同

ML:超链接

WXML:跳转到home页

(3)提供了动态渲染数据的模板语法

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

1.5. wxss 新增了什么尺寸单位?推荐使用什么选择器?

新增了 rpx 尺寸单位,一个 rpx 为页面宽度的 1/750。推荐使用 .class 类选择器

  • 什么是 WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS,具有 CSS 大部分的特性

  • 新增了尺寸单位 —— rpx,一个 rpx 为页面宽度的 1/750
  • 提供了全局的样式和局部样式

全局样式:写入到根目录的 wxss 中的样式

局部样式:写入到页面的 wxss 中的样式

  • 此外 WXSS 仅支持部分 CSS 选择器

(1).class(推荐使用) 和 #id

(2)element

(3)并集选择器和后代选择器

(4)::after 和 ::before 等伪类选择器

1.6. 小程序中的 .json 文件主要分为哪两种?当这两种配置文件出现相同配置时,会出现什么结果

项目根目录下的 .json 文件,页面中的 .json 文件。当两种配置文件出现相同配置时,以 页面的 .json 文件为主。


小程序中,额外多出了一个 .json 的配置文件,.json 文件主要分为两个:

(1)项目根目录下的 .json 文件

修改项目的基本配置:首页、navigationBarBackgroundColor

(2)页面中的 .json 文件

修改页面的基本配置(优先级高) navigationBarBackgroundColor

1.7. 什么是宿主环境?微信小程序项目为什么可以调用微信支付功能?小程序的运行环境是如何划分的?

宿主环境指的是 程序运行所必须的依赖环境;因为 微信小程序 的宿主环境为 手机微信,而手机微信提供了对应的功能,所以微信小程序可以调用微信支付功能;小程序运行环境分成 渲染层 和 逻辑层

小程序宿主环境 | 微信开放文档

宿主环境指的是 程序运行所必须的依赖环境

(1)web 前端的宿主环境为:浏览器

(2)android 软件的宿主环境为:android 系统

(3)IOS 软件的宿主环境为:IOS 系统

小程序的宿主环境为:微信客户端

所以小程序可以调用 微信客户端 中的 ① 扫码、② 支付、③ 登录、④ 分享 等等功能

小程序的运行环境:

分为 渲染层 和 逻辑层

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

  • 渲染层的界面使用了 WebView 进行渲染
  • 一个小程序存在多个界面,所以渲染层存在多个 WebView 渲染层

(2)JS 脚本 工作在 逻辑层

逻辑层采用 JsCore 线程运行 JS 脚本

(3)这两个线程的通信由 微信客户端 做中转

逻辑层 发送 网络请求 也经由 Native(微信客户端)转发

1.8. 小程序的内置组件

viewscroll-viewswiperswiper-itemtextrich-textbuttonimage

1.9. 小程序的成员管理

小程序开放平台 中,可以对小程序进行成员的管理。项目中所有成员被分为 三个角色:管理员(账号注册绑定的微信)、项目成员、体验成员