微信小程序实战开发（二）：firstdemo项目的基本目录结构详解
摘要：在上一篇文章中，《微信》迷你计划的实践开发（i）：在《微信概论》中，我们已经了解了迷你计划的功能，开发工具以及如何创建现有的Mini计划项目。今天，我们将以这一示例来介绍迷你程序的基本目录结构。当我们打开微信小组...
在上一篇文章中，《微信》迷你节目（i）的实际开发：在《微信简介》中，我们已经了解了Mini计划的功能，开发工具以及如何创建现有的Mini计划项目。今天，我们将以这一示例来介绍迷你程序的基本目录结构。
当我们打开一个微信小程序项目时，单击以输入“编辑”菜单，我们可以看到有以下5个文件/文件夹）：文件夹，文件夹，全局文件app.js文件，全局文件app.json文件，json文件，图像编辑文件工具app.wxss文件。
小程序目录结构的整体结构如下：
我们将详细介绍每个文件和文件夹的功能以及预防措施。
1。内容简介
：主要是存储的页面文件，每个文件夹是一个页面，每个页面包含四个文件：
.js
.js是的逻辑文件，也称为事件交互文件和脚本文件，用于处理接口单击事件和其他功能，例如设置初始数据，定义事件，数据交互，逻辑操作，可变声明，可变声明，数组，对象，函数，评论方法等，语法与。我们可以打开它并仔细检查.js中的代码。
首先，我们可以在数据中显示单词并将其更改为微信小程序。如下图所示：
其次，让我们看一下：（）的函数是单击以跳到日志页面。我们可以单击头像以查看演示效果，如下图所示：
最后，让我们看一下该功能，这是页面启动时的操作。我们可以修改页面启动时显示的页面，或添加新功能，如下图所示：
常用的.js函数如下：
页（{
数据：{
//文字：“这是一个页面”
}，，
：）{
//页面初始化带来的参数作为页面跳跃
.log（'app'）
}，，
：）{
//页面渲染已完成
.log（'app'）
}，，
：）{
//页面显示
.log（'app'）
}，，
：）{
//页面隐藏
.log（'app'）
}，，
：）{
//页面关闭
.log（'app'）
}））
带有代码后缀的文件。我们可以在目录中创建.json作为配置文件，如下所示：
。颜色，文字颜色等。语法与JSON相同。让我们举一个例子，以修改导航栏的背景颜色为红色，如下图所示：
我们可以看到背景颜色变成红色。 。 （这种颜色真的很糟糕！）
.wxml
.wxml文件是一个接口文件，一个页面结构文件，用于构建页面并将控件添加到页面。全名是缩写，微信标记语言。像其他一般标记语言一样，标签是配对的，标签名称为小写。可以通过参考来控制外观，也可以通过绑定事件执行逻辑处理，我们需要的列表可以通过渲染完成。这是连接用户操作和后端逻辑的链接桥。我们在页面上看到的所有元素都可以在此处进行编辑。例如，我们在页面上放了一个按钮，如下图所示：
如何在.wxml中评论不需要的程序代码？如下：
{{。}} 000
{{}}
复制代码
注意：
1。微信小程序中的这些特定标签称为组件。
.wxss
.wxss是一个样式表文件，类似于前端中的CSS，并且是一个美化.wxml文件和页面文件的文件，使界面显示更漂亮。例如，设置图片的文本，颜色，宽度和高度的大小，设置位置，每个组件在.wxml中的间距。
注意：
1。小程序的每个页面都必须具有.wxml和.js文件，并且可能不需要其他两种类型的文件。
2。文件名必须与页面的文件夹名称相同。例如，该文件只能是.wxml，.wxss，.js和.json。
1.2
该文件主要用于存储一些全局.js文件。可以将一些公开的事件处理代码文件放在此文件夹中以供全局调用。例如，常见方法：处理时间，等。
。 = {
：
复制代码
对于允许外部呼叫的方法，请使用。声明他们使用以下代码将它们介绍在其他JS文件中
var util =（'../ ..///util.js'）
复制代码，然后您可以调用该方法。
例如：我们直接定义一个函数，如下图所示：
util（）{
.log（“模块称为!!”）
.. util = util
复制代码
然后在.js文件中调用此util函数，如下所示：
var =（'../ ..///util.js'）
复制代码
保存之后，我们可以在背景中看到我们定义的util内容被调用，如下所示：
1.3 app.js，app.json，app.wxss
app.js：该系统的方法处理全局文件，即文件中指定的函数和数据。在整个小程序中，每个框架页面和文件都可以使用此框架获得。每个小程序将有一个app.js文件，只有一个位于项目的根目录中！ app.js的函数是告诉小程序使用app（）形式注册一个实例，以实现在不同阶段（例如等）实现的事件函数，例如，事件上只有三个全局如下。小于页面上的事件。处理程序的声明周期的一些方法；例如：当程序刚运行时，事件处理。 app.js包含一个app（）方法，该方法提供了相应的事件定义，如下
应用程序（{
：）{
.log（'app'）
}，，
：）{
.log（'App Show'）
}，，
：）{
.log（'app hide'）
}））
复制代码应用程序（）函数用于注册一个小程序。接受指定的生命周期函数的参数，等等。
app.json：必须包括系统全局配置文件。包括设置页面路径，设置底部，网络，调试模式，设置导航头的颜色，字体大小以及是否有其他功能。特定页面的配置在页面的JSON文件中分别修改。任何页面都需要在app.json中。在页面中注册。如果您不在JSON中添加它，则该页面将无法打开。
”：[[
“ //”，
“/logs/logs”
]，，
复制代码
（框架中的JSON优先级高于全球JSON优先级。）
app.wxss：不需要全局接口美化代码。它的优先级也不如框架中的WXSS高。
例如：.wxss中的的保证金设置
。 {
-顶部： ;
复制代码还定义了app.wxss中的全局头像余量设置。我们看到执行哪一个。
。 {
-顶部： ;
在复制代码的重新启动过程中，我们可以看到全局参数被.WXSS覆盖。
添加和处理微信小程序
在微信小程序中添加图片非常麻烦。您只能打开项目文件夹并将图片放在目录中。只需参考代码中图像的相对或绝对路径即可。当前，在迷你程序开发中仅支持PNG和JPG格式，并且无法打开其他格式的图片。