前端实战：小程序搭建商品购物全流程

目录
项目概述
开辟环境搭建
微信开辟者工具下载与安装
项目创建流程
项目目录结构及各文件作用
 商品展示页面开辟
页面布局（WXML 与 WXSS）
数据获取与绑定（JavaScript）
参加购物车功能实现
购物车功能开辟
购物车页面布局
购物车数据处理
全选、反选与结算功能
订单天生与支付功能开辟
订单天生逻辑
支付功能接入
项目优化与美满
性能优化
安全步伐

---

项目概述

在移动互联网蓬勃发展的当下，电商行业出现出爆发式增长态势。消耗者的购物习惯渐渐从传统线下购物向线上购物转移，这使得各类电商平台如雨后春笋般涌现。而小程序，作为一种无需下载安装、即点即用的轻量级应用，凭借其便捷性、低门槛以及与交际平台的紧密结合等上风，敏捷在电商领域占据了一席之地。
搭建一个小程序商品购物体系，不仅能为商家拓展贩卖渠道，低落运营成本，还能为消耗者提供更加便捷、高效的购物体验。通过小程序，商家可以随时随地展示商品信息，开展促销运动，与消耗者举行互动；消耗者则可以在微信等交际平台中轻松访问购物小程序，实现快速浏览商品、下单购买、支付结算等一系列操作，无需再在多个应用之间切换，大大节流了购物时间和精力。同时，小程序的交际分享功能还能让消耗者将心仪的商品分享给亲朋挚友，实现裂变式传播，为商家带来更多潜在客户。
接下来，让我们具体探讨如何开辟一个功能完备的小程序商品购物体系，从项目标搭建、页面的设计、功能的实现到终极的摆设上线，一步步揭开小程序开辟的神秘面纱。
开辟环境搭建

要开启小程序商品购物体系的开辟之旅，首先得搭建好开辟环境，而微信开辟者工具就是我们的得力助手。下面来具体介绍其下载安装以及项目创建的流程。
微信开辟者工具下载与安装

• 下载：打开浏览器，访问微信官方文档中的开辟者工具下载页面（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ）。这里提供了 Windows、Mac 和 Linux 等差别操作体系版本的下载选项，根据自己的电脑体系选择对应的安装包举行下载。
  

• 安装：下载完成后，找到安装包并双击运行。在安装向导中，点击 “下一步”，阅读并同意答应协议后，点击 “我继承”。接着可以自定义安装目录，选择好安装位置后点击 “安装”，期待安装过程完成，最后点击 “完成”，微信开辟者工具就乐成安装在你的电脑上了。
  

项目创建流程

• 登录：打开安装好的微信开辟者工具，利用微信扫码登录。登录乐成后，在欢迎界面点击 “新建项目”。
  

• 填写项目信息：在弹出的新建项目窗口中，依次填写项目名称，比方 “shopping - mini - program” 。然后填写 AppID，如果没有正式的 AppID，也可以勾选 “测试号” 选项，利用测试号举行开辟测试。接着选择项目标存储位置，最后点击 “新建” 按钮，项目就创建乐成了。
  

项目目录结构及各文件作用

项目创建完成后，会看到一个清楚的目录结构，主要包罗以下文件和文件夹：

• pages 文件夹：存放小程序的各个页面，每个页面都对应一个独立的文件夹。比方，“pages/home” 文件夹下存放着首页的相关文件，包罗 “home.js”（页面逻辑文件，用于处理页面的数据请求、变乱相应等逻辑）、“home.json”（页面配置文件，可对该页面的导航栏样式、是否答应下拉革新等举行设置，会覆盖全局配置中的相关部分）、“home.wxml”（页面结构文件，利用雷同 HTML 的标签语言来构建页面的布局和元素）、“home.wxss”（页面样式文件，用于定义页面元素的样式，雷同于 CSS ）。
  

• utils 文件夹：通常用于存放一些工具函数，比如日期格式化函数、网络请求封装函数等。比方 “utils/util.js” ，在这个文件中可以定义一个格式化日期的函数，方便在各个页面中利用。
  

• app.js：小程序的入口文件，主要用于监听和处理小程序的生命周期函数，如小程序启动时触发的 “onLaunch” 函数、小程序显示在前台时触发的 “onShow” 函数等，同时也可以在这里声明一些全局数据，比如 “globalData” ，用于存储用户登录信息等在整个小程序中都大概用到的数据。
  

• app.json：小程序的全局配置文件，它决定了小程序的页面路径、窗口表现、底部 tab 栏配置等重要信息。比方，“pages” 数组中定义了小程序全部页面的路径，“window” 对象中可以设置小程序窗口的配景颜色、导航栏颜色、标题等。
  

• app.wxss：小程序的全局样式表文件，在这个文件中定义的样式会作用于整个小程序的全部页面，可用于设置全局的字体、配景颜色等根本样式。
  

• project.config.json：微信开辟者工具的项目配置文件，包罗项目标名称、appid、编译设置、调试设置等信息。比如可以在这里设置是否开启 ES6 语法支持、是否检查代码中的 URL 等。
  

