微信小程序开发——从头开始（简介）

从零开始

微信小程序中只有四种类型的文件

Js-----------JavaScript文件

Json--------项目配置文件，负责窗口颜色等

Wxml---------类似于html文件

Wxss----------类似于CSS文件

根目录中由app命名的四种类型的文件是程序条目文件。

app.json

你必须有这个文件。如果没有此文件，IDE将报告错误。因为微信框架使用这个作为配置文件条目，我们只需要创建这个文件并在其中写一个大括号。将来，我们将在这里全局配置整个小程序。它记录页面的组成，配置小程序的窗口和背景，配置导航栏的样式，并配置默认标题。

app.js

此文件必须可用。否则，将报告错误。但是，可以在不写任何内容的情况下创建此文件。将来，我们可以监听和处理小程序的生命周期函数，并在此文件中声明全局变量。

app.wxss

此文件不是必需的。内部文件只是全局css文件样式。

app.wxml

这是不必要的，它不涉及主界面，因为小程序中的主界面由JSON文件中的配置类确定。

使用app.js，app运行程序时，json的两个文件不会报告错误，这意味着这是最简单的微信小程序

你好字

创建程序实例

app。js文件管理整个程序的生命周期，因此添加了以下代码：（进入App IDE时会提示您）

app({

onlaunch:函数（）{

安慰日志（“app发布”）

},

onShow:函数（）{

安慰日志（“app显示”）

},

onHide:函数（）{

安慰日志（“app隐藏”）

}

})

具体的API解释如下

应用（）

App（）函数用于注册小程序。接受一个Object参数，该参数指定小程序的生命周期函数。

对象参数描述

属性

类型

描述

触发定时

启动时

作用

生命周期函数--侦听器小程序初始化

小程序初始化完成后，将在启动时启动（仅全局触发一次）

在Show上

作用

生命周期功能——监控小程序的显示

当小程序从后台启动或进入前台显示时，将触发onShow

打开隐藏

作用

生命周期功能——监听小程序的隐藏

当小程序从前景进入背景时，它将启动隐藏

另外

任何

开发人员可以将任何函数或数据添加到Object参数中，可以使用

前景和背景的定义：当用户点击左上角关闭，或按下设备的主页按钮离开时，小程序不会被直接销毁，而是进入背景；当你再次打开微信或进入小程序时，你将从后台进入前台。只有小程序进入后台一定时间，或者系统资源被占用过多，才能真正被破坏。

美化操作栏

json文件负责配置ActionBar颜色。我们只需要在其中添加以下代码

App.json配置项列表

属性

类型

要求的

描述

页

大堆

对

设置页面路径

窗户

对象

不

设置默认页面的窗口表示

选项卡栏

对象

不

设置底部选项卡的性能

网络超时

对象

不

设置网络超时

调试

布尔值

不

设置是否启用调试模式

属性

类型

违约

描述

导航栏背景颜色

六边形颜色

#000000

导航栏背景颜色，如“#000000”

导航栏文本样式

一串

白色

导航栏标题颜色，仅支持黑白

导航栏标题文本

一串

导航栏标题文本内容

美化界面

wxml和wxss文件用于美化界面。为了使程序代码结构简单，我们需要在根目录中创建一个新文件夹，该文件夹具有随机名称，这里我们称之为页面。然后我们在pages文件夹中创建一个具有随机名称的文件夹，这里我们称其为index

然后我们创建index.wxml文件并在其中编写以下代码

<视图>

你好

然后我们创建index.wxss文件，并在文件中输入以下代码

.窗口{

颜色：#4994fa；

}

然后我们创建index.js文件

在文件中输入以下代码（输入Page IDE时将提示您）

第页({

数据：{

//正文：“这是一页”

}，

onLoad:函数（选项）{

//页面初始化选项为页面跳转带来的参数

}，

onReady:函数（）{

//页面呈现已完成

}，

onShow:函数（）{

//页面显示

}，

onHide:函数（）{

//页面隐藏

}，

onUnload:函数（）{

//页面关闭

}

})

功能说明如下：

页

Page（）函数用于注册页面。接受Object参数，该参数指定首字母缩写