微信小程序制作

  • 在制作微信小程序的过程中，我深刻体会到了技术的魅力和创造的乐趣。通过学习和实践，我逐渐掌握了小程序的开发流程和相关技术，不仅提升了自己的编程能力，还加深了对前端开发的理解。在开发过程中，我发现微信小程序具有灵活性和易用性。它提供了丰富的组件和API，使得页面的搭建和交互设计变得简单而高效。
  • 同时，小程序还支持原生开发和云开发两种模式，可以根据项目需求选择合适的开发方式，更好地满足业务需求。另外，小程序的调试工具也是我喜爱的一部分。它提供了实时预览、调试和性能分析等功能，可以帮助我快速定位和解决问题，提高开发效率。
  • 制作微信小程序，我不仅学到了技术知识，还深刻认识到用户体验的重要性。在设计和开发过程中，我注重细节和用户需求，努力提供简洁、友好的界面和流畅的交互体验，以实现用户的满意和留存。制作微信小程序是一次有趣而充实的经历。它不仅让我更深入地了解了前端开发的各个方面，还培养了我的创造力和解决问题的能力。我期待在未来的项目中继续探索和挑战，为用户带来更好的体验和价值。

第一部分：软件安装和环境配置

在开始制作微信小程序之前，需要进行软件安装和环境配置。以下是所需软件和环境的安装步骤：

Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，可用于开发服务器端和网络应用程序。下面是在 Windows 10 系统上安装 Node.js 的步骤：

node.js的安装

  1. 访问 Node.js 官方网站

   打开浏览器，访问 Node.js 官方网站 https://nodejs.org。

  1. 下载 Node.js 安装程序

    在 Node.js 官方网站的首页上，您会看到两个版本：LTS（长期支持）版本和当前版本。LTS 版本在稳定性和可靠性方面更受推荐

  • 点击 LTS 版本，进入 LTS 版本的下载页面。
  • 在 LTS 版本的下载页面，您将看到适用于不同操作系统的安装程序列表。找到并点击适用于 Windows 的安装程序

  1. 运行安装程序
    下载完成后，双击安装程序运行。系统可能会弹出用户账户控制（UAC）提示，请选择允许程序进行更改

  2. 选择安装选项
    在安装程序中，您可以选择一些自定义选项，例如安装路径和默认设置。如果您不确定，请保留默认设置，并点击“Next”继续

  3. 安装 Node.js
    点击“Install”按钮，开始安装 Node.js。安装过程可能需要一些时间

  4. 完成安装
       安装完成后，您将看到“Setup Successful”（安装成功）的提示。请确保选中“Automatically install the necessary tools for running Node.js”（自动安装运行 Node.js 所需的工具）选项，并点击“Finish”完成安装。

  5. 验证安装
       打开命令提示符或 PowerShell 窗口，在命令行中输入以下命令，并按回车键执

 

1
2
3
PowerShell 窗口

   node -v

  如果您正确安装了 Node.js，将会显示安装的 Node.js 版本号。比如我所使用安装的是18.15.0的版本

在PowerShell 窗口输入npm –version 可以查看npm的版本

1
2
3
PowerShell 窗口

npm --version 

如果在查看时显示非内部指令，则需要在管理员身份下运行PowerShell 窗口

安装和部署 @tarojs/cli

@tarojs/cli 是 Taro 框架的命令行工具，用于创建和管理 Taro 小程序项目。下面是使用 npm 在命令行中安装和部署 @tarojs/cli 的步骤：

  1. 使用node.js

  

   在使用 @tarojs/cli 之前，需要先安装 Node.js。您可以在Node.js 官方网站下载适用于您的操作系统的安装程序，并按照安装向导进行安装。

  1. 打开命令行工具

  

   在 Windows 系统上，您可以使用命令提示符（Command Prompt）或 PowerShell 打开命令行工具。

  1. 全局安装 @tarojs/cli

  

   在命令行中输入以下命令，并按回车键执行：

1
2
3
4
5
PowerShell 窗口

   npm install -g @tarojs/cli
   
   //这将使用 npm 包管理器全局安装 @tarojs/cli。

  

  1. 等待安装完成

  

   安装过程可能需要一些时间，请耐心等待。一旦安装完成，您将在命令行中看到相应的成功提示。

  1. 验证安装

  

   在命令行中输入以下命令，并按回车键执行：

1
2
3
PowerShell 窗口

 taro -v

   如果您正确安装了 @tarojs/cli，将会显示安装的 @tarojs/cli 版本号。

安装微信开发者工具

1.访问微信开发者工具官方网站

2.下载适用于您操作系统的微信开发者工具安装程序。

  • 运行安装程序并按照指示进行安装。

注册微信开发者账号

  • 访问微信公众平台（https://mp.weixin.qq.com）。

  • 点击注册账号并按照指示完成账号注册。

  • 登录微信开发者工具时使用您的开发者账号。

创建小程序项目

  • 打开微信开发者工具。

  • 点击新建项目。

  • 填写小程序的基本信息，包括名称、AppID、项目目录等。

  • 选择京东小程序模板或空白项目来开始开发。

