超级硬核的来了，小程序开发教程附上案例

大手子唐可可

已于 2024-07-31 18:22:11 修改

阅读量1k

点赞数 7

文章标签：微信小程序

于 2024-07-31 18:21:08 首次发布

本文链接：https://blog.csdn.net/xiaowei0016/article/details/140829594

版权

小程序开发详细教程

1. 环境准备

1.1 注册账号

微信小程序：
1. 前往微信公众平台。
2. 点击“注册”，选择“小程序”。
3. 按照提示填写相关信息，完成注册。
4. 注册完成后，你将获得一个AppID，用于后续开发。

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
└── ...

3. 编写代码

3.1 app.json

在 app.json 中配置小程序的页面路径和窗口样式：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

pages：定义小程序的页面路径。
window：设置小程序的窗口样式。

3.2 app.js

在 app.js 中编写小程序的逻辑代码（通常可以保持为空）：

App({
  onLaunch: function () {
    // 小程序初始化
    console.log("小程序启动");
  }
});

onLaunch：小程序初始化时触发的事件。

3.3 index.wxml

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

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

<view>：相当于HTML中的<div>，用于布局。
<text>：用于显示文本。
<button>：按钮组件，bindtap用于绑定点击事件。

3.4 index.wxss

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

使用CSS样式来美化页面。

3.5 index.js

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

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

Page：定义一个页面，onTap是按钮点击事件的处理函数。

4. 运行和调试

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

5. 添加更多页面

如果你想添加更多页面，可以按照以下步骤进行：

5.1 创建新页面

在 pages 文件夹中创建新的页面文件夹，例如 about。
在 about 文件夹中创建 about.js、about.json、about.wxml 和 about.wxss 文件。

5.2 配置新页面

在 app.json 中添加新页面的路径：

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ]
}

5.3 编写新页面代码

在 about.wxml 中编写页面结构：

<view class="about-container">
  <text>这是关于页面</text>
  <button bindtap="goBack">返回首页</button>
</view>

在 about.wxss 中编写样式：

.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

在 about.js 中编写逻辑：

Page({
  goBack: function() {
    wx.navigateBack(); // 返回上一页
  }
});

6. 路由导航

在 index.wxml 中添加一个按钮，跳转到关于页面：

<button bindtap="goToAbout">关于</button>

在 index.js 中添加跳转逻辑：

Page({
  onTap: function() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    });
  },
  goToAbout: function() {
    wx.navigateTo({
      url: '/pages/about/about'
    });
  }
});

7. 发布小程序

在完成开发后，前往微信公众平台，登录你的账号。
在“开发”菜单中，选择“上传代码”，将你的代码上传到微信服务器。
提交审核，审核通过后即可发布。

8. 学习资源

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

9. 进阶学习

学习使用小程序的API，如获取用户信息、网络请求等。
探索小程序的组件化开发，使用自定义组件。
学习使用第三方库和框架（如Taro、uni-app等）来提高开发效率。

10. 示例项目

为了帮助你更好地理解小程序开发，下面是一个简单的示例项目结构：

my-mini-program
│
├── miniprogram
│   ├── pages
│   │   ├── index
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   ├── about
│   │   │   ├── about.js
│   │   │   ├── about.json
│   │   │   ├── about.wxml
│   │   │   └── about.wxss
│   ├── app.js
│   ├── app.json
│   └── app.wxss
└── ...

11. 代码示例

以下是完整的代码示例，供你参考：

app.json

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

app.js

App({
  onLaunch: function () {
    console.log("小程序启动");
  }
});

pages/index/index.wxml

<view class="container">
  <text class="title">欢迎来到我的小程序！</text>
  <button bindtap="onTap">点击我</button>
  <button bindtap="goToAbout">关于</button>
</view>

pages/index/index.js

Page({
  onTap: function() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    });
  },
  goToAbout: function() {
    wx.navigateTo({
      url: '/pages/about/about'
    });
  }
});

pages/about/about.wxml

<view class="about-container">
  <text>这是关于页面</text>
  <button bindtap="goBack">返回首页</button>
</view>

pages/about/about.wxss

.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

pages/about/about.js

Page({
  goBack: function() {
    wx.navigateBack(); // 返回上一页
  }
});

12. 运行和调试

编译和预览：
- 在微信开发者工具中，点击“编译”按钮，查看效果。
- 你可以在工具的右侧面板中查看页面的实时预览。
调试：
- 使用“调试”功能，可以查看控制台输出和网络请求。
- 在代码中使用 console.log 输出调试信息，例如：
```
console.log("按钮被点击了！");
```
模拟器：
- 微信开发者工具提供了多种设备模拟器，可以选择不同的设备进行测试。

13. 发布小程序

上传代码：
- 在微信开发者工具中，选择“上传”按钮，将你的代码上传到微信服务器。
- 确保在上传之前，所有的功能都经过测试，确保没有错误。
提交审核：
- 登录到微信公众平台。
- 在“开发”菜单中，选择“提交审核”。
- 填写相关信息，提交审核。
发布：
- 审核通过后，你可以在公众平台上选择“发布”按钮，将小程序正式上线。

14. 进阶学习

14.1 使用小程序API

学习如何使用小程序提供的API，例如：

获取用户信息：

wx.getUserInfo({
  success: function(res) {
    console.log(res.userInfo);
  }
});

发起网络请求：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
  }
});

14.2 组件化开发

学习如何创建自定义组件，以提高代码的复用性和可维护性。

组件的基本结构如下：

components/
├── myComponent/
│   ├── myComponent.js
│   ├── myComponent.json
│   ├── myComponent.wxml
│   └── myComponent.wxss

14.3 使用第三方库和框架

学习使用一些流行的框架，如Taro、uni-app等，这些框架可以帮助你更高效地开发跨平台的小程序。

15. 示例项目