小程序开发之代码的实现

2019-09-03

对于用户而言,小程序的直观表现只是多个相互关联的页面。我们的小程序Hello WXapplet也一样,它由2个相互关联的页面构成:首页(index)与信息页(logs)。点击首页的头像就切换到信息页,在信息页点击“返回”可以从信息页返回到首页。

我们先从文件目录结构上来了解Hello WXapplet项目的构成。点击开发者工具左侧导航的“编辑”,我们可以看到Hello WXapplet项目的目录结构及包含文件。

Hello WXapplet项目的代码实现

我们再从代码层面了解Hello WXapplet项目的实现,根据小程序的目录结构,代码实现有两大部分——小程序实例与页面。

小程序实例的代码实现

小程序代码

在Web开发者工具的“编辑”模式下,我们来看Hello WXapplet这个项目里的代码文件,最关键也必不可少的是app.js、app.json、app.wxss这三个文件,分别代表脚本文件、配置文件、样式表文件。微信小程序运行时会读取这些文件,并生成小程序实例。

app.js脚本代码用于监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的API等。如本例app.js文件中,我们调用了的同步存储及同步读取本地数据的API——wx.setStorageSync()及wx.getStorageSync()。

小程序的开发实际上就是实现这些页面的展示(视图),以及实现“页面上用户交互事件”、“页面间切换逻辑”、“数据存储及网络调用”等事务与逻辑处理的过程。