• sitemap.json：小程序的站点地图文件，用于 SEO 配置，帮助微信搜刮引擎更好地爬取小程序的页面，通过配置 “rules” 数组，可以指定哪些页面答应被微信索引，哪些页面不答应。
  

 商品展示页面开辟

页面布局（WXML 与 WXSS）

商品展示页面是用户打仗小程序的重要界面，其布局的公道性和美观性直接影响用户体验。下面是一个简朴的商品展示页面的 WXML 结构代码：

1. <view class="goods-list">
2.   <block wx:for="{
3.   
4.   {goodsList}}" wx:key="id">
5.     <view class="goods-item">
6.       <image class="goods-img" src="{
7.   
8.   {item.imgUrl}}" mode="aspectFill"></image>
9.       <view class="goods-info">
10.         <text class="goods-name">{
11.   
12.   {item.name}}</text>
13.         <text class="goods-price">￥{
14.   
15.   {item.price}}</text>
16.         <button class="add-cart-btn" bindtap="addToCart" data-goodsId="{
17.   
18.   {item.id}}">加入购物车</button>
19.       </view>
20.     </view>
21.   </block>
22. </view>

复制代码

在这段代码中，外层的<view class="goods - list">用于包裹整个商品列表。<block wx:for="{  {goodsList}}" wx:key="id">通过wx:for指令循环渲染商品列表，wx:key用于提高渲染性能，确保列表项的唯一性 。每个商品项由<view class="goods - item">包裹，此中<image>标签用于展示商品图片，src="{  {item.imgUrl}}"绑定图片的 URL；<view class="goods - info">中包罗商品名称<text class="goods - name">{  {item.name}}</text>、商品代价<text class="goods - price">￥{  {item.price}}</text>以及参加购物车按钮<button class="add - cart-btn" bindtap="addToCart" data - goodsId="{  {  item.id}}">参加购物车</button>，bindtap绑定了点击变乱addToCart，data - goodsId="{  {  item.id}}"用于传递商品的 ID。
对应的 WXSS 样式代码如下：

1. .goods-list {
2.   padding: 10px;
3.   display: flex;
4.   flex-wrap: wrap;
5.   justify-content: space-around;
6. }
8. .goods-item {
9.   width: 45%;
10.   margin-bottom: 15px;
11.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
12.   border-radius: 5px;
13.   overflow: hidden;
14.   background-color: #fff;
15. }
17. .goods-img {
18.   width: 100%;
19.   height: 200px;
20. }
22. .goods-info {
23.   padding: 10px;
24.   display: flex;
25.   flex-direction: column;
26.   align-items: center;
27.   justify-content: center;
28. }
30. .goods-name {
31.   font-size: 16px;
32.   color: #333;
33.   margin-bottom: 5px;
34.   text-align: center;
35.   white-space: nowrap;
36.   overflow: hidden;
37.   text-overflow: ellipsis;
38. }
40. .goods-price {
41.   font-size: 14px;
42.   color: #f60;
43.   margin-bottom: 10px;
44. }
46. .add-cart-btn {
47.   width: 100%;
48.   background-color: #f60;
49.   color: #fff;
50.   border: none;
51.   border-radius: 3px;
52.   padding: 8px 0;
53.   font-size: 14px;
54. }
56. .add-cart-btn:active {
57.   background-color: #ff8c00;
58. }

复制代码

在上述 WXSS 代码中，.goods - list设置了内边距、弹性布局，使商品项可以或许灵活排列且在容器内均匀分布；.goods - item定义了商品项的宽度、外边距、阴影、圆角以及配景颜色，使其看起来更加美观和突出；.goods - img设置图片宽度为 100%，高度为 200px，包管图片可以或许完备展示；.goods - info设置了内边距和弹性布局方向，使商品信息垂直居中显示；.goods - name和.goods - price分别设置了商品名称和代价的字体巨细、颜色等样式，而且对商品名称举行了溢出处理，防止名称过长影响页面布局；.add - cart-btn设置了参加购物车按钮的宽度、配景颜色、笔墨颜色、边框、圆角以及点击时的配景颜色变革，增强了按钮的交互性。
数据获取与绑定（JavaScript）

商品展示页面的数据通常来自后端服务器，通过接口调用获取数据后，再将数据绑定到页面上举行展示。在小程序中，利用wx.request方法来发起 HTTP 请求获取数据。假设后端提供了一个获取商品列表的接口https://api.example.com/goods，在页面的 JavaScript 文件中，可以如许编写代码获取数据：

1. Page({
2.   data: {
3.     goodsList: []
4.   },
5.   onLoad: function() {
6.     this.fetchGoodsList();
7.   },
8.   fetchGoodsList: function() {
9.     wx.request({
10.       url: 'https://api.example.com/goods',
11.       method: 'GET',
12.       success: (res) => {
13.         if (res.statusCode === 200) {
14.           this.setData({
15.             goodsList: res.data
16.           });
17.         } else {
18.           console.error('请求失败，状态码：', res.statusCode);
19.         }
20.       },
21.       fail: (err) => {
22.         console.error('网络请求出错：', err);
23.       }
24.     });
25.   }
26. });

复制代码

