微信小程序开发-教案-2.1-教案-小程序全局配置文件.docxVIP

第2章小程序逻辑层

任务2.1小程序全局配置文件

课时内容

小程序全局配置文件课时4

教学目标

掌握小程序项目文件配置；掌握小程序主体文件配置；

教学重难点

掌握小程序主体文件配置；实现导航栏标题变色的小程序。

教学设计

.教学思路：介绍小程序项目文件配置，讲解小程序主体配置文件的属性；通过小程序实战巩固基础知识。

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

教学内容

一任务描述

开发者根据实际需要，重新修改定义全局配置文件叩p.json中的window属性，修改window属性中各种样式实现自己想要的效果。

二、导入新知

Ipages用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。小程序中新增/减少页面，都需要对pages数组进行修改。

小程序的目录结构主要包含项目配置文件、主体文件、页面文件和其他文件。本任务将基于任务1.7创建第一个微信小程序的项目，对代码文件的构成展开分析。开发目录如图2.1所示。

I-app-js|—app.json|—app.wxssI-pages|—index|—index.wxml|||—index.js

|—index.json1—index.wxss|1-logs

|—logs.wxml|1-logs.js1-utils

图2.1小程序开发目录1.项目配置文件

项目配置文件是project,config.json,每个小程序在新建时都会自动生成一个project,config.json文件，该文件直接位于项目根目录下，如图2.2所示。其内部代码可用来定义小程序的项目名称、AppID等内容，如图2.3所示。

资源管理器??,打开的编辑器▼MINIPROGRAM-1pages?indexindex.jsindex.json

田

资源管理器??

,打开的编辑器

▼MINIPROGRAM-1

pages

?index

index.js

index.json

田index.wxml

己index.wxss

logs

utils

叩p.js

app.json

?app.wxss《project.config.jsonsitemap.json

1?-description:?加目fidStK件，

7-packoptions:{*lnoreM:[]

).

setting-：{???M)4

-coiBpileType:IMproBd.

-libVersion*:*2.18.0-,eppld:

-projtctname:mlniprogrM-l**337debugOptlons*:(

hidedXnDevtoola*:

TOC\o1-5\h\zxL-tcripti*:(},

~-SUticS?rvtrOptioisM:{biseuRU*:

1?rveP?th-：-)

iBGameTourist*:

??conditiM■:{?-swrch*:《

sei])9

vconversation：

图2.2

图2.2项目配置文件位置

图2.3项目配置文件初始代码

2.主体文件

app.jsonX==n-app.json...1

app.json

X

==n-

app.json...

1v

2v

pages:[

3

pages/index/index,,

4

pages/logs/logs

5

],

6?

window:{

7

backgroundTextstyle:light,

8

navigationBarBackgroundColor:

9

navigationBarTitleText:Weixin,

10

navigationBarTextStyle:black

11

},

12

?style:v2M,

13

sitemapLocationM:sitemap.json

14

批注[1]:此处是否应该是页面文件？

批注[2R1]:已修改

属性

类型

说明

pages

StringArray

必填属性，用于记录小程序所有页面文件附蹈货地址。其中如果pages中包含多个页面，pages/index/index将默认为小程序的初始页面

表2.1全局配置文件app.json的属性

批注[3]:请老师确认该属性是networkTimeout,还是networkTimeout,中间是否有空格

批注[4R3]:network?imeout

批注[5]:是否为页面文件？

批注[6R5]:已修