微信小程序零基础入门_第一章小程序和开发者工具的介绍_微信小程序开发零基础入门周文洁电子档-CSDN博客

本文链接：https://blog.csdn.net/weixin_45817309/article/details/106965470

第一章小程序和开发者工具的基本介绍

1.1 小程序的开发工具

微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍，可以较为轻松地完成开发者账号的注册和开发工具的下载。

1.2 小程序的目录结构

小程序的目录结构主要包括了项目配置文件、主体文件、页面文件和其他的文件，下面将逐一对其进行介绍。

1.2.1 项目配置文件

        在新建小程序的时候，开发者工具会自动生成一个名为 project.config.json 的项目配置文件，该文件位于开发者工具的根目录下，如下图所示：

        项目配置文件的内部代码包括了用来定义小程序项目名称、AppID等内容的功能。

1.2.2 主体文件

        小程序的主体文件由 app.js,app.json,app.wxss 组成，与项目配置文件一样直接位于项目的根目录下，如下图所示：
         在这里插入图片描述
        直观可见，主体文件的名称均为app，根据其后缀名的不同可以将主体文件分为三个不同类型：

app.json：描述小程序的公共配置，必填；
app.js：描述小程序的整体逻辑，必填；
app.wxss：小程序的公共样式表，选填；
下面将较为详细地介绍这三种主体文件。

1.app.json

        该文件是小程序的全局配置文件，内部包括了小程序所有页面的路径地址、导航栏样式等。初始的app.json文件如下图所示。
         在这里插入图片描述
        该文件中主要包含了 pages 和 window 属性。除了这两个属性之外，还可以为其配置 tabBar、networkTimeout 和 debug 等属性。这里着重介绍 pages 和 window 属性。

（1）pages 属性
        pages属性对应的值是数组的的形式，数组中的每一项都通过字符串的形式记录小程序页面的路径地址。默认该数组的第一个元素为小程序的初始页面。如上图所示的 index 页面就是该小程序目前的初始页面。
        在开发过程中，可以通过手动调整数组元素顺序的方式快速预览对应页面的内容。
        若需要新建页面，新增页面的路径会自动更新到该文件 pages 属性中的最后一行。但是，当对页面进行删除操作或在硬盘中直接添加新页面，需要手动修改该处的 pages 属性值。

（2）window 属性
window属性对应的值是对象形式，具体可以包含的对象属性如下表所示：

属性	类型	默认值	描述
navigationBar BackgroundColor	HexColor	#000000	描述了导航栏的背景颜色，默认为黑色
navigationBarTextStyle	String	white	描述了导航栏的标题颜色，默认值为白色。该值只能为 white 或 black
navigationBarTitleText	String		导航栏标题文字内容，默认为空
navigationStyle	String	default	导航栏样式，该值只能为 default 或 custom ，其中 custom 用于自定导航栏内容，只保留右上角小图标
backgroundColor	HexColor	#ffffff	窗口的背景颜色，默认为白色
backgroundTextStyle	String	dark	下拉加载的样式。该值只能为 dark 或 light
backgroundColorTop	String	#ffffff	顶部窗口的背景颜色，只在IOS上有效
backgroundColorBottom	String	#ffffff	底部窗口的背景颜色，只在IOS上有效
enablePullDownRefresh	Boolean	false	是否开启下拉刷新功能
onReachBottomDistance	Number	50	页面上拉触底事件触发时距离页面底部的距离，以像素（px）为单位

（3）tabBar 属性
若小程序客户端窗口底部设计有用于切换界面的 tab 栏，则可以通过 tabBar 属性对 tab 栏进行配置。
tabBar 的属性值如下表所示：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字被选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabBar 上边框的颜色，该值只能为 black 或 white
list	Array	是		tab 的列表
position	String	否	bottom	tabBar 的位置，该值只能为 top 或 bottom

其中的 list 属性接受一个数组，允许配置最少两个、最多五个的 tab 。 tab 按数组的顺序排序，每项都为一个对象。其对应的属性值如下表所示：

属性	类型	必填	描述
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮的文字
iconPath	String	否	图标路径，大小限制为40KB，建议尺寸为81px × 81px，不支持网络图片
selectedIconPath	String	否	选中时的图标路径，大小限制为40KB，建议尺寸为81px × 81px，不支持网络图片

值得一提的是，当 position 属性值为 top 时， iconPath 和 selectedIconPath 属性失效。

（4）networkTimeout 属性
app.json 中的 networkTimeout 属性可以用于设置各类网络请求的超时时间，其属性值如下表所示：

属性	类型	必填	默认值	描述
request	Number	否	60000	wx.request()的超时时间，单位为毫秒
connectSocket	Number	否	60000	wx.connnectScoket()的超时时间，单位为毫秒
uploadFile	Number	否	60000	wx.uploadFile()的超时时间，单位为毫秒
downloadFile	Number	否	60000	wx.downloadFile()的超时时间，单位为毫秒

（5）debug 属性
开发者可以在开发者工具中使用 debug 模式，在开发者工具控制台面板中调试信息以 info 的形式给出，主要包括 Page 的注册、页面路由、数据更新、事件触发等内容，可以快速定位到一些常见问题。

2.app.js

该文件是小程序的全局逻辑文件，其基本框架如下：

App({
	onLaunch:function(){},
	globalData:{}
})

在该主体文件中，所有的内容都写在 APP() 函数内部，彼此之间用逗号隔开。

3.app.wxss

该文件为小程序全局样式文件。该文件为可选文件，如果没用全局样式的规定，可以不写该文件。

1.2.3 页面文件

        新建一个项目后，通常会在 pages 目录下生成两个二级目录，如下图所示：
         在这里插入图片描述
        该项目目前主要由 index 和 logs 两个页面组成，每一个单独的页面基本由4中基本文件构成，包括：js、json、wxml、wxss，具体说明如下：

wxml 文件：用于构建当前页面的结构，包括组件、事件等内容，直接影响着用户最终看到的页面效果；
wxss 文件：可选界面，设置当前页面的样式效果。该文件约定的样式会覆盖 app.wxss 中与之相冲突的约定，但不会影响到其他界面；
js 文件：可选页面，设置当前页面的逻辑代码；
json 文件：可选界面，可用于重新设置 app.json 文件中 window 属性规定的内容，新设置的内容只会显示在当前页面而不会影响其他界面。
json文件的可用属性如下表所示：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏的背景颜色
navigationBarTextStyle	String	white	导航栏的背景颜色，该值只能为 white 或 black
navigationBarTitleText	String		导航栏的标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，该值只能为 dark 或 light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距离页面底部的距离，单位为 px
disableScroll	Boolean	false	若为 true 则页面整体不能上下滚动。该项只在页面配置中有效，无法在 app.json 中设置

值得一提的是，页面的 JSON 文件只能设置与 window 相关的配置项，用以决定本页面的窗口表现，故无需像 app.json 那般专门写 window 属性

1.2.4 其他文件

        除了上述介绍的文件外，小程序允许开发者自定义路径和文件名创建一些辅助文件，如下图所示的 utils 文件夹就是用于存放公共 JS 文件的。
         在这里插入图片描述
        该文件夹中的 util.js 保存了一些公共的 JavaScript 代码，可以被其他界面的JS文件引用。
除此之外，开发者还可以自定义资源文件夹用于存放其他文件，例如下图便是在根目录下创建了 images 文件夹用于存放图片。
         在这里插入图片描述