在这段代码中，首先在data中定义了一个goodsList数组，用于存储获取到的商品数据。在onLoad生命周期函数中调用fetchGoodsList方法来获取商品列表。fetchGoodsList方法利用wx.request发起 GET 请求，url为后端接口地址。如果请求乐成（statusCode为 200），将后端返回的数据res.data通过setData方法更新到页面的data中，如许页面上绑定的goodsList数据就会更新，从而实现商品列表的动态展示；如果请求失败，在控制台打印错误信息。
参加购物车功能实现

当用户点击商品展示页面的 “参加购物车” 按钮时，必要将对应的商品信息添加到购物车中。在 WXML 中，按钮已经绑定了addToCart点击变乱，接下来在 JavaScript 中实现该变乱处理函数：

1. Page({
2.   // 其他代码...
3.   addToCart: function(e) {
4.     const goodsId = e.currentTarget.dataset.goodsId;
5.     const goods = this.data.goodsList.find(item => item.id === goodsId);
6.     if (goods) {
7.       // 获取全局的购物车数据
8.       const app = getApp();
9.       let cart = app.globalData.cart;
10.       const existingGoods = cart.find(cartItem => cartItem.id === goodsId);
11.       if (existingGoods) {
12.         existingGoods.count++;
13.       } else {
14.         goods.count = 1;
15.         cart.push(goods);
16.       }
17.       app.globalData.cart = cart;
18.       // 提示用户加入购物车成功
19.       wx.showToast({
20.         title: '已加入购物车',
21.         icon:'success',
22.         duration: 1500
23.       });
24.     }
25.   }
26. });

复制代码

在addToCart函数中，首先通过e.currentTarget.dataset.goodsId获取当前点击按钮所对应的商品 ID。然后利用find方法在goodsList中找到对应的商品信息。接着获取全局的购物车数据app.globalData.cart，检查购物车中是否已经存在该商品，如果存在，则将该商品的数目加 1；如果不存在，则为该商品添加一个数目属性count并设置为 1，然后将商品添加到购物车中。最后更新全局的购物车数据，并利用wx.showToast提示用户参加购物车乐成。
购物车功能开辟

购物车页面布局

购物车页面的布局必要清楚展示商品信息、数目选择、代价计算以及全选、结算等功能。以下是购物车页面的 WXML 代码：

1. <view class="cart-container">
2.   <view class="cart-header">
3.     <checkbox checked="{
4.   
5.   {isAllChecked}}" bindchange="handleAllChecked">全选</checkbox>
6.     <text>购物车</text>
7.   </view>
8.   <block wx:for="{
9.   
10.   {cartList}}" wx:key="id">
11.     <view class="cart-item">
12.       <checkbox checked="{
13.   
14.   {item.checked}}" bindchange="handleItemChecked" data-index="{
15.   
16.   {index}}"></checkbox>
17.       <image class="cart-item-img" src="{
18.   
19.   {item.imgUrl}}" mode="aspectFill"></image>
20.       <view class="cart-item-info">
21.         <text class="cart-item-name">{
22.   
23.   {item.name}}</text>
24.         <text class="cart-item-price">￥{
25.   
26.   {item.price}}</text>
27.         <view class="quantity-control">
28.           <button bindtap="decreaseQuantity" data-index="{
29.   
30.   {index}}">-</button>
31.           <text>{
32.   
33.   {item.quantity}}</text>
34.           <button bindtap="increaseQuantity" data-index="{
35.   
36.   {index}}">+</button>
37.         </view>
38.       </view>
39.       <button bindtap="deleteItem" data-index="{
40.   
41.   {index}}">删除</button>
42.     </view>
43.   </block>
44.   <view class="cart-footer">
45.     <text>合计: ￥{
46.   
47.   {totalPrice}}</text>
48.     <button bindtap="goToCheckout" disabled="{
49.   
50.   {!isSomeChecked}}">去结算</button>
51.   </view>
52. </view>

复制代码

在这段代码中，.cart - container是购物车页面的整体容器。.cart - header包罗全选复选框和 “购物车” 标题。通过wx:for循环渲染购物车中的每个商品项，每个商品项包罗商品的选中复选框、图片、名称、代价、数目控制按钮以及删除按钮。.cart - footer展示了商品的合计代价和去结算按钮，而且根据是否有商品被选中来控制去结算按钮的禁用状态。
对应的 WXSS 样式代码如下：

1. .cart-container {
2.   padding: 10px;
3. }
5. .cart-header {
6.   display: flex;
7.   align-items: center;
8.   margin-bottom: 10px;
9. }
11. .cart-header checkbox {
12.   margin-right: 5px;
13. }
15. .cart-item {
16.   display: flex;
17.   align-items: center;
18.   border-bottom: 1px solid #eee;
19.   padding: 10px 0;
20. }
22. .cart-item checkbox {
23.   margin-right: 10px;
24. }
26. .cart-item-img {
27.   width: 80px;
28.   height: 80px;
29.   margin-right: 10px;
30. }
32. .cart-item-info {
33.   flex: 1;
34. }
36. .cart-item-name {
37.   font-size: 16px;
38.   margin-bottom: 5px;
39. }
41. .cart-item-price {
42.   color: #f60;
43. }
45. .quantity-control {
46.   display: flex;
47.   align-items: center;
48.   margin-top: 5px;
49. }
51. .quantity-control button {
52.   width: 30px;
53.   height: 30px;
54.   border: 1px solid #ccc;
55.   background-color: #fff;
56.   font-size: 16px;
57.   text-align: center;
58.   line-height: 30px;
59.   margin: 0 5px;
60. }
62. .cart-footer {
63.   display: flex;
64.   justify-content: space-between;
65.   align-items: center;
66.   margin-top: 20px;
67.   padding-top: 10px;
68.   border-top: 1px solid #eee;
69. }
71. .cart-footer button {
72.   background-color: #f60;
73.   color: #fff;
74.   border: none;
75.   padding: 10px 20px;
76.   border-radius: 5px;
77. }
79. .cart-footer button[disabled] {
80.   background-color: #ccc;
81. }

