微信小程序开发简介(二)

小程序开发


浏览:1138 次

出身背景

在上一篇文章中,我们已经开始了小程序的开发,申请了小程序序列号,并准备了开发环境。今天,我们来分析一下小程序的项目结构。

项目结构

小程序的项目结构如下图所示。小程序项目主要包括四种类型的文件:

带有的JSON配置文件。json后缀

具有的WXML模板文件。wxml后缀

具有的WXSS样式文件。wxss后缀

JS脚本逻辑文件。js后缀

配置文件

小程序项目包含许多配置文件,用于从不同级别配置某些属性。

app.json

app。Json是当前小程序的全局配置,包括所有页面路径、界面表示、网络超时、底部选项卡等。下表显示了在app的所有27个配置项之前创建的测试项的app。json json如下。对于初学者来说,您不能过分关注每个配置项,否则您可能会迷失在配置的海洋中。同时,您可以看到,只有两个必要的配置项,其中许多项特定于特定场景。所以现在你只需要对app有另一种感性的理解。json,其中包括小程序的全局配置。

属性

类型

要求的

描述

入口页面路径

一串

小程序的默认启动主页

字符串[]

页面路径列表

对象

全局默认窗口表示

选项卡栏

对象

底部选项卡的性能

网络超时

对象

网络超时

调试

布尔值

是否启用默认关闭的调试模式

功能页面

布尔值

启用插件功能页,默认关闭

子包装

对象[]

分包结构配置

工人

一串

放置工作代码的目录

所需背景模式

字符串[]

能够在后台使用,如音乐播放

插件

对象

使用的插件

预加载规则

对象

分包预下载规则

可调整大小

布尔值

PC小程序是否支持用户随意更改窗口大小(包括最大化窗口);iPad小程序是否支持屏幕旋转。默认情况下关闭

使用组件

对象

全局自定义组件

准许

对象

与小程序界面权限相关的设置

站点地图位置

一串

指明json的站点地图位置

风格

一串

指定使用升级的weui样式

使用扩展库

对象

指定要引用的扩展库

入口声明

对象

使用小程序打开微信消息

暗模式

布尔值

小程序支持DarkMode

主题位置

一串

指明主题json的位置。如果暗模式为真,则需要

lazyCode加载

一串

配置自定义组件代码按需注入

单页

对象

与单页模式相关的配置

服务提供商票证

一串

定制服务提供商账单

嵌入式应用ID列表

字符串[]

半屏小程序appId

半页

对象

视频号直播半屏场景设置

调试选项

对象

调试相关配置

以下显示了app的内容。json,其中包含必要的配置项。

{

“页面”:[

“页面/索引/索引”,

“页面/日志/日志”

],

“窗口”:{

“backgroundTextStyle”:“浅”,

“navigationBarBackgroundColor”:“#fff”,

“navigationBarTitleText”:“Weixin”,

“navigationBarTextStyle”:“黑色”

},

“style”:“v2”,

“站点地图位置”:“站点地图.json”

}

页面字段用于描述当前小程序的所有页面路径。微信小程序通常包含多个页面。页面放在pages目录中,每个页面可能需要在json的pages字段下的app Register中,否则跳转时将找不到页面。文件名不需要有文件后缀。框架将自动找到相应的。json等,。js、,。wxml和。wxss文件进行处理。例如,我们的测试项目的目录结构如下,包括两个页面,索引和日志。

├── app.js

├── app.json

├── app.wxss

├── 页

│ │── 指数

│ │ ├── 索引.wxml

│ │ ├── 索引.js

│ │ ├── 索引.json

│ │ └── 索引.wxss

│ └── 日志

│ ├── 日志.wxml

│ └── 日志.js

└── 实用程序

因此,我们项目的app页面。json的配置如下

“页面”:[

“页面/索引/索引”,

“页面/日志/日志”

]

同时,通过entryPagePath配置项配置小程序的启动页面。如果未配置,默认页面中的第一项是启动页面。

窗口字段定义小程序所有页面的顶部背景色、文本颜色定义等。其具体特性如下表所示。

同时,每个页面也有自己的页面配置文件,如索引。json配置页面。如果配置内容与