安装 IntelliJ IDEA 2021.2

IntelliJ IDEA 是一款功能强大的 Java 集成开发环境（IDE），适用于开发各种 Java、Kotlin、Groovy、Scala 和 Android 应用程序。

  1. 访问 JetBrains 官方网站

打开浏览器，访问 JetBrains 官方网站
https://www.jetbrains.com/idea/。

  1. 下载 IntelliJ IDEA 安装程序

   在 IntelliJ IDEA 官方网站的首页上，您将看到最新的 IntelliJ IDEA 版本。找到并点击下载按钮。
我们本次项目所使用的是2021.2的版本

  1. 运行安装程序

   下载完成后，双击安装程序运行。系统可能会弹出用户账户控制（UAC）提示，请选择允许程序进行更改

  1. 选择安装选项

   在安装程序中，您可以选择一些自定义选项，例如安装路径和启动器设置。如果您不确定，请保留默认设置，并点击“Next”继续

  1. 选择许可证类型

   在许可证页面上，您可以选择试用版（Evaluate for free）或使用许可证密钥（Activate with JetBrains Account）。根据您的需要选择相应的选项，并点击“Next”继续

  1. 选择安装组件

   在组件页面上，您可以选择要安装的组件。默认情况下，所有组件都被选中，您可以根据需要进行调整。点击“Next”继续。可以在后期使用的过程中选择安装

  1. 选择启动器设置

   在启动器设置页面上，您可以选择创建桌面快捷方式、启动菜单项等选项。根据您的喜好进行选择，并点击“Next”继续

  1. 选择安装选项

   在安装选项页面上，您可以选择是否允许 IntelliJ IDEA 创建关联文件的关联和是否参加用户体验计划。根据您的喜好进行选择，并点击“Next”继续

  1. 选择安装路径

   在安装路径页面上，您可以选择 IntelliJ IDEA 的安装路径。保留默认的安装路径或选择其他路径，并点击“Install”开始安装

  1. 等待安装完成

    安装过程可能需要一些时间，请耐心等待。一旦安装完成，您将看到“Installation
Completed Successfully”（安装成功）的消息启动 IntelliJ IDEA
点击“Finish”完成安装后，IntelliJ IDEA 将自动启动。您可以根据提示进行一些初始设置，例如选择主题和插件。

  1. 安装相关插件
    在文件栏选择设置并找到插件
    选择并安装相关插件
  • 中文插件
  • MyBatisX

MyBatisX插件的一些主要功能和作用：
1. 代码智能提示和补全：MyBatisX插件能够识别和解析MyBatis XML映射文件，提供代码智能提示和补全功能，包括表名、列名、SQL语句、参数等。这样可以减少开发人员的犯错，并提高代码的准确性和效率。
2. 跳转和导航：插件支持在MyBatis XML映射文件中进行跳转和导航，例如从Mapper接口跳转到对应的XML映射文件，或者从SQL语句跳转到具体的Mapper接口。这使得开发者可以方便地浏览和定位相关代码。
3. 快速生成代码：MyBatisX插件提供了快速生成代码的功能，例如根据表结构自动生成实体类、Mapper接口和XML映射文件，极大地减少了手动编写重复代码的工作量。
4. SQL语句格式化和验证：插件支持对SQL语句进行格式化和验证，确保语法的正确性和一致性。开发者可以通过插件提供的功能，自动对SQL语句进行格式化和优化，提高代码的可读性和性能。
5. 数据库连接和操作：MyBatisX插件集成了数据库连接功能，可以方便地连接和操作数据库。开发者可以通过插件提供的界面，进行数据库的连接配置和查询操作，简化了与数据库交互的过程。

第二部分：JDapp开发流程

在第一部分完成软件安装和环境配置后，我们可以开始进行JDapp小程序的开发。以下是开发流程的主要步骤：

通过微信小程序生成一个模板后，可以使用 IntelliJ IDEA 来进行后续的开发任务

  1. 设计小程序界面

  • 使用微信开发者工具的可视化界面设计器，设计JDapp小程序的页面布局和样式。

  • 根据京东品牌风格，设计界面的颜色、图标和交互效果。

  • 添加商品展示、购物车、个人中心等功能模块。

  1. 编写小程序逻辑
  • 使用
     JavaScript 编程语言，在小程序的脚本文件中编写逻辑代码。
  • 处理用户交互、数据处理和页面跳转等操作。
  • 调用微信小程序提供的 API，实现商品搜索、下单、支付等功能。

对页面进行设计