复制代码

上述 WXSS 代码定义了购物车页面各部分的样式。.cart - container设置了内边距，使内容与页面边缘有一定间距。.cart - header采用弹性布局，使全选复选框和标题程度排列，而且设置了底部外边距，使购物车标题与商品列表有显着区分。.cart - item同样利用弹性布局，展示商品的各个信息，通过设置底部边框和内边距，使每个商品项有清楚的分隔。商品图片设置了固定的宽度和高度，并预留了右边距，确保与其他信息有合适的间距。商品信息部分利用flex: 1占据剩余空间，使笔墨内容可以或许自顺应排列。数目控制按钮设置了固定的巨细、边框和配景颜色，以及合适的内外边距和笔墨样式，方便用户操作。.cart - footer采用弹性布局，使合计代价和去结算按钮分别位于两头，通过设置顶部边框和内边距，与商品列表部分区分开来。去结算按钮设置了配景颜色、笔墨颜色、边框和圆角，而且针对禁用状态设置了差别的配景颜色，增强用户交互体验。
购物车数据处理

购物车数据可以存储在本地存储中，也可以从后端获取。在小程序中，利用wx.setStorageSync和wx.getStorageSync方法来操作本地存储。假设购物车数据存储在本地存储的cart字段中，获取购物车数据的代码如下：

1. Page({
2.   data: {
3.     cartList: [],
4.     isAllChecked: false,
5.     totalPrice: 0
6.   },
7.   onShow: function() {
8.     const cart = wx.getStorageSync('cart');
9.     if (cart) {
10.       this.setData({
11.         cartList: cart
12.       });
13.       this.calculateTotalPrice();
14.     }
15.   },
16.   calculateTotalPrice: function() {
17.     const cartList = this.data.cartList;
18.     let totalPrice = 0;
19.     cartList.forEach(item => {
20.       if (item.checked) {
21.         totalPrice += item.price * item.quantity;
22.       }
23.     });
24.     this.setData({
25.       totalPrice: totalPrice
26.     });
27.   }
28. });

复制代码

在上述代码中，onShow生命周期函数在页面显示时被调用，通过wx.getStorageSync('cart')获取本地存储的购物车数据。如果存在数据，则将其设置到页面的cartList数据中，并调用calculateTotalPrice方法计算购物车中已选中商品的总价。calculateTotalPrice方法遍历cartList，累加已选中商品的代价乘以数目，最后通过setData更新页面的totalPrice数据。
添加商品到购物车的代码在之前参加购物车功能实现部分已经提及，这里重点展示购物车中商品数目的增减以及删除商品的代码实现。
增加商品数目的代码：

1. Page({
2.   // 其他代码...
3.   increaseQuantity: function(e) {
4.     const index = e.currentTarget.dataset.index;
5.     let cartList = this.data.cartList;
6.     cartList[index].quantity++;
7.     this.setData({
8.       cartList: cartList
9.     });
10.     wx.setStorageSync('cart', cartList);
11.     this.calculateTotalPrice();
12.   }
13. });

复制代码

在increaseQuantity函数中，通过e.currentTarget.dataset.index获取当前操作商品的索引。然后从页面数据中获取cartList，将对应商品的数目加 1。接着利用setData更新页面数据，同时通过wx.setStorageSync('cart', cartList)将更新后的购物车数据保存到本地存储，最后调用calculateTotalPrice方法重新计算总价。
淘汰商品数目的代码：

1. Page({
2.   // 其他代码...
3.   decreaseQuantity: function(e) {
4.     const index = e.currentTarget.dataset.index;
5.     let cartList = this.data.cartList;
6.     if (cartList[index].quantity > 1) {
7.       cartList[index].quantity--;
8.       this.setData({
9.         cartList: cartList
10.       });
11.       wx.setStorageSync('cart', cartList);
12.       this.calculateTotalPrice();
13.     }
14.   }
15. });

复制代码

decreaseQuantity函数与increaseQuantity雷同，首先获取当前操作商品的索引，然后判定商品数目是否大于 1，如果是则将数目减 1。接着更新页面数据和本地存储数据，并重新计算总价。
删除商品的代码：

1. Page({
2.   // 其他代码...
3.   deleteItem: function(e) {
4.     const index = e.currentTarget.dataset.index;
5.     let cartList = this.data.cartList;
6.     cartList.splice(index, 1);
7.     this.setData({
8.       cartList: cartList
9.     });
10.     wx.setStorageSync('cart', cartList);
11.     this.calculateTotalPrice();
12.   }
13. });

