微信小程序app.js中数据获取、存储及登录接口调用相关代码解析

2025-07-18
来源:万象资讯

//app.js

App({

: () {

//调用API从本地缓存中获取数据

var logs = wx.(\'logs\') ||

logs.(Date.now())

wx.(\'logs\', logs)

},

:(cb){

var that = this;

if(this..){

cb == && cb(this..)

}else{

//调用登录接口

wx.({

: () {

wx.({

: (res) {

that.. = res.;

cb == && cb(that..)

})

});

},

:{

:null

})

小程序页面配置详解_微信小程序开发入门与案例_微信小程序app.js开发教程

app.json文件对整个小程序进行了全局性的设置。在此文件中,我们可以设定小程序由哪些页面构成,还可以调整小程序的窗口背景颜色,以及导航条的样式,并定义默认的标题。需要注意的是,该文件中不允许添加任何注释。若需了解更多的配置选项,请参阅配置的详细说明。

:,

:{

:,

: #fff,

xt: ,

le:

小程序中,app.wxss文件充当了全局的样式定义。通过在页面组件的相应属性中引用,我们可以直接应用app.wxss中定义的样式规则。

/**app.wxss**/

. {

: 100%;

: flex;

flex-: ;

-: ;

-: -;

: 0;

box-: -box;

创建页面

本教程涉及两个页面,分别是欢迎页面和小程序启动日志展示页面,亦即页面和logs页面,这两个页面均位于同一目录之下。在微信小程序中,每个页面的【路径+页面名】信息必须记录在app.json文件中,其中app.json文件中列出的第一个页面即为小程序的首页。

每个小程序的页面由位于同一路径且名称相同的四个不同格式的文件构成,这些文件分别是:带有.js后缀的脚本文件、带有.wxml后缀的页面结构文件、带有.wxss后缀的样式表文件以及带有.json后缀的配置文件。

.js 文件是页面脚本,其中我们能够对页面生命周期函数进行监听与处理,获取小程序实例,声明与处理数据,并对页面交互事件作出响应。

//.js

//获取应用实例

var app = ()

Page({

data: {

: \' \',

: {}

},

//事件处理函数

: () {

wx.({

微信小程序app.js开发教程_微信小程序开发入门与案例_小程序页面配置详解

url: \'../logs/logs\'

})

},

: () {

.log(\'\')

var that = this

//调用应用实例的方法获取全局数据

app.((){

//更新数据

that.({

:

})

})

})

.wxss 是页面的样式表:

/**.wxss**/

. {

: flex;

flex-: ;

-: ;

.- {

: ;

: ;

: ;

-: 50%;

.- {

: #aaa;

. {

-top: ;

小程序页面配置详解_微信小程序开发入门与案例_微信小程序app.js开发教程

页面的样式表并非必须存在。一旦存在样式表,其规则将优先覆盖 app.wxss 中的样式。即便未指定页面的样式表,仍可在页面结构文件中直接应用 app.wxss 中定义的样式规则。

.json 是页面的配置文件:

页面的配置文件并非必需存在。一旦存在页面配置文件,其配置内容将优先于 app.json 中对应页面的配置项。若未设定页面配置文件,则该页面将直接采用 app.json 中的预设配置。

在 logs 页面中,我们通过控制标签对代码进行整理,同时利用 wx:for 功能将 logs 数据进行绑定,并实现节点的循环展开。

//logs.js

定义变量util,其值为指向路径\'../..//util.js\'的引用。

Page({

data: {

logs:

},

: () {

this.({

记录:若存在wx.\'logs\',则对其进行映射处理,否则直接映射,映射过程中对每个日志项进行操作。

util.(new Date(log))

})

})

})

这样我们就完成了一个简单入门级微信小程序开发。

分享