🍊
0%

微信小程序开发入门教程

发表于 更新于 分类于

🚀 前言

微信小程序是一种全新的应用模式，它可以在微信中直接运行，用户无需下载安装即可使用，具有开发简单、轻量级、低成本等优点，非常适合创业公司、个人开发者等快速开发原型或小型商业应用。

🔧 准备工作

1. 安装微信开发者工具

微信小程序开发需要使用微信官方提供的开发者工具，点击这里下载适用于您的操作系统的开发者工具。

2. 注册微信小程序账号

点击这里，注册一个微信小程序账号。

3. 创建小程序

打开微信开发者工具，点击”新建小程序”按钮，按照提示填写小程序基本信息，即可创建一个最简单的小程序。

🚀 开发第一个小程序

1. 目录结构

创建小程序后，微信开发者工具会自动生成一些模板文件，目录结构如下：

1
2
3
4
5
6
7
8
9
10
myproject
├── app.js
├── app.json
├── app.wxss
└── pages
    └── index
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss

其中，app.js是小程序的脚本文件，app.json是小程序的配置文件，app.wxss是小程序的全局样式表。

pages目录下是小程序的页面文件，每个页面文件都由4个文件组成：脚本文件（.js）、配置文件（.json）、模板文件（.wxml）和样式表文件（.wxss）。

2. Hello World

打开index.wxml，在其中输入以下代码：

1
2
<!--index.wxml-->
<text>{{message}}</text>

打开index.js，在其中输入以下代码：

1
2
3
4
5
6
//index.js
Page({
  data: {
    message: "Hello World"
  }
})

应用这些变更后，点击微信开发者工具的”预览”按钮，可以在微信中查看效果。

3. 组件介绍

在示例代码中，我们使用了<text>标签，这是一种小程序内置的组件。在小程序中，所有显示内容都是由组件构成的，组件可以嵌套使用，从而构成丰富的页面布局。

下面简单介绍几个常用组件：

  • <view>：与HTML中的<div>类似，用于嵌套其它组件，可以设置样式或事件。
  • <text>：用于显示文本，可以设置颜色、字体大小等。
  • <button>：用于创建按钮，可以设置事件。
  • <image>：用于显示图片，可以设置 src 属性。

4. 数据绑定

在示例代码中，我们使用了{{message}}语法，将message变量的值绑定到<text>组件的内容中。

数据绑定是小程序中非常常用的功能。除了上述这种插值绑定，还可以在属性中使用绑定语法：

1
2
<!--index.wxml-->
<view class="{{className}}"></view>
1
2
3
4
5
6
//index.js
Page({
  data: {
    className: "red"
  }
})

这样的代码将给<view>组件的class属性动态赋值，从而实现样式切换等功能。

5. 事件处理

小程序中的事件处理与普通的Web开发类似，也可以使用事件冒泡、事件委托等技术。

下面是一个示例代码：

1
2
<!--index.wxml-->
<button bindtap="onClick">点击我</button>
1
2
3
4
5
6
//index.js
Page({
  onClick: function(event) {
    console.log("按钮被点击了")
  }
})

这段代码实现了一个简单的按钮点击事件，点击按钮后将在控制台输出信息。

6. 网络请求

小程序具有完善的网络功能，可以使用wx.request()API发送HTTP请求，并处理返回的结果。

下面是一个简单的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//index.js
Page({
  onLoad: function(options) {
    wx.request({
      url: "https://api.github.com/users/octocat",
      success: function(res) {
        console.log(res.data)
      },
      fail: function() {
        console.log("请求失败")
      }
    })
  }
})

这段代码实现了一个简单的网络请求，使用GitHub API获取了用户octocat的信息，并在控制台输出了返回结果。

如需深入学习相关内容，可以参考微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/index.html 。