复制代码

在deleteItem函数中，通过e.currentTarget.dataset.index获取要删除商品的索引，利用splice方法从cartList中删除对应的商品。然后更新页面数据和本地存储数据，并重新计算总价。
全选、反选与结算功能

全选和反选功能可以通过一个复选框来控制购物车中全部商品的选中状态。结算功能则是在用户点击 “去结算” 按钮时，将已选中的商品信息提交到后端举行处理。
全选、反选功能的 JavaScript 代码如下：

1. Page({
2.   // 其他代码...
3.   handleAllChecked: function(e) {
4.     const isChecked = e.detail.value;
5.     let cartList = this.data.cartList;
6.     cartList.forEach(item => {
7.       item.checked = isChecked;
8.     });
9.     this.setData({
10.       cartList: cartList,
11.       isAllChecked: isChecked
12.     });
13.     wx.setStorageSync('cart', cartList);
14.     this.calculateTotalPrice();
15.   },
16.   handleItemChecked: function(e) {
17.     const index = e.currentTarget.dataset.index;
18.     let cartList = this.data.cartList;
19.     cartList[index].checked =!cartList[index].checked;
20.     let allChecked = true;
21.     cartList.forEach(item => {
22.       if (!item.checked) {
23.         allChecked = false;
24.         return;
25.       }
26.     });
27.     this.setData({
28.       cartList: cartList,
29.       isAllChecked: allChecked
30.     });
31.     wx.setStorageSync('cart', cartList);
32.     this.calculateTotalPrice();
33.   }
34. });

复制代码

在handleAllChecked函数中，通过e.detail.value获取全选复选框的选中状态。然后遍历cartList，将每个商品的选中状态设置为与全选复选框一致。接着更新页面数据和本地存储数据，并重新计算总价。
handleItemChecked函数用于处理单个商品复选框的点击变乱。通过e.currentTarget.dataset.index获取当前点击商品的索引，将该商品的选中状态取反。然后检查购物车中全部商品是否都被选中，如果是则将isAllChecked设置为true，否则设置为false。最后更新页面数据和本地存储数据，并重新计算总价。
结算功能的代码如下：

1. Page({
2.   // 其他代码...
3.   goToCheckout: function() {
4.     const cartList = this.data.cartList;
5.     const selectedGoods = cartList.filter(item => item.checked);
6.     if (selectedGoods.length === 0) {
7.       wx.showToast({
8.         title: '请至少选择一件商品',
9.         icon: 'none'
10.       });
11.       return;
12.     }
13.     // 这里可以将selectedGoods数据发送到后端进行结算处理
14.     wx.navigateTo({
15.       url: '/pages/checkout/checkout?goods=' + JSON.stringify(selectedGoods)
16.     });
17.   }
18. });

复制代码

在goToCheckout函数中，首先从cartList中过滤出全部已选中的商品，存储在selectedGoods数组中。如果selectedGoods数组为空，则提示用户至少选择一件商品。否则，可以将selectedGoods数据发送到后端举行结算处理，这里示例通过wx.navigateTo跳转到结算页面，并将选中的商品数据以参数情势传递已往，在实际应用中，必要根据后端接口规范举行数据发送和处理。
订单天生与支付功能开辟

订单天生逻辑

当用户在购物车页面点击 “去结算” 按钮后，就必要收集购物车中已选中商品的信息来天生订单。这部分主要在结算页面的 JavaScript 文件中实现。假设结算页面路径为/pages/checkout/checkout，其对应的 JavaScript 代码如下：

1. Page({
2.   data: {
3.     selectedGoods: []
4.   },
5.   onLoad: function(options) {
6.     const goods = JSON.parse(options.goods);
7.     this.setData({
8.       selectedGoods: goods
9.     });
10.   },
11.   createOrder: function() {
12.     const selectedGoods = this.data.selectedGoods;
13.     const orderData = {
14.       orderItems: selectedGoods.map(item => ({
15.         goodsId: item.id,
16.         name: item.name,
17.         price: item.price,
18.         quantity: item.quantity
19.       })),
20.       totalPrice: selectedGoods.reduce((total, item) => total + item.price * item.quantity, 0),
21.       // 这里可以添加更多订单相关信息，如收货地址、下单时间等
22.       // 假设收货地址在全局变量中存储
23.       shippingAddress: getApp().globalData.userInfo.address
24.     };
25.     wx.request({
26.       url: 'https://api.example.com/createOrder',
27.       method: 'POST',
28.       data: orderData,
29.       success: (res) => {
30.         if (res.statusCode === 200) {
31.           const orderId = res.data.orderId;
32.           wx.navigateTo({
33.             url: `/pages/orderDetail/orderDetail?orderId=${orderId}`
34.           });
35.         } else {
36.           wx.showToast({
37.             title: '订单生成失败',
38.             icon: 'none'
39.           });
40.         }
41.       },
42.       fail: (err) => {
43.         wx.showToast({
44.           title: '网络请求失败',
45.           icon: 'none'
46.         });
47.       }
48.     });
49.   }
50. });

复制代码

