微信小程序复习

柴泷

已于 2024-02-21 16:46:58 修改

阅读量859

点赞数 16

文章标签：微信小程序小程序

于 2024-02-21 16:42:54 首次发布

本文链接：https://blog.csdn.net/weixin_45306248/article/details/136186452

版权

文章目录

前言
一、微信小程序是什么？
二、微信小程序结构复习篇
总结

前言

这篇博客写于我工作一年之后，我目前就职的公司主要负责的项目是ERP系统的前端部分，近一年使用的都是umi框架和antd组件，对于微信小程序的开发已经很生疏了，打工一年，我觉得作为程序员应该试试开发一个自己的项目运营，思考再三，打算以微信小程序作为起点创作，我并不打算照搬别人的代码，但是自己从头开发又有许多知识已经遗忘，所以打算一边复习一边写下这篇博客巩固知识方便记忆。

一、微信小程序是什么？

微信小程序是由微信推出的一种轻量级应用形式，它允许开发者使用小程序框架基于JavaScript、WXML（WeiXin Markup Language）、WXSS（WeiXin Style Sheet）等技术进行开发。
我上学时先是学了vue框架再去接触微信小程序的，当时老师就说了，微信小程序和vue非常相似，果不其然，没花多少时间就掌握了基础的界面编写，和vue的主要区别我认为在于一些函数名称的不同，比如同样是点击，vue框架和微信小程序有着不同的叫法，但是原理和思路上是差不多的。
等到上班之后对于微信支付和微信登录一些功能的接触让我有了独立开发微信小程序的底气。另外，因为微信小程序是基于微信存在的，它的请求安全性是有特殊规则的，不能像是自己独立开发的框架那样可以随意的调用接口等等。

二、微信小程序结构复习篇

1.页面组成

制作一个前端的页面，首先要知道的应该是纯前端的界面如何编写了，微信小程序的一个用户页面分别由wxml,wxss,js,json四个代码页面组成。
以index作为名称举例，index.wxml可以理解为index.html，是用来写HTML标签的，不过微信小程序有着一些独有的标签，例如block、scroll-view等。
index.wxss可以理解为index.css，显而易见，是用来描述页面的样式和布局，基本试用css，但是也有独有的东西，比如用于移动端的单位rpx，这个很方便。
接着是index.js，很显然，这是写js的页面，但是微信小程序是有着它独有的函数的，比如获取用户身份信息，比如跳转，它在结构上相似vue，但是函数上多了一些独有的东西。
再然后是index.json，JSON 文件用于配置页面或组件的一些属性，例如页面的标题、页面的导航栏颜色、页面是否支持下拉刷新等，这也是微信小程序的特点之一，有点类似低代码的感觉，可以方便快捷的设置这些内容而不必自己一个个写对应的逻辑，它可以修改单一界面的这些属性，也可以去全局的json中去写。

pages/
├── index/
│   ├── index.wxml
│   ├── index.wxss
│   ├── index.js
│   └── index.json
├── page1/
│   ├── page1.wxml
│   ├── page1.wxss
│   ├── page1.js
│   └── page1.json
└── ...

2.函数封装

有过项目经验的程序员都知道，我们写项目时经常有函数是需要多次使用的，每个页面都去写一次会让代码看起来十分臃肿，所以我们需要对一些常用的函数进行封装，在微信小程序的代码模板里面有一个叫做utils的的文件夹，里面有一个叫做utils.js的文件就是用来存放需要封装的函数的，等到需要使用时就会调用它。

utils/
├── utils.js

3.组件封装

组件封装也是写项目时常用的方法，封装好的组件通常放置在components文件夹下面，在需要时引用具体的组件

├── pages
│   └── ...
├── components
│   ├── component1
│   │   ├── component1.wxml
│   │   ├── component1.wxss
│   │   ├── component1.js
│   │   └── component1.json
│   ├── component2
│   │   ├── component2.wxml
│   │   ├── component2.wxss
│   │   ├── component2.js
│   │   └── component2.json
│   └── ...

4.接口封装

组件封装也是写项目时常用的方法，封装好的组件通常放置在components文件夹下面，在需要时引用具体的组件

├── utils/
│   ├── request.js        // 网络请求的封装
│   ├── api.js            // 业务接口的封装
│   ├── apiConfig.js      // 接口地址的管理
│   └── utils.js     // 其他通用工具函数

5.全局变量

小程序的全局变量通常放在app.js的globalData里面，需要是可以进行修改调用，还算方便

6.页面跳转

在微信小程序中，页面之间的跳转可以通过使用 wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBack 等 API 实现。以下是这些常用的跳转方式的简要说明：

