【免费开放源码】审批类小程序项目实战（IDE介绍篇）

原创已于 2024-07-15 13:42:01 修改 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #微信小程序 #小程序

于 2022-12-20 19:49:12 首次发布

微信原生小程序同时被 2 个专栏收录

32 篇文章

订阅专栏

零基础审批小程序实战

15 篇文章

订阅专栏

第一节：什么构成了微信小程序、创建一个自己的小程序

第二节：微信开发者工具使用教程

第三节：深入了解并掌握小程序核心组件

第四节：初始化云函数和数据库

第五节：云数据库的增删改查

第六节：项目大纲以及制作登录、注册页面

第七节：制作活动申请页面

第八节：活动申请页面的补充

第九节 ”我的“页面制作

第十节：活动详情页面制作

第十一节：活动历史页面制作

第十二节：预约老师页面制作

第十三节：预约历史页面制作

第十四节：活动审批端制作

第十五节：预约审批端制作

项目的Github仓库地址

这个项目是当时大一大二自学前端的时候做的一个算是比较大的项目，主体原型是汕头大学校团委微信小程序，该微信小程序使用微信原生语法和腾讯云开发框架开发，旨在简化汕头大学校团委的教师预约申请和活动申请的审批流程。因为一切的代码以及框架都是从零搭建的，经过了几个版本的迭代和摸爬滚打的探索，已经稳定运行了将近两年的时间。所以想写这个系列的文章，一方面是分享一些开发经历以及心得，另一方面是对学校组织贡献一点微薄之力～

希望通过这个系列的博客，能够深入介绍“汕头大学校团委微信小程序”的开发过程、功能实现和技术细节，帮助更多的开发者和用户了解和使用该小程序。我们也欢迎更多的开发者为这个开源项目做出贡献，共同完善和优化这个项目。欢迎提交PR请求和留下你的问题。这个项目单纯为爱发电，所以不会有任何金钱相关的利益。如果这个项目对你有帮助，可以给我一个小星星吗？

前言

在前言篇中我们已经成功创建好了一个全新的小程序，那么在我们了解微信小程序的组件前，得要先了解这个微信开发者工具的大体结构，接下来我们开始深入了解吧。

结构

首先是开发者工具上方一些重要的功能

其次是开发者工具的中间区域

你应该注意到有三个app开头的文件，那它们有什么作用呢？

app.js 是小程序的主脚本文件，用于注册小程序并进行全局的逻辑处理。这个文件中的代码会在小程序启动时执行一次。主要包含：

1. App() 函数：用于注册一个小程序实例，并接受一个对象作为参数。这个对象包含多个生命周期函数，如 `onLaunch`、`onShow` 和 `onHide` 等。
2. 全局数据：可以在 `App()` 中定义 `globalData` 属性，用于存储全局数据，供各个页面访问和使用。

App({
  onLaunch: function() {
    // 小程序启动时执行的代码
  },
  globalData: {
    userInfo: null
  }
})

app.wxss 是小程序的全局样式表文件，用于定义小程序中所有页面共享的样式规则。它可以包括字体、颜色、布局等 CSS 样式，使小程序具有一致的外观和感觉。示例代码：

/* 定义全局的样式 */
page {
  background-color: #f0f0f0;
}

.text-center {
  text-align: center;
}

app.json 是小程序的全局配置文件，用于配置小程序的路由、窗口表现、导航栏、底部标签等。它是一个 JSON 格式的文件，包含：

1. pages：声明小程序的所有页面路径，每个页面对应一个目录和同名的 `.js`、`.wxml`、`.wxss` 和 `.json` 文件。
2. window：设置小程序的窗口表现，包括导航栏的背景色、标题颜色等。
3. tabBar：如果小程序使用底部标签栏导航，则在这里配置标签栏的表现和各个标签页面的信息。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

简单来说，这三个文件共同作用，定义了小程序的基础结构、样式和行为，是微信小程序开发中必不可少的组成部分。

app.js里面写的代码是让用户在进入小程序时运行的逻辑，比如说我想让用户一进入小程序就进行刷新操作，那么我就可以在app.js写相关的代码。app.json里面写的代码就是用来配置整体小程序的。比如我整个小程序的名称，是否可以分享，主页面的导航栏等等，之后我们会提到。