在上述代码中，onLoad函数吸取从购物车页面传递过来的已选中商品数据，并存储在selectedGoods数据中。createOrder函数构建订单数据，将商品信息整理成恰当后端吸取的格式，包罗商品 ID、名称、代价、数目等，同时计算订单总价，并从全局变量中获取收货地址（假设用户信息已在之前登录等操作中存储在全局变量getApp().globalData.userInfo中）。然后通过wx.request向https://api.example.com/createOrder接口发起 POST 请求，将订单数据发送到后端。如果请求乐成且状态码为 200，获取后端返回的订单 ID，跳转到订单详情页面；如果请求失败或状态码不为 200，提示用户订单天生失败。
支付功能接入

在微信小程序中，常用的支付方式是微信支付。接入微信支付的流程如下：

• 准备工作：在微信支付商户平台注册成为商户，获取商户号（MchID）、API 密钥等信息。同时，确保小程序已举行认证，而且在微信公众平台将小程序与商户号举行关联。
  
• 获取用户 openid：用户在小程序中举行支付时，必要获取用户的唯一标识 openid。可以通过微信登录接口获取用户的 code，然后将 code 发送到后端服务器，后端服务器利用小程序的 AppID、AppSecret 以及获取到的 code 向微信官方服务器发起请求，变更 openid。假设后端利用 Node.js 和 Express 框架搭建服务器，获取 openid 的代码示比方下：
  