wx.navigateTo：
- 保留当前页面，跳转到应用内的某个页面。新页面将被加入到页面栈中。
- 使用场景：在需要返回到前一个页面的情况下进行页面跳转。
```
wx.navigateTo({
  url: '/pages/page2/page2',
});
```
wx.redirectTo：
- 关闭当前页面，跳转到应用内的某个页面。新页面将替代原页面在页面栈中的位置。
- 使用场景：不需要返回到前一个页面，直接替换当前页面。
```
wx.redirectTo({
  url: '/pages/page2/page2',
});
```
wx.switchTab：
- 跳转到应用内的某个 tabBar 页面，并关闭其他所有非 tabBar 页面。
- 使用场景：主要用于底部 tabBar 导航切换。
```
wx.switchTab({
  url: '/pages/tab1/tab1',
});
```
wx.reLaunch：
- 关闭所有页面，打开到应用内的某个页面。
- 使用场景：在某些场景需要重新打开小程序的入口页面。
```
wx.reLaunch({
  url: '/pages/page1/page1',
});
```
wx.navigateBack：
- 关闭当前页面，返回上一页面或多级页面。
- 使用场景：在需要返回上一页面或多级页面的情况下进行页面跳转。
```
wx.navigateBack({
  delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
});
```

这些 API 提供了不同的场景下的跳转方式，开发者可以根据具体需求选择合适的 API 进行页面跳转。需要注意的是，小程序的页面栈是有限的，过多的页面跳转可能导致栈溢出。

7.全局配置

app.json 是微信小程序的全局配置文件，它主要用于配置整个小程序的一些全局属性、窗口样式、网络超时时间、页面路径等。以下是 app.json 的主要作用和一些常见配置项：

配置小程序的全局属性：

在 app.json 中可以配置小程序的一些全局属性，如小程序的名称、appid、版本号、语言、底部 tabBar 等。

{
  "pages": ["pages/index/index"],
  "window": {
    "navigationBarTitleText": "My App",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundTextStyle": "light",
    "backgroundColor": "#eeeeee",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab_home.png",
        "selectedIconPath": "images/tab_home_selected.png"
      },
      // ...
    ]
  }
}

配置页面路径：
- 在 app.json 的 pages 字段中配置小程序的页面路径，用于定义小程序中存在的所有页面。
```
{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    // ...
  ],
  // ...
}
```

配置网络超时时间：

通过 networkTimeout 可以设置小程序的网络请求超时时间，用于控制网络请求的最长等待时间。

{
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  // ...
}

配置小程序的启动页面：
- 通过 entryPagePath 字段可以设置小程序的启动页面，即小程序启动后首次展示的页面。
```
{
  "entryPagePath": "pages/index/index",
  // ...
}
```

总体来说，app.json 提供了一个集中配置小程序全局属性的地方，可以在这里定义小程序的整体风格、启动配置以及页面路径。这样的配置方式有助于保持整个小程序的一致性和可维护性。
微信小程序的支付主要涉及到两个方面：小程序支付和小程序支付后台。以下是基本的支付流程和一些关键的步骤：

8.小程序支付流程：

用户点击支付按钮：
- 在小程序页面中，用户点击支付按钮触发支付操作。
生成支付参数：
- 在小程序前端，调用后台接口获取支付参数。这个接口请求应该由小程序的后台服务来处理，向微信支付服务器请求预支付信息，生成用于支付的参数。

发起支付请求：

在小程序前端，使用 wx.requestPayment API 发起支付请求，将支付参数传递给微信支付服务器。

wx.requestPayment({
  timeStamp: '...',    // 时间戳
  nonceStr: '...',      // 随机字符串
  package: 'prepay_id=...',  // 预支付id
  signType: 'MD5',      // 签名算法
  paySign: '...',       // 签名
  success: function (res) {
    // 支付成功回调
  },
  fail: function (res) {
    // 支付失败回调
  }
});

用户授权支付：
- 微信客户端会拉起支付授权页面，用户需要确认支付授权。
支付结果回调：
- 支付完成后，微信支付服务器将支付结果通知小程序的后台服务。后台服务接收到通知后，处理支付结果，更新订单状态等。
前端支付结果处理：
- 微信支付服务器的通知结果会被返回到前端，通过 success 和 fail 回调函数来处理支付成功或失败的逻辑。

小程序支付后台：

后台生成预支付信息：
- 后台服务接收到小程序前端的支付请求后，向微信支付服务器请求预支付信息。这通常需要商户的支付密钥等信息。
生成支付参数：
- 后台服务获取到微信支付服务器返回的预支付信息后，生成前端调起支付时需要的参数，包括时间戳、随机字符串、预支付id等。
签名生成：
- 使用商户密钥对支付参数进行签名，确保支付参数的完整性和安全性。
返回支付参数：
- 后台服务将生成的支付参数返回给小程序前端。
支付结果通知：
- 微信支付服务器在支付完成后，会向商户后台发送支付结果通知。商户后台接收到通知后，应进行订单状态更新等后续处理。

在整个支付流程中，小程序前端通过 wx.requestPayment 触发支付，支付参数由小程序后台生成，后台负责与微信支付服务器交互，并处理支付结果。同时，商户需要在微信支付商户平台配置支付密钥、支付回调地址等相关信息。开发者需要仔细阅读微信支付官方文档和商户平台文档，并确保支付流程的安全性和合规性。