作为一个前端小白,我竟然搞定了一个小程序的交付

简介: 作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!

作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!

一、搭建开发环境

在开始任何实际编码之前,首先需要准备好开发环境。通常情况下,这意味着要手动安装 Python或Java环境以及MySQL和Redis数据库等。但对于极态云来说,这一切变得异常简单。按照其官方网站(https://jit.pro)上的指引操作,只需点击几下鼠标就可以自动配置好所有必要的软件栈。

二、创建并接入微信小程序应用

接下来就是创建自己的小程序项目了。通过极态云提供的界面,可以很容易地生成一个新的应用程序框架,并且直接与微信公众平台对接进行身份验证。

image.png

进入应用后,配置在微信公众号后台的密钥。

image.png

前端小程序代码中,导入极态云的 SDK,就接入成功啦。

import {
    runApp, PLATFORM, login } from 'JitSdk';

Page({
   
  data: {
   
    loginMsg: '初始化中...',
  },

  async onReady() {
   
    try {
   
      await runApp({
   
        apiPath: 'https://xxx.xxx.xxx.xxx/api/{CropID}/{AppID}',
        platform: PLATFORM.WEI_XIN_MINI_PROGRAM,
      });

      this.updateLoginMessage('正在登录...');
      await login();
      this.updateLoginMessage('登录成功,即将跳转...');
      setTimeout(() => wx.navigateTo({
    url: '/pages/index/index' }), 1000);
    } catch (error: any) {
   
      wx.showModal({
   
        title: '登录失败',
        content: error.message || '未知错误',
        showCancel: false,
      });
    }
  },

  updateLoginMessage(message: string) {
   
    this.setData({
    loginMsg: message });
  },
});

三、可视化配置后端业务

接入登录只是开始,真正复杂的是后端业务逻辑的实现,但在极态云上可以可视化的配置这些功能。

1、配置数据存储结构

极态云提供了丰富的数据类型供选择,例如:单选、多选、日期、身份证号、手机号、车牌号、图片、附件、超链接、地址、定位等等。通过界面配置即可,相当于下载了一个 mysql 客户端。像订单号,利用流水号字段,即使是生成唯一订单号这类需求也能通过简单设置规则来实现,无需编写额外代码。image.png

2、直接调用后端的增删改查函数

极态云内部已经封装好了对这个表的增删改查函数。而且前端可以直接调用!

const app = getRuntimeApp();
const result = await app.models.OrderModel.create({
   
  remarks: "xxxxxx",
  money: 5000,
  ...
});
const result = await app.models.OrderModel.query();

3、多表查询也很简单

当涉及到多个数据表间的关系时,在极态云上同样可以通过图形界面轻松定义聚合规则,可实时预览聚合结果。保存为一个新的模型,然后前端像上面一样 await app.models.XXXModel.query() 即可查询结果。

image.png

四、最后

虽然接手这样一个全栈性质的任务对我来说是个不小的考验,但是有了极态云这样的工具作为辅助,确实让事情变得容易了许多。希望我的经历能够给同样面临类似挑战的朋友带来一些启发!

相关文章
|
6月前
|
监控 前端开发 测试技术
前端研发流程的深入解析:从构思到交付
前端研发流程的深入解析:从构思到交付
145 0
|
12天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
26 2
|
5月前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
3月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
45 0
|
3月前
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
35 0
|
5月前
|
前端开发 小程序
新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码
同城校园跑腿外卖配送平台源码,支持自定义diy 你可以设计你的页面,设计你自己的风格,支持多校园,独立版本,多商户,有用户端,骑手端,商家端,强大的功能
189 3
|
6月前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
250 1
|
6月前
|
小程序 前端开发 API
快递平台独立版小程序源码|带cps推广营销流量主+前端
快递平台独立版小程序源码|带cps推广营销流量主+前端
231 7
快递平台独立版小程序源码|带cps推广营销流量主+前端
|
6月前
|
监控 前端开发 小程序
微信小程序全栈开发中的前端工程化实践
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的前端工程化实践,旨在提升开发效率和体验。重点包括代码规范与架构设计(模块化、组件化、MVC模式)、自动化构建与部署(使用Webpack、Git和CI工具)、前端框架与库(如Vue.js、React、Angular)以及性能优化策略(代码、资源优化和性能监控)。通过这些实践,开发者能更高效地掌握小程序开发,打造高质量应用。
73 0
|
6月前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
756 0