1. const express = require('express');
2. const router = express.Router();
3. const axios = require('axios');
4. const { APP_ID, APP_SECRET } = require('../config'); // 假设配置文件中存储了AppID和AppSecret
6. router.post('/login', async (req, res) => {
7.   try {
8.     const { code } = req.query;
9.     const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APP_ID}&secret=${APP_SECRET}&js_code=${code}&grant_type=authorization_code`;
10.     const { data: { openid } } = await axios.get(url);
11.     res.status(200).send({ openid });
12.   } catch (err) {
13.     res.status(500).send({ message: '获取openid失败' });
14.   }
15. });
17. module.exports = router;

复制代码

 在小程序端，获取 code 并向后端请求 openid 的代码如下：

1. Page({
2.   loginHandle: function() {
3.     wx.login({
4.       success: (res) => {
5.         const code = res.code;
6.         wx.request({
7.           url: 'https://your-server-url.com/login',
8.           method: 'POST',
9.           data: { code },
10.           success: (res) => {
11.             const openid = res.data.openid;
12.             // 可以将openid存储在本地或全局变量中
13.             wx.setStorageSync('openid', openid);
14.           },
15.           fail: (err) => {
16.             console.error('获取openid失败', err);
17.           }
18.         });
19.       },
20.       fail: (err) => {
21.         console.error('获取code失败', err);
22.       }
23.     });
24.   }
25. });

复制代码

• 发起支付请求：在订单天生后，前端向后端发起支付请求，后端根据订单信息天生预支付订单，并向微信官方服务器请求预支付交易会话标识（prepay_id）。假设后端利用 Node.js 和 Express 框架，天生预支付订单的代码示比方下：
  

1. const express = require('express');
2. const router = express.Router();
3. const axios = require('axios');
4. const crypto = require('crypto');
5. const { APP_ID, MCH_ID, API_KEY } = require('../config'); // 假设配置文件中存储了相关信息
7. // 生成随机字符串
8. function generateNonceStr() {
9.   return crypto.randomBytes(16).toString('hex');
10. }
12. // 生成签名
13. function generateSign(params) {
14.   const keys = Object.keys(params).sort();
15.   const string = keys.reduce((acc, key) => acc + `${key}=${params[key]}&`, '');
16.   string += `key=${API_KEY}`;
17.   return crypto.createHash('md5').update(string).digest('hex').toUpperCase();
18. }
20. router.post('/pay', async (req, res) => {
21.   const { orderId, totalPrice } = req.body;
22.   const nonceStr = generateNonceStr();
23.   const body = '商品购买'; // 商品描述
24.   const spbillCreateIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
25.   const notifyUrl = 'https://your-server-url.com/notify'; // 支付结果通知地址
26.   const tradeType = 'JSAPI';
27.   const openid = req.body.openid; // 从前端传递过来的openid
29.   const params = {
30.     appid: APP_ID,
31.     mch_id: MCH_ID,
32.     nonce_str: nonceStr,
33.     body,
34.     out_trade_no: orderId,
35.     total_fee: totalPrice * 100, // 金额单位为分
36.     spbill_create_ip: spbillCreateIp,
37.     notify_url: notifyUrl,
38.     trade_type: tradeType,
39.     openid
40.   };
42.   const sign = generateSign(params);
43.   params.sign = sign;
45.   const xml = `<?xml version="1.0" encoding="UTF-8"?>
46. <xml>
47.   ${Object.keys(params).map(key => `<${key}>${params[key]}</${key}>`).join('')}
48. </xml>`;
50.   try {
51.     const response = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', xml, {
52.       headers: {
53.         'Content-Type': 'application/xml'
54.       }
55.     });
56.     const { prepay_id } = response.data;
57.     const payParams = {
58.       timeStamp: Math.floor(Date.now() / 1000).toString(),
59.       nonceStr,
60.       package: `prepay_id=${prepay_id}`,
61.       signType: 'MD5'
62.     };
63.     payParams.paySign = generateSign(payParams);
64.     res.status(200).send(payParams);
65.   } catch (err) {
66.     res.status(500).send({ message: '预支付订单生成失败' });
67.   }
68. });
70. module.exports = router;

复制代码

 在小程序端，发起支付请求的代码如下：

1. Page({
2.   payOrder: function() {
3.     const orderId = '123456'; // 假设订单ID
4.     const totalPrice = 100; // 假设订单总价
5.     const openid = wx.getStorageSync('openid');
6.     wx.request({
7.       url: 'https://your-server-url.com/pay',
8.       method: 'POST',
9.       data: { orderId, totalPrice, openid },
10.       success: (res) => {
11.         const payParams = res.data;
12.         wx.requestPayment({
13.         ...payParams,
14.           success: (res) => {
15.             wx.showToast({
16.               title: '支付成功',
17.               icon:'success'
18.             });
19.             // 支付成功后可以跳转到订单详情页面或其他操作
20.           },
21.           fail: (err) => {
22.             wx.showToast({
23.               title: '支付失败',
24.               icon: 'none'
25.             });
26.           }
27.         });
28.       },
29.       fail: (err) => {
30.         wx.showToast({
31.           title: '获取支付参数失败',
32.           icon: 'none'
33.         });
34.       }
35.     });
36.   }
37. });

复制代码

• 处理支付结果：微信支付完成后，微佩服务器会向之前设置的支付结果通知地址（notifyUrl）发送支付结果通知。后端必要在该地址对应的接口中吸取通知，验证通知的合法性，并处理订单状态更新等操作。假设后端利用 Node.js 和 Express 框架，处理支付结果通知的代码示比方下：
  

1. const express = require('express');
2. const router = express.Router();
3. const axios = require('axios');
4. const { APP_ID, MCH_ID, API_KEY } = require('../config');
5. const crypto = require('crypto');
7. // 验证签名
8. function verifySign(xmlData) {
9.   const data = {};
10.   const parser = new DOMParser();
11.   const xmlDoc = parser.parseFromString(xmlData, 'text/xml');
12.   const elements = xmlDoc.getElementsByTagName('xml')[0].childNodes;
13.   for (let i = 0; i < elements.length; i++) {
14.     data[elements[i].nodeName] = elements[i].textContent;
15.   }
16.   const keys = Object.keys(data).sort();
17.   const string = keys.reduce((acc, key) => acc + `${key}=${data[key]}&`, '');
18.   string += `key=${API_KEY}`;
19.   const sign = crypto.createHash('md5').update(string).digest('hex').toUpperCase();
20.   return sign === data.sign;
21. }
23. router.post('/notify', async (req, res) => {
24.   const xmlData = req.body;
25.   if (!verifySign(xmlData)) {
26.     return res.status(400).send('签名验证失败');
27.   }
28.   const parser = new DOMParser();
29.   const xmlDoc = parser.parseFromString(xmlData, 'text/xml');
30.   const resultCode = xmlDoc.getElementsByTagName('result_code')[0].textContent;
31.   const outTradeNo = xmlDoc.getElementsByTagName('out_trade_no')[0].textContent;
32.   if (resultCode === 'SUCCESS') {
33.     // 处理订单状态更新等操作，例如将订单状态更新为已支付
34.     // 这里假设调用后端的更新订单状态接口
35.     try {
36.       await axios.post('https://your-server-url.com/updateOrderStatus', {
37.         orderId: outTradeNo,
38.         status: '已支付'
39.       });
40.       res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
41.     } catch (err) {
42.       res.status(500).send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[处理订单状态更新失败]]></return_msg></xml>');
43.     }
44.   } else {
45.     res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[支付失败]]></return_msg></xml>');
46.   }
47. });
49. module.exports = router;

复制代码

通过以上步调，就完成了微信小程序中订单天生与支付功能的开辟，实现了用户在小程序中购买商品并完成支付的完备流程。
项目优化与美满

性能优化

分页加载：在商品展示页面，如果商品数据量较大，一次性加载全部数据会导致页面加载缓慢，影响用户体验。可以采用分页加载的方式，每次只加载当前页面所需的数据。比方，在商品列表请求接口时，添加page和pageSize参数，后端根据这两个参数返回对应页码和数目的数据。在小程序端，初始加载第一页数据，当用户滚动到页面底部时，触发加载下一页数据的操作。相关代码如下：

1. Page({
2.   data: {
3.     goodsList: [],
4.     currentPage: 1,
5.     pageSize: 10,
6.     isLoading: false,
7.     hasMoreData: true
8.   },
9.   onLoad: function() {
10.     this.loadGoodsList();
11.   },
12.   onPageScroll: function(e) {
13.     const { scrollTop, windowHeight, scrollHeight } = e.detail;
14.     if (scrollTop + windowHeight >= scrollHeight - 20 &&!this.data.isLoading && this.data.hasMoreData) {
15.       this.loadGoodsList();
16.     }
17.   },
18.   loadGoodsList: function() {
19.     if (this.data.isLoading) return;
20.     this.setData({
21.       isLoading: true
22.     });
23.     wx.request({
24.       url: 'https://api.example.com/goods',
25.       method: 'GET',
26.       data: {
27.         page: this.data.currentPage,
28.         pageSize: this.data.pageSize
29.       },
30.       success: (res) => {
31.         if (res.statusCode === 200) {
32.           const newData = res.data;
33.           const hasMoreData = newData.length >= this.data.pageSize;
34.           this.setData({
35.             goodsList: this.data.goodsList.concat(newData),
36.             currentPage: this.data.currentPage + 1,
37.             isLoading: false,
38.             hasMoreData: hasMoreData
39.           });
40.         } else {
41.           console.error('请求失败，状态码：', res.statusCode);
42.           this.setData({
43.             isLoading: false
44.           });
45.         }
46.       },
47.       fail: (err) => {
48.         console.error('网络请求出错：', err);
49.         this.setData({
50.           isLoading: false
51.         });
52.       }
53.     });
54.   }
55. });

复制代码

• 图片懒加载：商品展示页面通常会有大量商品图片，如果这些图片同时加载，会消耗大量的网络资源和内存，导致页面加载缓慢乃至卡顿。可以利用微信小程序提供的IntersectionObserver组件来实现图片懒加载。首先在 WXML 文件中为图片组件添加data-src属性存储图片真实 URL，初始src属性为空。然后利用IntersectionObserver监听图片是否进入可视地区，当进入可视地区时，将data-src的值赋给src属性，实现图片加载。代码如下：
  

1. <view class="goods-list">
2.   <block wx:for="{
3.   
4.   {goodsList}}" wx:key="id">
5.     <view class="goods-item">
6.       <image class="goods-img" src="{
7.   
8.   {item.imgUrl? item.imgUrl : ''}}" data-src="{
9.   
10.   {item.imgUrl}}" mode="aspectFill"></image>
11.       <view class="goods-info">
12.         <text class="goods-name">{
13.   
14.   {item.name}}</text>
15.         <text class="goods-price">￥{
16.   
17.   {item.price}}</text>
18.         <button class="add-cart-btn" bindtap="addToCart" data-goodsId="{
19.   
20.   {item.id}}">加入购物车</button>
21.       </view>
22.     </view>
23.   </block>
24. </view>

复制代码

1. Page({
2.   data: {
3.     goodsList: []
4.   },
5.   onLoad: function() {
6.     this.fetchGoodsList();
7.     this.initImageObserver();
8.   },
9.   fetchGoodsList: function() {
10.     // 数据请求代码...
11.   },
12.   initImageObserver: function() {
13.     const query = wx.createIntersectionObserver(this);
14.     query.selectAll('.goods-img').observe((res) => {
15.       res.forEach((item) => {
16.         if (item.intersectionRatio > 0) {
17.           const index = item.dataset.index;
18.           this.setData({
19.             [`goodsList[${index}].imgUrl`]: item.target.dataset.src
20.           });
21.         }
22.       });
23.     });
24.   }
25. });

复制代码

安全步伐

• 采用 HTTPS：小程序的全部网络请求都必须利用 HTTPS 协议，这是微信官方的强制要求。HTTPS 协议在 HTTP 的根本上参加了 SSL/TLS 加密层，可以或许对数据传输举行加密，确保数据在传输过程中不被窃取、窜改。在配置服务器时，必要申请 SSL 证书，并将其摆设到服务器上，使服务器支持 HTTPS 访问。比方，利用阿里云的 SSL 证书服务，在申请并获取证书后，按照阿里云的文档引导将证书配置到服务器的 Web 服务器（如 Nginx 或 Apache）中。以 Nginx 为例，配置文件中添加如下代码：、
  

1. server {
2.     listen       443 ssl;
3.     server_name  your_domain.com;
5.     ssl_certificate      /path/to/your_cert.pem;
6.     ssl_certificate_key  /path/to/your_key.pem;
8.     ssl_session_cache    shared:SSL:1m;
9.     ssl_session_timeout  5m;
11.     ssl_ciphers  HIGH:!aNULL:!MD5;
12.     ssl_prefer_server_ciphers  on;
14.     location / {
15.         # 其他配置...
16.     }
17. }

复制代码

• 防止 XSS 攻击：XSS（跨站脚本攻击）是一种常见的前端安全漏洞，攻击者通过在网页中注入恶意脚本，窃取用户信息或控制用户操作。在小程序开辟中，要对用户输入的数据举行严酷的过滤和转义，制止恶意脚本被执行。比方，在用户提交评论等数据时，利用工具函数对输入内容举行过滤。可以利用html-escaper库来举行转义，安装后在代码中利用：
  

1. import escaper from 'html-escaper';
3. // 假设inputValue是用户输入的值
4. const inputValue = '<script>alert("XSS攻击")</script>';
5. const escapedValue = escaper.escape(inputValue);
6. // 此时escapedValue的值为 &lt;script&gt;alert(&quot;XSS攻击&quot;)&lt;/script&gt;
7. // 将escapedValue存储到数据库或展示到页面上，就可以防止XSS攻击

复制代码

 同时，在利用setData更新页面数据时，要确保数据的安全性，制止直接将未经处理的用户输入数据用于渲染页面。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。