第一个微信小程序 HELLO WORD

### 第一个微信小程序 HELLO WORLD 本篇文章将详细介绍如何创建并运行您的第一个微信小程序——“HELLO WORLD”。本文旨在引导初学者逐步了解微信小程序的基本结构与功能实现，从而为更深入的学习打下基础。 #### 文件分布结构 在微信小程序开发过程中，首先需要明确的是其文件的分布结构。以下为一个简单的“HELLO WORLD”小程序所包含的主要文件及其作用： - **app.wxss**：定义了整个小程序的公共样式表。 - **app.js**：负责管理整个小程序的生命周期和提供app级别的数据及事件处理。 - **app.json**：是小程序的全局配置文件，用于定义小程序的基本属性，包括页面路径、窗口配置以及调试模式等。 - **pages/**：该目录下包含了所有页面相关的文件夹。每个页面都有自己的文件夹，例如`index`文件夹中包含了`index.js`、`index.wxml`、`index.wxss`等文件，分别负责页面的业务逻辑、模板结构和样式。 - **utils/util.js**：这是一个工具类文件，可以在这里编写一些通用的功能函数，如日期格式化等，并通过`module.exports`将其导出以供其他文件引用。 #### 业务逻辑部分 对于不同的项目，虽然文件的组织方式可能有所不同，但基本元素（页面`Page`）的结构保持不变。在“HELLO WORLD”项目中，主要关注的是`pages`文件夹下的内容。具体来说： - `pages`文件夹包含了不同的业务逻辑页面，例如`index`文件夹作为主页面，`logs`文件夹则用于日志页面。 - `utils`文件夹用于存放工具类函数。在这个示例中，通过`module.exports`导出了一个`formatTime`函数，以供其他文件调用。 #### 程序主体部分 程序主体部分主要包括三个核心文件：`app.wxss`、`app.js`和`app.json`。 - **app.json**：这是小程序的核心配置文件，其中定义了各个页面的路径以及小程序的基础配置信息。例如： ```json { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#BF0000", "navigationBarTitleText": "HelloWord", "navigationBarTextStyle": "#FFFFFF" }, "debug": true } ``` 其中`pages`数组指定了小程序由哪些页面组成，数组的第一项代表小程序启动时的初始页面；`window`用于设置小程序的状态栏、导航条等外观；`debug`表示是否开启调试模式。 - **app.wxss**：该文件用于定义小程序的全局样式。WXSS是一种专为微信小程序设计的样式语言，类似于CSS。例如： ```css .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } ``` - **app.js**：这个文件负责管理整个小程序的生命周期，例如监听小程序的启动、显示和隐藏等事件。 #### 页面代码说明 - **index.js**：这个文件负责处理主页面的逻辑。例如初始化数据和响应用户事件： ```javascript // index.js var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, item: { index: 0, msg: 'this is a template', time: '2016-09-15' } }, bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' // 转到 logs 页面 }) }, viewTap: function () { console.log('viewtop'); this.setData({ memberName: { value: 'ylong52' } }) wx.navigateTo({ url: '../index/input' }) }, onLoad: function (options) { console.log(options) var that = this this.setData({ title: options.title }) // 调用应用实例的方法获取全局数据 app. ``` 通过以上介绍，我们可以看到一个简单的微信小程序是如何构建起来的，从文件结构到具体功能实现都做了详细说明。这将有助于初学者快速上手微信小程序开发。