在所创建的项目中不断去完善项目页面的相关代码jsx和scss(其中部分代码省略)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import {Component} from "react";
import {View, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import TabBar from '../commons/index'

export default class Index extends Component {

  render() {
    const scrollTop = 0
    const Threshold = 20
    return (
        <View>
          <Swiper
              indicatorColor='#999'
              indicatorActiveColor='#333'
              circular
              indicatorDots
              autoplay
              className='swiper'
          >
            <SwiperItem>
              <image className='swiper-image' 
src='/img/posts/cover-miniapp.jpg'></image>
            </SwiperItem>
            <SwiperItem>
              <image className='swiper-image' 
src='/img/posts/cover-miniapp.jpg'></image>
            </SwiperItem>
            <SwiperItem>
              <image className='swiper-image' 
src='/img/posts/cover-miniapp.jpg'></image>
            </SwiperItem>
          </Swiper>
          <ScrollView
              className='demo-box'
              scrollY
              scrollWithAnimation
              scrollTop={scrollTop}
              lowerThreshold={Threshold}
              upperThreshold={Threshold}
              onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 
可以这样写 `onScrollToUpper={this.onScrollToUpper}`
              onScroll={this.onScroll}
              enableFlex
          >
          </ScrollView>
          <TabBar currentTabBar={0}></TabBar>
        </View>
    )
  }
}

通过对src下pages中相关文件的不断完善从而实现JDapp页面的设计

打开浏览器，访问 Taro UI 的官方网站 其中包含了大量小程序设计所使用的各类插件，可以满足大多数小程序的页面开发

Taro UI | O2Team (jd.com)

 

  1. 调试和预览

  • 使用微信开发者工具进行实时调试和预览。

  • 模拟不同设备和环境，检查小程序在不同屏幕尺寸和操作系统上的显示效果和交互行为。

  • 确保京东小程序在各种情况下都能正常运行。

  1. 测试和优化

  • 进行JDapp小程序的测试和优化工作。

  • 执行功能测试、兼容性测试和性能测试，确保小程序的质量。

  • 优化小程序的加载速度、响应时间和用户体验。

第三部分：使用 IntelliJ IDEA、MySQL 和 Spring MVC 实现后端数据控制

在京东微信小程序中，后端数据控制是关键部分。可以使用 IntelliJ IDEA 进行开发，并结合
MySQL 数据库和 Spring MVC 框架实现后端数据的控制。以下是主要步骤：

  1. 使用 IntelliJ IDEA：
  2. 添加 Spring MVC 和 MySQL 的依赖库到项目的构建文件中。

安装 MySQL

访问 MySQL 官方网站（https://www.mysql.com/）。
下载适用于您操作系统的 MySQL 安装程序。
运行安装程序并按照指示进行安装

  1. 使用 MySQL 数据库：
    在项目的配置文件中，配置 MySQL 数据库的连接信息，包括数据库 URL、用户名和密码。

  2. 创建数据库和表：
    使用 MySQL 客户端工具（如 Navicat、MySQL Workbench），连接到本地数据库服务器。创建一个数据库，用于存储京东小程序的相关数据。根据京东小程序的数据需求，创建相应的数据表，并设置字段和关系。

安装 Spring MVC

  • 打开 IntelliJ IDEA。

  • 在插件市场中搜索并安装 Spring MVC 插件。

  • 配置 Spring MVC 的相关设置和依赖。

  1. 配置 Spring MVC：
    在 IntelliJ IDEA 中创建一个新的 Spring MVC 项目。配置项目的依赖和相关配置文件，连接到 MySQL 数据库。设置数据库的连接信息，包括数据库名称、用户名、密码和端口号等。
  • 在创建的weappdeom中完成相关的配置并进行数据的管理

  1. 编写后端代码：在 IntelliJ IDEA 的项目中，编写后端代码。根据京东小程序的需求，实现用户认证、商品管理、订单处理等后端功能。编写控制器、服务和数据访问层的代码，处理前端请求并与数据库进行交互。

  2. 调试和测试：使用 IntelliJ IDEA 的调试功能，调试后端代码。检查数据的获取和处理过程，确保后端功能的正常运行。编写单元测试用例，覆盖后端代码的各个方面，保证代码的质量和稳定性。

  3. 部署和运行：完成后端开发和测试后，将项目部署到服务器上。可以选择云服务器或本地服务器，根据需求进行部署。
    通过下载安装贝瑞花生壳实现后台数据在其网址的映射

在这个项目中，安装贝瑞花生壳的作用是为了实现内网穿透，使得本地开发的微信小程序可以在外网环境下进行访问和测试。贝瑞花生壳是一款基于云技术的内网穿透工具，它可以将本地计算机或局域网内的服务暴露到公网上，使得外部网络可以访问这些服务。
具体来说，安装贝瑞花生壳的作用有以下几点：
1. 外网访问本地服务：在开发微信小程序时，通常需要在本地进行调试和测试。安装贝瑞花生壳后，可以将本地开发环境中的微信小程序服务暴露到公网上，使得其他人可以通过访问公网地址来访问和测试你的微信小程序。
2. 方便项目演示和展示：安装贝瑞花生壳后，可以将本地的微信小程序服务分享给他人，方便进行项目演示和展示。无需部署到线上服务器，通过贝瑞花生壳提供的公网地址，其他人即可访问你的微信小程序。
3. 实时调试和远程访问：安装贝瑞花生壳后，你可以在任何有网络连接的地方通过公网地址访问你的微信小程序，实现实时调试和远程访问。这对于团队协作和远程工作非常有用，可以方便地调试和查看微信小程序的运行情况。