微信小程序开发基础指南

微信小程序开发基础指南

今天，我们将开始微信小程序开发。在此之前，我们已经复习了基本的准备工作，包括熟悉开发工具、基本文档和开发准备。以下是一些需要注意的基础和要点。

登录并创建项目

首先，需要使用微信扫描二维码进行登录。登录后，选择加号按钮，并输入相应的信息（AppId是在登录邮箱后生成的信息），以创建项目。创建项目后，选择该项目进入开发界面。

项目结构

在项目目录中，有三个全局文件：app.js、app.json 和 app.wxss。

• app.js： 全局逻辑文件。
• app.json： 全局配置文件。
• app.wxss： 全局样式文件。

每个页面对应四个文件：.json、.wxml、.js 和 .wxss。其中，.wxml 文件和 .js 文件是必需的。不要创建空白的 .json 文件，这会导致页面路径查找失败。如果已创建，则至少应将 {} 添加到文件中。

数据绑定

数据绑定是小程序开发中的一个重要概念。通过双大括号 {{}} 来标识数据绑定。例如：

{{num}}

在 .js 文件中，可以通过 data 属性来定义数据：

Page({
  data: {
    num: 1
  }
})

事件处理

事件处理是用户与小程序交互的关键。在 wxml 文件中，可以使用 bindtap 属性将点击事件绑定到按钮。例如：

点击我

在 .js 文件中，定义 handleTap 函数来处理点击事件：

Page({
  data: {
    num: 1
  },
  handleTap: function() {
    this.setData({
      num: this.data.num + 1
    });
  }
})

创建页面

在页面上右键点击，选择创建一个新目录，创建一个主路径，然后在 app.json 中添加主路径。这样，在主目录下会自动生成四个文件。此时，无需在主文件夹下逐个手动添加文件。

WXSS 样式

WXSS 样式与 CSS 基本一致，但有一些特定的规则和单位。

• 尺寸单位： 使用 rpx 单位，可以根据屏幕宽度自动调整大小。
• 全局样式： app.wxss 作为全局样式文件，对所有页面生效。
• 局部样式： 每个页面的 .wxss 文件仅对当前页面有效。
• 选择器： WXSS 仅支持部分 CSS 选择器。

事件绑定和捕获阶段

事件绑定分为两种类型：普通绑定和捕获绑定。

• 普通绑定： 不会阻止冒泡事件向上冒泡。
• 捕获绑定： 可以防止冒泡事件向下冒泡。

触摸事件支持捕获阶段，触发顺序是从外到内。例如：

  
    
      点击我
    
  

触发顺序为：handleTap2 -> handleTap4 -> handleTap3 -> handleTap1。

总结

通过以上内容，我们了解了微信小程序开发的基本步骤和注意事项。掌握了这些基础知识，你就可以开始编写自己的小程序了。希望本文对你有所帮助。