微信小程序开发教学系列（1）- 开发入门

第一章：微信小程序简介与入门

1.1 简介

微信小程序是一种基于微信平台的应用程序，可以在微信内直接使用，无需下载和安装。它具有小巧、高效、便捷的特点，可以满足用户在微信中获取信息、使用服务的需求。

微信小程序采用前端技术进行开发，主要使用HTML、CSS和JavaScript。通过微信开发者工具，可以方便地进行小程序的开发、调试和发布。

1.2 入门准备

在开始微信小程序开发之前，首先需要完成以下准备工作：

1.2.1 下载微信开发者工具

微信开发者工具是进行小程序开发的必备工具，可以在微信公众平台上下载安装。=> 官网下载直通车
安装好后打开界面如下图所示，初次打开会弹出一个二维码，使用开发者微信扫码授权即可：

1.2.2 注册小程序账号

在微信公众平台上注册一个小程序账号，用于后续的开发和发布。=>官方注册指引

1.2.3 创建小程序项目

打开微信开发者工具，选择新建小程序项目，在弹出的对话框中选择小程序的AppID（我这里使用的是一个已经申请好的AppID，当然可以直接点击这里的蓝色文字申请测试账号）、项目目录和项目名称等信息，点击确定即可创建一个新的小程序项目。
创建小程序项目

这里后端服务这块我们选择不使用云服务，模板选择JavaScript基础模板。可以看到右侧已经有了相应的一个初始页面的预览图，我们点击底部的确定按钮即可生成初始代码。

1.3 创建第一个微信小程序

接下来，我们来创建我们的第一个微信小程序。

1.3.1 目录结构

在创建小程序项目后，可以看到项目中的一些默认文件和目录结构。下面是一个简单的目录结构示例：

project
|-- pages
|   |-- index
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   |-- index.wxss
|-- app.js
|-- app.json
|-- app.wxss

pages 目录存放小程序的页面文件，每个页面通常由多个文件组成，包括 JavaScript 逻辑代码、JSON 配置、WXML 模板和 WXSS 样式表。
app.js 是小程序的全局逻辑文件。
app.json 是小程序的全局配置文件。
app.wxss 是小程序的全局样式表。

1.3.2 配置小程序信息

打开 app.json 文件，配置小程序的基本信息，包括小程序的名称、导航栏样式、页面路径等。下面是一个示例：

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "Hello World"}
}

在上面的示例中，我们定义了一个页面 index，并设置了导航栏标题为 “Hello World”。

1.3.3 创建页面文件

模板生成的代码已经是一个挺好的参考入门项目了，这里为了我们有一个初始的开发体验，我们小刀几笔。首先我们在app.json文件内删除logs相应的配置，并删掉模板自动生成的logs文件夹，清空app.wxss的所有内容。然后我们修改 pages 目录下的 index 的文件夹下的文件：

index.js：页面的 JavaScript 逻辑代码
index.json：页面的 JSON 配置文件
index.wxml：页面的 WXML 模板文件
index.wxss：页面的 WXSS 样式表文件

在 index.wxml 中编写页面的结构和内容，例如：

<view class="container"><text class="title">Welcome to WeChat Mini Program!</text><button class="button" bindtap="onTap">Click Me</button>
</view>

在 index.js 中编写页面的逻辑代码，例如：

Page({onTap() {wx.showToast({title: 'Hello World',icon: 'success',duration: 2000})}
})

在 index.wxss 中编写页面的样式代码，例如：

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.title {font-size: 50rpx;margin-bottom: 50rpx;padding: 50rpx;
}.button {width: 300rpx;height: 100rpx;background-color: #00a5e0;color: #fff;border-radius: 50rpx;
}

1.3.4 预览小程序

在开发者工具最左侧会直接展示项目预览效果，点击左上角模拟器即可操作关闭或开启预览。我们在预览界面中可以执行仿真的操作，点击左上角头像下方的机型文字，即可切换预览不同尺寸标准的机型展示效果。在我们本文的小程序中，我们把Hello World放到了一个弹窗提示的消息中，我们点击蓝色的小按钮，即可看到效果。
小程序开发初体验