小白福音，超级详细的小程序开发教程

1. 环境准备

1.1 安装开发工具

• 微信小程序：
  • 下载并安装微信开发者工具。
• 支付宝小程序：
  • 下载并安装支付宝开发者工具。

1.2 注册账号

• 微信小程序：
  • 前往微信公众平台注册一个小程序账号。
• 支付宝小程序：
  • 前往支付宝开放平台注册一个开发者账号。

2. 创建第一个小程序

2.1 创建项目

• 打开微信开发者工具，选择“新建小程序”。
• 输入小程序的AppID（如果没有，可以选择无AppID进行测试）。
• 填写项目名称和项目路径，点击“创建”。

2.2 项目结构

小程序的基本项目结构如下：

project
│
├── miniprogram
│   ├── pages
│   │   ├── index
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── ...
│   ├── app.js
│   ├── app.json
│   └── app.wxss
└── ...
​

• app.js：小程序的逻辑代码。
• app.json：小程序的全局配置。
• app.wxss：小程序的全局样式。
• pages：存放各个页面的文件夹，每个页面包含 .js、.json、.wxml 和 .wxss 文件。

3. 编写代码

3.1 app.json

在 app.json 中配置小程序的页面路径：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序"
  }
}
​

3.2 index.wxml

在 index.wxml 中编写页面的结构：

<view>
  <text>欢迎来到我的小程序！</text>
  <button bindtap="onTap">点击我</button>
</view>
​

3.3 index.wxss

在 index.wxss 中编写页面的样式：

text {
  font-size: 20px;
  color: #333;
}
​

3.4 index.js

在 index.js 中编写页面的逻辑：

Page({
  onTap: function() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    });
  }
});
​

4. 运行和调试

• 在微信开发者工具中，点击“编译”按钮，查看效果。
• 使用“调试”功能，可以查看控制台输出和网络请求。

5. 发布小程序

• 在完成开发后，前往微信公众平台提交审核，审核通过后即可发布。

6. 学习资源

 

• 官方文档：查看微信小程序官方文档和支付宝小程序官方文档。
• 视频教程：在B站、YouTube等平台搜索小程序开发的相关视频教程。
• 社区：加入小程序开发者社区，参与讨论和交流。

• 常用的开发语言

• 1. JavaScript
• 用途：小程序的逻辑部分主要使用JavaScript编写。你将使用JavaScript来处理用户交互、数据请求、页面跳转等功能。

• 2. WXML (WeiXin Markup Language)

• 用途：WXML是微信小程序的标记语言，用于描述小程序的结构和内容。它类似于HTML，定义了页面的元素和布局。

• 3. WXSS (WeiXin Style Sheets)

• 用途：WXSS是微信小程序的样式表语言，类似于CSS。它用于设置小程序中各个元素的样式，包括颜色、字体、布局等。

• 4. JSON (JavaScript Object Notation)

• 用途：JSON用于配置小程序的各种设置，如页面路由、窗口样式、网络请求等。小程序的配置文件（如 app.json 和页面的 .json 文件）通常使用JSON格式。

• 5. API

• 用途：小程序提供了一系列API（应用程序接口），用于与微信或支付宝的功能进行交互，如获取用户信息、发送请求、使用地图等。这些API通常通过JavaScript调用。

• 6. 其他技术（可选）

• TypeScript：一些开发者可能会选择使用TypeScript，它是JavaScript的超集，提供了类型检查和其他功能，适合大型项目。
• 框架和库：可以使用一些框架（如Taro、uni-app等）来简化小程序的开发，这些框架通常会使用JavaScript和其他相关技术。