一、 开发前的准备工作

在开始编写代码之前，我们需要先完成账号注册和开发工具安装这两项基础且重要的工作。

1. 注册小程序账号

要开发微信小程序，首先需要有一个小程序账号。你可以通过浏览器访问微信公众平台，点击右上角的“立即注册”。在选择账号类型时，请务必选择“小程序”。注册流程需要填写邮箱、激活邮件，并完成主体信息登记（如果是个人学习使用，选择“个人”主体即可）。注册成功后，你可以在“开发” -> “开发设置”中看到非常重要的小程序 AppID，后续创建项目时会用到它。

2. 安装开发者工具

微信官方提供了功能强大的开发者工具，它集成了编码、调试、预览和上传等多种功能。你可以根据自己电脑的操作系统（Windows/Mac）从官网下载稳定版的安装包。安装过程非常简单，按提示下一步即可完成。安装完成后，打开工具并使用绑定的小程序账号扫码登录。

二、 认识小程序的项目结构

登录开发者工具后，我们可以创建一个新的项目，填入申请到的 AppID。创建完成后，你将看到一个清晰的项目目录结构，这是小程序开发的骨架。

一个标准的项目通常包含以下几个核心部分：

· pages/（存放页面）：这是最核心的文件夹，每个页面通常由四个同名的文件组成，放在一个独立的文件夹中：

  · .js 文件：页面的逻辑文件，处理用户交互、数据获取等。

  · .wxml 文件：页面的结构文件，类似网页开发中的 HTML，用于搭建页面的骨架。

  · .wxss 文件：页面的样式文件，类似网页开发中的 CSS，用于美化页面。

  · .json 文件：页面的配置文件，用于单独设置当前页面的窗口样式，如导航栏颜色等。

· utils/（工具类）：这个目录通常用于存放可复用的工具函数或模块，帮助简化代码逻辑。

· 核心全局文件：

  · app.js：小程序的入口文件，用于监听和应用的生命周期函数，定义全局变量。

  · app.json：全局配置文件。这个文件非常重要，它决定了小程序所有页面的路径、窗口的外观（如导航栏颜色、背景色）、底部的 tab 栏等。

  · app.wxss：全局样式文件，在这里定义的样式会作用于所有页面。

  · project.config.json：项目配置文件，记录了项目相关的设置，如 AppID、编译选项等。

三、 核心配置：全局与页面配置

小程序之所以灵活，很大程度上依赖于其强大的配置体系。在 app.json 中，我们需要配置最重要的 pages 字段，它列出了小程序中所有的页面路径。其中，数组的第一项代表小程序的初始页面。

例如，一个基础的 app.json 配置可能长这样：

```json

{

  "pages": [

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window": {

    "navigationBarBackgroundColor": "#ffffff",

    "navigationBarTitleText": "我的第一个小程序",

    "navigationBarTextStyle": "black"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

```

通过 window 字段，我们可以统一设置所有页面的导航栏样式、背景色等，非常方便。

四、 构建非表单页面：数据展示与视图渲染

既然我们约定不涉及表单，那么开发的重点就放在了数据的展示、列表渲染和视图交互上。小程序的数据绑定机制让这一切变得非常简单。

1. 数据绑定

在页面的 .js 文件的 data 对象中定义数据，然后在 .wxml 中使用双大括号 {{ }} 将数据绑定到页面上。当数据发生变化时，页面会自动更新。

示例：展示一段文本

在 index.js 中：

```javascript

Page({

  data: {

    motto: '欢迎学习小程序开发'

  }

})

```

在 index.wxml 中：

```xml

<view class="container">

  <text>{{motto}}</text>

</view>

```

2. 列表渲染

当你有一组数据需要展示（比如商品列表、文章标题）时，可以使用 wx:for 指令。它会根据数组内容，自动重复渲染当前的标签块。

示例：展示一个简单的列表

在 index.js 中：

```javascript

Page({

  data: {

    articleList: [

      { id: 1, title: '文章标题一' },

      { id: 2, title: '文章标题二' },

      { id: 3, title: '文章标题三' }

    ]

  }

})

```

在 index.wxml 中：

```xml

<view wx:for="{{articleList}}" wx:key="id">

  <text>文章标题：{{item.title}}</text>

</view>

```

这里 item 是默认的数组元素别名，index 是默认的索引别名。

3. 事件绑定

虽然我们没有表单，但用户依然会有点击图片、点击跳转等操作。这可以通过事件绑定来实现。使用 bind 加上事件名（如 bindtap）来绑定事件处理函数。

示例：点击列表项弹出提示

在 .wxml 中为列表项添加点击事件：

```xml

<view wx:for="{{articleList}}" wx:key="id" bindtap="onItemClick" data-id="{{item.id}}">

  <text>文章标题：{{item.title}}</text>

</view>

```

在 .js 中定义事件处理函数：

```javascript

Page({

  // ... data 定义

  onItemClick(event) {

    const articleId = event.currentTarget.dataset.id;

    wx.showToast({

      title: '点击了文章 ' + articleId,

      icon: 'none'

    });

    // 这里可以执行 wx.navigateTo 进行页面跳转

  }

})

```

通过 data-* 属性可以将数据（如 data-id）传递给事件处理函数。

五、 编写样式与体验优化

WXSS 样式语言大部分特性与 CSS 一致。对于布局，微信官方推荐使用 Flex 布局，它可以轻松实现页面的居中、排列和对齐。在 .wxss 文件中，你可以像写普通 CSS 一样编写样式，让页面看起来更美观。

此外，小程序提供了丰富的内置组件，如 <swiper>（轮播图）、<image>（图片）、<icon>（图标）等，直接使用这些组件能大大提高开发效率，且能保证良好的用户体验。

六、 预览与调试

编写代码的过程中，你可以随时点击开发者工具顶部的“编译”按钮查看效果。如果想在手机上体验真实效果，可以点击“预览”按钮，工具会生成一个二维码，用微信扫码即可在手机上打开你的小程序。开发者工具还提供了强大的调试器，可以帮助你定位和解决代码中的问题。