微信小程序项目开发

最新推荐文章于 2025-04-02 17:22:40 发布

太%阳@鸟

最新推荐文章于 2025-04-02 17:22:40 发布

阅读量1.4k

点赞数

分类专栏：微信小程序笔记文章标签：小程序 java

本文链接：https://blog.youkuaiyun.com/qq_38828776/article/details/118340628

版权

笔记同时被 2 个专栏收录

11 篇文章

订阅专栏

微信小程序

2 篇文章

订阅专栏

本博客介绍了一个个人微信小程序的重构过程，包括技术选型、环境搭建及基础功能模块设计等内容。作者计划通过此项目实现时间管理、菜单管理等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重构

之前一直有个微信小程序，但是没有过于管理现在准备重新构建一个小程序。来记录生活日常、平时心得以及一些小工具，程序就是服务于人为什么不能服务自己？

技术选型

微信小程序
color-ui https://www.kancloud.cn/als24/color/1141392

后台
spring boot
redis
mysql
rabbitmq

因为是自用所以对于数据的查询不会过多，所以准备绝大多数的数据存储到redis 中做缓存。mysql主要用来做用户管理系统。

基础功能模块

用户管理和角色管理都是一些基础的管理模块、菜单模块、以及登录日志、操作日志。操作日志一般不添加用户点击操作日志
在这里插入图片描述

暂时只有一下两个通用功能，一个是事件管理、就是博客管理一样、另外一个是菜谱管理，针对于自己对于想要做的菜系进行管理，查询盘复。
在这里插入图片描述

微信小程序环境搭建

首先需要在微信公众平台注册一个账号微信小程序注册，注册后获取到对应的APPID ，登录进去点击你的头像，当前页面最下方就存在APPID。
在这里插入图片描述
在微信公众平台下载微信开发工具后打开微信开发工具新建小程序输入APPID创建一个新的小程序。

然后去下载样式包 color-ui , 因为我是原生开发，所以直接打开demo 里面的 color-ui 项目导入进去就好了。不得不说这个样式给敏捷开发省了一大笔时间。
在这里插入图片描述
如果只是要导入的话只需要导入这个些控件就好了。

在app.wxss 中导入主要样式文件。以及在app.json 导入以下文件

  "window": {
    "navigationBarBackgroundColor": "#39b54a", ## 项目的背景
    "navigationBarTitleText": "Color UI", ## 项目的导航名称
    "navigationStyle": "custom", ## 引入color-ui 的框架风格
    "navigationBarTextStyle": "white"
  },
  ## 引入color-ui 的组件
  "usingComponents": { 
    "cu-custom": "/colorui/components/cu-custom"
  },

在这里插入图片描述

color-ui 首页

color-ui 整个页面都是自主开发的，没有使用微信的导航栏。在pages 下面的index包中就是首页，中间的index.json 文件中导入了四个组件就是上面四个包的首页。

{
  "usingComponents": {
    "basics": "/pages/basics/home/home",
    "component": "/pages/component/home/home",
    "plugin": "/pages/plugin/home/home",
    "about": "/pages/about/home/home"
  }
}

在这里插入图片描述
下面这些代码是color-ui的index页面的主要代码。在index.wxml中间

在这里插入图片描述

<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action" bindtap="NavChange" data-cur="basics">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="component">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='component'?'text-green':'text-gray'}}">组件</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="plugin">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">扩展</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="about">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='about'?'text-green':'text-gray'}}">关于</view>
  </view>
</view>